Built-in Components

Back to Home
  1. UnstyledLink

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

  2. PrimaryLink

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

  3. SecondaryLink

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

  4. UnderlineLink

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

  5. ArrowLink

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

  6. ButtonLink

    Button styled link with 3 variants.

  7. Button

    Ordinary button with style.

  8. Badges

    Ordinary badge

    BadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge

    Large badge

    BadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge

    Badge with icon

    BadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge

    Large badge with icon

    BadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge

    Badge with remove

    BadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge

    Large Badge with remove

    BadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge

    Circle Badge

    11111111
  9. Switch

    Ordinary switch

    Switch with label

    On with label
    Off with label

    Disabled switch

    Disabled switch with label

    On with label
    Off with label
  10. Input

    Ordinary input with style.

    Icons from heroicons.com, using the @heroicons/react package.

  11. Alert

    A simple message component to display feedback.

    Some boring information (defaults to 'info' variant)

    Successfully uploaded

    You've been warned!

    Something went wrong ...

    Alert.Paragraph and Alert.Heading are provided to style the contents of an alert. Both components support an option Icon property.

    Successfully uploaded

    Well done!

    Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

    Danger alert! Change a few things up and try submitting again.

    Oh snap!

    Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

    The optional onClose property can be used to show an icon with the handler attached onClick.

    Hey look you can dismiss me!

    But the question is ... should you?

    The optional action property renders an action button at the bottom of the Alert.

    type Action = {
      onClick: () => void
      content: ReactNode
      Icon?: ComponentType<{className: string}>
    }

    You can act on me!

    Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

    You can act on me!

    Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

    You can act on me!

    Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

    You can act on me!

    Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

  12. Custom 404 Page

    Styled 404 page with some animation.

  13. Toast

    Display a toast component using the Alert styles. Implemented with react-hot-toast.

    useToast provides the functions to display, update, and dismiss toasts.

    import {useToast} from '@/components/Toast'
    
    const {
      show,
      showUnique,
      update,
      remove
      removeAll
    } = useToast()

    Use removeAll to clear all the existing toasts.

    showUnique takes an string id to create a unique toast. Calling it multiple times, while visible, won't create any other toasts.

    update takes an string id to update the contents and options a visible toasts.

  14. Modals

    Info modal

    Action modal

    Action modal without cancel button

  15. Tooltip

  16. Next Image

    Next Image with default props and skeleton animation

    Icon
  17. Skeleton

    Skeleton with shimmer effect

  18. Default Footer

    White Footer