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
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 above
Content 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 variant
Run
pnpm build to compile the project. Check dist/ for output files.Different sizes
xs code - Extra smallsm code - Smallmd code - Medium (default)lg code - LargeInput 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
SuccessYour changes have been saved successfully.
WarningPlease review your input before proceeding.
ErrorSomething went wrong. Please try again.
InfoNew features are available. Check them out!
With Close Button
DismissableClick the X to dismiss this alert.
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
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
Rounded Variants
Error Fallback (broken src)
List Component
Unordered List (no bullets)
- First item
- Second item
- Third item
Unordered List (with bullets)
- First item
- Second item
- Third item
Ordered List
- Step one
- Step two
- 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 Link
Check 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
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
Foreground
Foreground Muted
Foreground Subtle
Primary
Accent
Success
Error
Warning
Info
Inverted Colors
Inverted Foreground
Inverted Muted
Inverted 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