S
shadcn-ui
/
ui
Visit Registry
Visit Repository
Files
Code
Info
accordion-demo
alert-demo
alert-destructive
alert-dialog-demo
aspect-ratio-demo
avatar-demo
badge-demo
badge-destructive
badge-outline
badge-secondary
breadcrumb-demo
breadcrumb-dropdown
breadcrumb-ellipsis
breadcrumb-link
breadcrumb-responsive
breadcrumb-separator
button-as-child
button-default
button-demo
button-destructive
button-ghost
button-group-demo
button-group-dropdown
button-group-input
button-group-input-group
button-group-nested
button-group-orientation
button-group-popover
button-group-select
button-group-separator
button-group-size
button-group-split
button-icon
button-link
button-loading
button-outline
button-rounded
button-secondary
button-size
button-with-icon
calendar-demo
calendar-hijri
card-demo
card-with-form
carousel-api
carousel-demo
carousel-orientation
carousel-plugin
carousel-size
carousel-spacing
chart-bar-demo
chart-bar-demo-axis
chart-bar-demo-grid
chart-bar-demo-legend
chart-bar-demo-tooltip
chart-tooltip-demo
checkbox-demo
checkbox-disabled
checkbox-with-text
collapsible-demo
combobox-demo
combobox-dropdown-menu
combobox-popover
combobox-responsive
command-demo
command-dialog
context-menu-demo
data-table-demo
date-picker-demo
date-picker-with-presets
date-picker-with-range
dialog-close-button
dialog-demo
drawer-demo
drawer-dialog
dropdown-menu-checkboxes
dropdown-menu-demo
dropdown-menu-dialog
dropdown-menu-radio-group
empty-avatar
empty-avatar-group
empty-background
empty-demo
empty-icon
empty-input-group
empty-outline
field-checkbox
field-choice-card
field-demo
field-fieldset
field-group
field-input
field-radio
field-responsive
field-select
field-slider
field-switch
field-textarea
form-rhf-array
form-rhf-checkbox
form-rhf-complex
form-rhf-demo
form-rhf-input
form-rhf-password
form-rhf-radiogroup
form-rhf-select
form-rhf-switch
form-rhf-textarea
form-tanstack-array
form-tanstack-checkbox
form-tanstack-complex
form-tanstack-demo
form-tanstack-input
form-tanstack-radiogroup
form-tanstack-select
form-tanstack-switch
form-tanstack-textarea
hover-card-demo
input-demo
input-disabled
input-file
input-group-button
input-group-button-group
input-group-custom
input-group-demo
input-group-dropdown
input-group-icon
input-group-label
input-group-spinner
input-group-text
input-group-textarea
input-group-tooltip
input-otp-controlled
input-otp-demo
input-otp-pattern
input-otp-separator
input-with-button
input-with-label
input-with-text
item-avatar
item-demo
item-dropdown
item-group
item-header
item-icon
item-image
item-link
item-size
item-variant
kbd-button
kbd-demo
kbd-group
kbd-input-group
kbd-tooltip
label-demo
menubar-demo
mode-toggle
native-select-demo
native-select-disabled
native-select-groups
native-select-invalid
navigation-menu-demo
pagination-demo
popover-demo
progress-demo
radio-group-demo
resizable-demo
resizable-demo-with-handle
resizable-handle
resizable-vertical
scroll-area-demo
scroll-area-horizontal-demo
select-demo
select-scrollable
separator-demo
sheet-demo
sheet-side
skeleton-card
skeleton-demo
slider-demo
sonner-demo
sonner-types
spinner-badge
spinner-basic
spinner-button
spinner-color
spinner-custom
spinner-demo
spinner-empty
spinner-input-group
spinner-item
spinner-size
switch-demo
table-demo
tabs-demo
textarea-demo
textarea-disabled
textarea-with-button
textarea-with-label
textarea-with-text
toggle-demo
toggle-disabled
toggle-group-demo
toggle-group-disabled
toggle-group-lg
toggle-group-outline
toggle-group-single
toggle-group-sm
toggle-group-spacing
toggle-lg
toggle-outline
toggle-sm
toggle-with-text
tooltip-demo
typography-blockquote
typography-demo
typography-h1
typography-h2
typography-h3
typography-h4
typography-inline-code
typography-large
typography-lead
typography-list
typography-muted
typography-p
typography-small
typography-table
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information
accordion-demo
alert-demo
alert-destructive
alert-dialog-demo
aspect-ratio-demo
avatar-demo
badge-demo
badge-destructive
badge-outline
badge-secondary
breadcrumb-demo
breadcrumb-dropdown
breadcrumb-ellipsis
breadcrumb-link
breadcrumb-responsive
breadcrumb-separator
button-as-child
button-default
button-demo
button-destructive
button-ghost
button-group-demo
button-group-dropdown
button-group-input
button-group-input-group
button-group-nested
button-group-orientation
button-group-popover
button-group-select
button-group-separator
button-group-size
button-group-split
button-icon
button-link
button-loading
button-outline
button-rounded
button-secondary
button-size
button-with-icon
calendar-demo
calendar-hijri
card-demo
card-with-form
carousel-api
carousel-demo
carousel-orientation
carousel-plugin
carousel-size
carousel-spacing
chart-bar-demo
chart-bar-demo-axis
chart-bar-demo-grid
chart-bar-demo-legend
chart-bar-demo-tooltip
chart-tooltip-demo
checkbox-demo
checkbox-disabled
checkbox-with-text
collapsible-demo
combobox-demo
combobox-dropdown-menu
combobox-popover
combobox-responsive
command-demo
command-dialog
context-menu-demo
data-table-demo
date-picker-demo
date-picker-with-presets
date-picker-with-range
dialog-close-button
dialog-demo
drawer-demo
drawer-dialog
dropdown-menu-checkboxes
dropdown-menu-demo
dropdown-menu-dialog
dropdown-menu-radio-group
empty-avatar
empty-avatar-group
empty-background
empty-demo
empty-icon
empty-input-group
empty-outline
field-checkbox
field-choice-card
field-demo
field-fieldset
field-group
field-input
field-radio
field-responsive
field-select
field-slider
field-switch
field-textarea
form-rhf-array
form-rhf-checkbox
form-rhf-complex
form-rhf-demo
form-rhf-input
form-rhf-password
form-rhf-radiogroup
form-rhf-select
form-rhf-switch
form-rhf-textarea
form-tanstack-array
form-tanstack-checkbox
form-tanstack-complex
form-tanstack-demo
form-tanstack-input
form-tanstack-radiogroup
form-tanstack-select
form-tanstack-switch
form-tanstack-textarea
hover-card-demo
input-demo
input-disabled
input-file
input-group-button
input-group-button-group
input-group-custom
input-group-demo
input-group-dropdown
input-group-icon
input-group-label
input-group-spinner
input-group-text
input-group-textarea
input-group-tooltip
input-otp-controlled
input-otp-demo
input-otp-pattern
input-otp-separator
input-with-button
input-with-label
input-with-text
item-avatar
item-demo
item-dropdown
item-group
item-header
item-icon
item-image
item-link
item-size
item-variant
kbd-button
kbd-demo
kbd-group
kbd-input-group
kbd-tooltip
label-demo
menubar-demo
mode-toggle
native-select-demo
native-select-disabled
native-select-groups
native-select-invalid
navigation-menu-demo
pagination-demo
popover-demo
progress-demo
radio-group-demo
resizable-demo
resizable-demo-with-handle
resizable-handle
resizable-vertical
scroll-area-demo
scroll-area-horizontal-demo
select-demo
select-scrollable
separator-demo
sheet-demo
sheet-side
skeleton-card
skeleton-demo
slider-demo
sonner-demo
sonner-types
spinner-badge
spinner-basic
spinner-button
spinner-color
spinner-custom
spinner-demo
spinner-empty
spinner-input-group
spinner-item
spinner-size
switch-demo
table-demo
tabs-demo
textarea-demo
textarea-disabled
textarea-with-button
textarea-with-label
textarea-with-text
toggle-demo
toggle-disabled
toggle-group-demo
toggle-group-disabled
toggle-group-lg
toggle-group-outline
toggle-group-single
toggle-group-sm
toggle-group-spacing
toggle-lg
toggle-outline
toggle-sm
toggle-with-text
tooltip-demo
typography-blockquote
typography-demo
typography-h1
typography-h2
typography-h3
typography-h4
typography-inline-code
typography-large
typography-lead
typography-list
typography-muted
typography-p
typography-small
typography-table
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information