Built-in Components

1. Customize Colors

   You can change primary color to any Tailwind CSS colors. See globals.css to change your color.

   50

   100

   200

   300

   400

   500

   600

   700

   800

   900

2. UnstyledLink

   No style applied, differentiate internal and outside links, give custom cursor for outside links.

   Internal LinksOutside Links

3. PrimaryLink

   Add styling on top of UnstyledLink, giving a primary color to the link.

   Internal LinksOutside Links

4. UnderlineLink

   Add styling on top of UnstyledLink, giving a dotted and animated underline.

   Internal LinksOutside Links

5. ArrowLink

   Useful for indicating navigation, I use this quite a lot, so why not build a component with some whimsy touch?

   Direction LeftDirection RightPolymorphicPolymorphic

6. ButtonLink

   Button styled link with 3 variants.

   Primary VariantOutline VariantGhost VariantDark VariantLight Variant

7. Button

   Ordinary button with style.

   Primary VariantOutline VariantGhost VariantDark VariantLight Variant
   DisabledDisabledDisabledDisabledDisabled
   Disabled

   Disabled

   Disabled

   Disabled

   Disabled

8. Custom 404 Page

   Styled 404 page with some animation.

   Visit the 404 page

9. Next Image

   Next Image with default props and skeleton animation

   

10. Skeleton

    Skeleton with shimmer effect