Patterns
Explore component examples and usage patterns across the entire library, with variants, sizes, states, accessibility notes, and copyable code for fast builds.
Basic
Circle with border
Fill black white
Fill danger
Fill danger subtle
Fill info subtle
Fill primary
Fill primary subtle
Fill secondary
Fill success subtle
Fill warning
Fill warning subtle
Fill with circle container
Fill with motion
Keyboard activation
Scrollable
Scrollable on mobile
Vertical
With border
With circle item
With danger color
With foreground color
With icon
With info color
With link
With success color
With warning color
Button with icon
Circle
Custom background
Custom design
Danger
Disabled
Info
Inline alert
Large
Outline
Plain
Primary
Secondary
Small
Square
State
Subtle danger
Subtle info
Subtle primary
Subtle success
Subtle warning
Subtle with icon
Success
Warning
Alert dialog
Basic
Controlled
Custom close
Custom style 1
Custom style 2
Custom style 3
Custom style 4
Dialog
Fullscreen
Nested
Sticky
With checkbox
With form submit
With icon
With switch
Basic
Bulk actions
Draggable
Expandable
Full width with card
Full width with modal
Grid
Sortable
Stripped
With action
With columns selection
With pagination
With search
With tanstack table
Basic
Controlled
Custom value
Disabled
Invalid
Multiple select
Readonly
Uncontrolled
With avatar
With avatar and description
With description
With description on item
With fieldset
With icons
With label
Basic
Controlled
Disabled
Invalid
Multiple
Uncontrolled
With autocomplete
With avatar
With avatar and description
With description
With description on item
With fieldset
With icons
With label
Basic
Controlled
Disabled
Drag between grid
Draggable
Multiple selection
Regular list
Single selection
With avatar
With link
With section
Without selection
Arrow
Basic
Emoji picker
Nested
Placement
With avatar trigger
With description list
With detail line
With details
With dialog
With form
With grid list
With tabs
Basic
Controlled
Custom background
Multiple
Size
Square size
Subtle danger
Subtle info
Subtle primary
Subtle success
Subtle warning
Uncontrolled
With motion
Basic
Compact
Controlled
Currency
Disabled
Percent
Units
With description
With field error
With fieldset
With label
With link after label
Basic
Controlled
Disabled
Readonly
Uncontrolled
Validation with zod
With button
With field error
With fieldset
With input group
With link after label
With native select
Basic
Danger
Info
Outline
Secondary
Success
Warning
With border
With icon
With link
With solid background
Basic
Controlled
Custom background
Default selected
Disabled
Invalid
Readonly
Uncontrolled
With checkbox group
With description
With fieldset
Multiple choice
Single choice
With card
With default selected
With gap
With gap columns
With icon
With link
With modal
With sheet
Basic
Controlled
Disabled
Readonly
Uncontrolled
Validation
With description
With fieldset
With time
Basic
Full width with card
Full width with modal
Full width with sheet
With badge
With card
With disclosure
With modal
With sheet
Basic
Controlled
Custom style
Disabled
Inside modal
Inside sheet
Multiple expanded
Nested
With form
Controlled
Disabled
Only letters
Only numbers
Pin
Validation
With pattern
With separator
With timer
Basic
Controlled
Disabled
Invalid
Uncontrolled
With description
With fieldset
With label
With opt group
Basic
Controlled
Disabled
Readonly
Uncontrolled
With custom input
With description
With keyboard
With label
Basic
Controlled
Custom background
Default selected
Disabled
Readonly
Uncontrolled
With description
With fieldset
Basic
Disabled
With card
With custom layout
With field group
With grid layout
With legend
With text
Allow remove
Controlled selection
Default selected
Disabled selection
Link
Multiple selection
Single selection
With fieldset
Basic
Constrained with description list
Custom style
Gutter
With action
With description list
With details
Basic
Ready to build something amazing?
High conversion sections, clean layouts, and consistent UI patterns you can reuse everywhere.