Design System

Reusable components built with Radix UI and Tailwind CSS

Button

Variants

Sizes

With Icons

States

Input

We'll never share your email

Password must be at least 8 characters

Badge

Variants

DefaultPrimarySecondarySuccessWarningDanger

Sizes

SmallMediumLarge

With Dot

ActivePendingErrorNeutral

Tooltip

Positions

With Icons

No Arrow

Card

Default Card

This is a simple card with default styling. Cards are great for grouping related content.

Solid Card

This card has a solid background without glassmorphism.

No Hover Card

This card has no hover effect.

Custom Styled Card

Cards can be customized with any Tailwind CSS classes.

Modal

Basic Modal

With Footer

Sizes

Select

Choose your favorite fruit

Theme Toggle

The theme toggle in the header demonstrates the dark mode functionality. All components support both light and dark themes.

Interactive Demo

User Profile Form

We'll never share your email

Status Dashboard

Active UsersOnline

1,234

Pending TasksAttention

42

System StatusError

3