Examples - shadcn/ui | registry.directory

S

Visit Registry Visit Repository

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

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