Built-in Components

1. Customize Colors

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

   rosepinkfuchsiapurplevioletindigoblueskycyantealemeraldgreenlimeyellowamberorangeredslategrayzincneutralstoneCheck list of colors
   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
   Icon

   Icon

   Icon

   Icon

   Icon
   Small SizeSmall SizeSmall SizeSmall SizeSmall Size
   Icon

   Icon

   Icon

   Icon

   Icon
   DisabledDisabledDisabledDisabledDisabled
   Disabled

   Disabled

   Disabled

   Disabled

   Disabled

8. TextButton

   Button with a text style

   Primary VariantBasic Variant

9. IconButton

   Button with only icon inside

10. Custom 404 Page

    Styled 404 page with some animation.

    Visit the 404 page

11. Next Image

    Next Image with default props and skeleton animation

    

12. Skeleton

    Skeleton with shimmer effect