Details with badge
Toggle Menu
Blocks
Templates
Patterns
Starter kits
Themes
Changelog
Sign in
Get full access
Patterns
Details
With badge
/
Autocomplete
With grid list
With menu
With select
With table
With textarea
Avatar
Basic
Fallback
Group
Initials
Size
Square
Badge
Basic
Danger
Info
Outline
Secondary
Success
Warning
With border
With icon
With link
With solid background
Bar list
Basic
Controlled
With card
With link
Breadcrumbs
Basic
Slash separator
With icon
With menu
Button
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
Button group
Basic
Disabled
Vertical
With icon
With menu
With text
Card
Basic
Constrained with description list
Custom style
Gutter
With action
With description list
With details
Checkbox
Basic
Controlled
Custom background
Default selected
Disabled
Invalid
Readonly
Uncontrolled
With checkbox group
With description
With fieldset
Choice box
Multiple choice
Single choice
With card
With default selected
With gap
With gap columns
With icon
With link
With modal
With sheet
Code block
Basic
Other lang
With copy button
With line numbers
With max height
Color picker
Basic
Channel slider
With color slider
With color swatch
Color slider
Basic
Disabled
Orientation
With label
Color swatch
Basic
Custom size
Color swatch picker
Basic
Custom size
Color wheel
Basic
Controlled
Disabled
Combo box
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
Context menu
Basic
Danger
Disabled
Header
Multiple
Shortcut
Single
Sub context
Warning
Date field
Basic
Controlled
Uncontrolled
Validation
With description
With fieldset
With label
Date picker
Basic
Caption layout
Controlled
Custom trigger
Disabled
International
Readonly
Uncontrolled
Validation
With description
With fieldset
With time
Date range picker
Basic
Caption layout
Disabled
International
Number of months
Readonly
Validation
With fieldset
Description list
Basic
Full width with card
Full width with modal
Full width with sheet
With badge
With card
With disclosure
With modal
With sheet
Detail line
Basic
With badge
With card
Details
Basic
With badge
With icon
With link
With modal
With sheet
With text
Disclosure group
Basic
Controlled
Custom style
Disabled
Inside modal
Inside sheet
Multiple expanded
Nested
With form
Drop zone
Basic
With file trigger
Fieldset
Basic
Disabled
With card
With custom layout
With grid layout
With legend
With text
File trigger
Accept directory
Controlled
Multiple files
With drop zone
Grid list
Basic
Controlled
Disabled
Drag between grid
Draggable
Multiple selection
Regular list
Single selection
With avatar
With link
With menu
With section
Without selection
Heading
Level 1
Level 2
Level 3
Level 4
With actions
Input otp
Controlled
Disabled
Only letters
Only numbers
Pin
Validation
With pattern
With separator
With timer
Keyboard
Basic
Custom background
With button
With input group
With menu
With toggle
Leaderboard
Basic
Currency
On action
Percentages
With header
With header actions
With icon
With scroll area
Link
Basic
Custom style
Text link
With button style
With text
Menu
Arrow
Basic
Blur overlay
Danger item
Disabled item
For user
Multiple
Multiple user
On action
Open modal
Placement
Section level section
Warning item
With autocomplete
With avatar
With avatar and description
With avatar trigger
With description
With link
With section
With shortcut
With sticky header
With submenu
With table
Meter
Basic
Full
With description
With value label props
Modal
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
Multiple select
Basic
With description
Native select
Basic
Controlled
Disabled
Invalid
Uncontrolled
With description
With fieldset
With label
With opt group
Note
Basic
Danger
Info
Inside toast
No indicator
Success
Warning
Number field
Basic
Compact
Controlled
Currency
Disabled
Percent
Units
With description
With field error
With fieldset
With label
With link after label
Password field
Basic
With anonation
Popover
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
Progress bar
Basic
Controlled
With description
Radio
Basic
Custom background
Disabled
Invalid
With checkbox
With description
With fieldset
Scroll area
Basic
Fade
Fade with gutter
Horizontal
Vertical
With modal
With sheet
Search field
Basic
Controlled
Disabled
Readonly
Uncontrolled
With custom input
With description
With keyboard
With label
Select
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
Sheet
Basic
Controlled
Custom close
Float
Position
Sticky
Shimmering text
Basic
Color
Duration
Sizes
With animate presence
Skeleton
Basic
Dynamic content
Slider
Basic
Controlled
Custom style
Orientation
Square thumb
Step
Snippets
Basic
Switch
Basic
Controlled
Custom background
Default selected
Disabled
Readonly
Uncontrolled
With description
With fieldset
Table
Basic
Bulk actions
Draggable
Expandable
Full width with card
Full width with modal
Grid
Sortable
Stripped
Table footer
With action
With columns selection
With menu actions
With pagination
With search
With tanstack table
Tabs
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
Tag field
Basic
Controlled input
Disabled
Invalid tag input
Readonly
Uncontrolled input
Tag group
Allow remove
Controlled selection
Default selected
Disabled selection
Link
Multiple selection
Single selection
With fieldset
Text
Basic
With badge
With fieldset
With input group
With link
Text field
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
Textarea
Basic
Mention
With tabs
Time field
Basic
Controlled
Uncontrolled
Validation
With description
With fieldset
With label
Toast
Basic
Error
Info
Promise
Success
Toggle
Basic
Controlled
Outline
Size
Square size
Uncontrolled
Toggle group
Basic
Controlled
Custom background
Multiple
Size
Square size
Subtle danger
Subtle info
Subtle primary
Subtle success
Subtle warning
Uncontrolled
With motion
Tooltip
Basic
Bigger
Full rounded
Inverse
No delay
Placement
With pressable
Without arrow
Tracker
Basic
Custom background
With card
Without tooltip
Tree
Basic
Controlled
Default expanded
Disabled
Disabled selection
Draggable
Multiple
On action
With icons
Details / With badge
Get code
ModelContextProtocol
Project details
Project ID
PRJ-84721
Status
Active
Environment
Production
Owner
Olivia Martin
Created on
August 12, 2025
Region
US East 1
Repository
github.com/acme/checkout