Skip to main content

Box Component

The Box component is the foundation primitive.It accepts all layout, spacing, color, and styling props.
Hover me to see margin change (mt: 4-8, mb: 4-4/12)
ABC(flex - block on hover)

Text Component

Extra Small (xs)Small (sm)Medium (md)Large (lg)Extra Large (xl)2XL

Heading Component

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Button Component

Variants
Sizes
States
With Icons
Color Schemes
Full Width
As Link
Link ButtonOutline Link

Spinner Component

Sizes
Colors (inherits from parent)

Stack Component

Stack (base component)
Stack Item 1
Stack Item 2
VStack (default direction="column")
Item 1
Item 2
Item 3
HStack (direction="row")
Item 1
Item 2
Item 3
Stack with different gaps
gap=1
A
B
gap=2
A
B
gap=4
A
B
gap=6
A
B
Stack with alignment
align="start"
Short
Longer item
align="center"
Short
Longer item
align="end"
Short
Longer item

Flex Component

Basic Flex (row direction)
Item 1
Item 2
Item 3
Flex with justify
justify="start"
justify="center"
justify="end"
justify="space-between"End
Flex with wrap
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Column direction
Column Item 1
Column Item 2
Column Item 3

Grid Component

Basic Grid (3 columns)
1
2
3
4
5
6
4-column Grid
Item 1
Item 2
Item 3
Item 4
Custom column template
1fr
2fr (wider)
1fr
Grid with rows
Row 1
Row 1
Row 2 (100px height)
Row 2 (100px height)
Row 3
Row 3

Container Component

Container sizes
size="sm" (640px max)
size="md" (768px max)
size="lg" (1024px max) - default
size="xl" (1280px max)
size="full" (100% width)
Container with centerContent
Centered content

Divider Component

Horizontal Dividers (default)
Content aboveContent below
Divider Colors
border-muted (default)
border
primary
accent
success
error
Divider Thickness
1px (default)
2px
3px
4px
Vertical Dividers
Left
Middle
Right

Spacer Component

Push items apart in flex container
Logo
Nav
Multiple spacers for equal distribution
A
B
C
Vertical spacer
Header
Footer

Code Component

Plain variant (default)Use npm install to install packages. The package.json file defines your dependencies.Subtle variantRun pnpm build to compile the project. Check dist/ for output files.Different sizes
xs code - Extra smallsm code - Smallmd code - Medium (default)lg code - Large

Input Component

Sizes
Variants
States

Label Component

Basic labels
Required indicator
Size and weight variants

Textarea Component

Sizes
Variants
States
Resize options

Select Component

Sizes
Variants
States

Checkbox Component

Sizes
Without labels
Checked states
Disabled state

Radio Component

Sizes
Radio group
Disabled state

Switch Component

Sizes
Without labels
On/Off states
Disabled state

FormField Component

With helper text
Choose a unique username
With error message
Please enter a valid email address
Required field
Must be at least 8 characters
Disabled field
This field is disabled
With Select
Select your country

IconButton Component

Sizes
Variants
Color Schemes
States

Alert Component

Status Variants
With Close Button

Badge Component

Color Schemes (Subtle)
GrayPrimaryAccentSuccessWarningErrorInfo
Color Schemes (Solid)
GrayPrimaryAccentSuccessWarningErrorInfo
Sizes
SmallMedium

Progress Component

Values
25%
50%
75%
100%
Sizes
Color Schemes
Indeterminate

Skeleton Component

Text Placeholder
Avatar Placeholder
Card Placeholder

Avatar Component

Sizes
JD
JS
BW
AB
With Images
User 1
User 2
User 3
Rounded Variants
F
M
Fallback (no name)

Card Component

Basic Card
This is a basic card with just body content.
Card with Header/Body/Footer
Card Title
Card body content goes here. It can contain any content you want.
Shadow Variants
shadow="none"
shadow="sm"
shadow="md"

Image Component

Basic Image
Random image
Rounded Variants
No rounding
Medium rounding
Full rounding
Error Fallback (broken src)
Broken image

List Component

Unordered List (no bullets)
  • First item
  • Second item
  • Third item
Unordered List (with bullets)
  • First item
  • Second item
  • Third item
Ordered List
  1. Step one
  2. Step two
  3. Step three
List with Icons
  • Feature one completed
  • Feature two completed
  • Feature three completed

Link Component

Default Variant
Visit our documentation for more details.
Underline Variant
Read the terms of service carefully.
Subtle Variant
See the changelog for updates.
External LinkCheck out example.com (opens in new tab).

Tabs Component

Line Variant (default)
Manage your account settings and preferences.
Enclosed Variant
Project overview and summary.

Breadcrumb Component

Default Separator
Custom Separator
Icon Separator

Menu Component

Basic Menu
Click outside or press Escape to close the menu.

Pagination Component

Basic Pagination
Current page: 5
Without Edge Buttons

Modal Component

Different Sizes

Tooltip Component

Different Placements
With Delay
Disabled

Popover Component

Different Placements
Click trigger to open, click outside or press Escape to close.

Accordion Component

Single Expand (default)
Content for section 1. Only one section can be open at a time.
Multiple Expand
Multiple items can be expanded simultaneously.
This is also expanded by default.

Spacing

Padding: p={4}
Horizontal & Vertical: px={6} py={2}
Responsive: p={base: 2, md: 4, lg: 6}

Layout

Flexbox
Item 1
Item 2
Item 3
Grid
Grid 1
Grid 2
Grid 3

Colors

Text Colors
ForegroundForeground MutedForeground SubtlePrimaryAccentSuccessErrorWarningInfo
Inverted Colors
Inverted ForegroundInverted MutedInverted Subtle
Background Colors
Primary Subtle
Primary
Primary Emphasis
Accent Subtle
Accent
Accent Emphasis

Borders & Roundness

Border Widths
Thin
Medium
Thick
Roundness
Small
Medium
Large

Shadows

None
Small
Medium
Large