@herocn

index style

npx shadcn@latest add https://herocn.dev/r/index.json

style style

npx shadcn@latest add https://herocn.dev/r/style.json

alert ui

npx shadcn@latest add https://herocn.dev/r/alert.json

alert-dialog ui

npx shadcn@latest add https://herocn.dev/r/alert-dialog.json

accordion ui

npx shadcn@latest add https://herocn.dev/r/accordion.json

aspect-ratio ui

npx shadcn@latest add https://herocn.dev/r/aspect-ratio.json

attachment ui

npx shadcn@latest add https://herocn.dev/r/attachment.json

avatar ui

npx shadcn@latest add https://herocn.dev/r/avatar.json

button ui

npx shadcn@latest add https://herocn.dev/r/button.json

button-group ui

npx shadcn@latest add https://herocn.dev/r/button-group.json

breadcrumb ui

npx shadcn@latest add https://herocn.dev/r/breadcrumb.json

badge ui

npx shadcn@latest add https://herocn.dev/r/badge.json

breadcrumb ui

npx shadcn@latest add https://herocn.dev/r/breadcrumb.json

bubble ui

npx shadcn@latest add https://herocn.dev/r/bubble.json

code-block ui

npx shadcn@latest add https://herocn.dev/r/code-block.json

calendar ui

npx shadcn@latest add https://herocn.dev/r/calendar.json

card ui

npx shadcn@latest add https://herocn.dev/r/card.json

chart ui

npx shadcn@latest add https://herocn.dev/r/chart.json

carousel ui

npx shadcn@latest add https://herocn.dev/r/carousel.json

checkbox ui

npx shadcn@latest add https://herocn.dev/r/checkbox.json

collapsible ui

npx shadcn@latest add https://herocn.dev/r/collapsible.json

command ui

npx shadcn@latest add https://herocn.dev/r/command.json

combobox ui

npx shadcn@latest add https://herocn.dev/r/combobox.json

context-menu ui

npx shadcn@latest add https://herocn.dev/r/context-menu.json

popover ui

npx shadcn@latest add https://herocn.dev/r/popover.json

progress ui

npx shadcn@latest add https://herocn.dev/r/progress.json

questionnaire ui

npx shadcn@latest add https://herocn.dev/r/questionnaire.json

tooltip ui

npx shadcn@latest add https://herocn.dev/r/tooltip.json

dropdown-menu ui

npx shadcn@latest add https://herocn.dev/r/dropdown-menu.json

drawer ui

npx shadcn@latest add https://herocn.dev/r/drawer.json

empty ui

npx shadcn@latest add https://herocn.dev/r/empty.json

dialog ui

npx shadcn@latest add https://herocn.dev/r/dialog.json

sheet ui

npx shadcn@latest add https://herocn.dev/r/sheet.json

field ui

npx shadcn@latest add https://herocn.dev/r/field.json

hover-card ui

npx shadcn@latest add https://herocn.dev/r/hover-card.json

surface ui

npx shadcn@latest add https://herocn.dev/r/surface.json

scroll-area ui

npx shadcn@latest add https://herocn.dev/r/scroll-area.json

sheet ui

npx shadcn@latest add https://herocn.dev/r/sheet.json

input ui

npx shadcn@latest add https://herocn.dev/r/input.json

input-group ui

npx shadcn@latest add https://herocn.dev/r/input-group.json

input-otp ui

npx shadcn@latest add https://herocn.dev/r/input-otp.json

item ui

npx shadcn@latest add https://herocn.dev/r/item.json

kbd ui

npx shadcn@latest add https://herocn.dev/r/kbd.json

label ui

npx shadcn@latest add https://herocn.dev/r/label.json

menubar ui

npx shadcn@latest add https://herocn.dev/r/menubar.json

marker ui

npx shadcn@latest add https://herocn.dev/r/marker.json

message ui

npx shadcn@latest add https://herocn.dev/r/message.json

message-scroller ui

npx shadcn@latest add https://herocn.dev/r/message-scroller.json

navigation-menu ui

npx shadcn@latest add https://herocn.dev/r/navigation-menu.json

native-select ui

npx shadcn@latest add https://herocn.dev/r/native-select.json

pagination ui

npx shadcn@latest add https://herocn.dev/r/pagination.json

select ui

npx shadcn@latest add https://herocn.dev/r/select.json

separator ui

npx shadcn@latest add https://herocn.dev/r/separator.json

switch ui

npx shadcn@latest add https://herocn.dev/r/switch.json

checkbox ui

npx shadcn@latest add https://herocn.dev/r/checkbox.json

sidebar ui

npx shadcn@latest add https://herocn.dev/r/sidebar.json

slider ui

npx shadcn@latest add https://herocn.dev/r/slider.json

skeleton ui

npx shadcn@latest add https://herocn.dev/r/skeleton.json

spinner ui

npx shadcn@latest add https://herocn.dev/r/spinner.json

tabs ui

npx shadcn@latest add https://herocn.dev/r/tabs.json

table ui

npx shadcn@latest add https://herocn.dev/r/table.json

toggle ui

npx shadcn@latest add https://herocn.dev/r/toggle.json

toggle-group ui

npx shadcn@latest add https://herocn.dev/r/toggle-group.json

toast ui

npx shadcn@latest add https://herocn.dev/r/toast.json

textarea ui

npx shadcn@latest add https://herocn.dev/r/textarea.json

radio-group ui

npx shadcn@latest add https://herocn.dev/r/radio-group.json

resizable ui

npx shadcn@latest add https://herocn.dev/r/resizable.json

trace ui

npx shadcn@latest add https://herocn.dev/r/trace.json

use-mobile hook

npx shadcn@latest add https://herocn.dev/r/use-mobile.json

use-highlighted-code hook

npx shadcn@latest add https://herocn.dev/r/use-highlighted-code.json

attachment-demo example

npx shadcn@latest add https://herocn.dev/r/attachment-demo.json

attachment-image example

npx shadcn@latest add https://herocn.dev/r/attachment-image.json

attachment-states example

npx shadcn@latest add https://herocn.dev/r/attachment-states.json

attachment-sizes example

npx shadcn@latest add https://herocn.dev/r/attachment-sizes.json

attachment-group example

npx shadcn@latest add https://herocn.dev/r/attachment-group.json

attachment-trigger example

npx shadcn@latest add https://herocn.dev/r/attachment-trigger.json

aspect-ratio-demo example

npx shadcn@latest add https://herocn.dev/r/aspect-ratio-demo.json

aspect-ratio-portrait example

npx shadcn@latest add https://herocn.dev/r/aspect-ratio-portrait.json

aspect-ratio-rtl example

npx shadcn@latest add https://herocn.dev/r/aspect-ratio-rtl.json

aspect-ratio-square example

npx shadcn@latest add https://herocn.dev/r/aspect-ratio-square.json

aspect-ratio-rtl example

npx shadcn@latest add https://herocn.dev/r/aspect-ratio-rtl.json

card-demo example

npx shadcn@latest add https://herocn.dev/r/card-demo.json

card-variants example

npx shadcn@latest add https://herocn.dev/r/card-variants.json

card-small example

npx shadcn@latest add https://herocn.dev/r/card-small.json

card-image example

npx shadcn@latest add https://herocn.dev/r/card-image.json

card-rtl example

npx shadcn@latest add https://herocn.dev/r/card-rtl.json

button-demo example

npx shadcn@latest add https://herocn.dev/r/button-demo.json

button-variants example

npx shadcn@latest add https://herocn.dev/r/button-variants.json

button-sizes example

npx shadcn@latest add https://herocn.dev/r/button-sizes.json

button-icons example

npx shadcn@latest add https://herocn.dev/r/button-icons.json

button-render example

npx shadcn@latest add https://herocn.dev/r/button-render.json

button-rtl example

npx shadcn@latest add https://herocn.dev/r/button-rtl.json

skeleton-demo example

npx shadcn@latest add https://herocn.dev/r/skeleton-demo.json

skeleton-avatar example

npx shadcn@latest add https://herocn.dev/r/skeleton-avatar.json

skeleton-card example

npx shadcn@latest add https://herocn.dev/r/skeleton-card.json

skeleton-text example

npx shadcn@latest add https://herocn.dev/r/skeleton-text.json

skeleton-form example

npx shadcn@latest add https://herocn.dev/r/skeleton-form.json

skeleton-table example

npx shadcn@latest add https://herocn.dev/r/skeleton-table.json

skeleton-animation-types example

npx shadcn@latest add https://herocn.dev/r/skeleton-animation-types.json

skeleton-single-shimmer example

npx shadcn@latest add https://herocn.dev/r/skeleton-single-shimmer.json

skeleton-rtl example

npx shadcn@latest add https://herocn.dev/r/skeleton-rtl.json

badge-rtl example

npx shadcn@latest add https://herocn.dev/r/badge-rtl.json

input-rtl example

npx shadcn@latest add https://herocn.dev/r/input-rtl.json

field-demo example

npx shadcn@latest add https://herocn.dev/r/field-demo.json

field-input example

npx shadcn@latest add https://herocn.dev/r/field-input.json

field-textarea example

npx shadcn@latest add https://herocn.dev/r/field-textarea.json

field-select example

npx shadcn@latest add https://herocn.dev/r/field-select.json

field-slider example

npx shadcn@latest add https://herocn.dev/r/field-slider.json

field-fieldset example

npx shadcn@latest add https://herocn.dev/r/field-fieldset.json

field-checkbox example

npx shadcn@latest add https://herocn.dev/r/field-checkbox.json

checkbox-demo example

npx shadcn@latest add https://herocn.dev/r/checkbox-demo.json

checkbox-basic example

npx shadcn@latest add https://herocn.dev/r/checkbox-basic.json

checkbox-variants example

npx shadcn@latest add https://herocn.dev/r/checkbox-variants.json

checkbox-description example

npx shadcn@latest add https://herocn.dev/r/checkbox-description.json

checkbox-disabled example

npx shadcn@latest add https://herocn.dev/r/checkbox-disabled.json

checkbox-invalid example

npx shadcn@latest add https://herocn.dev/r/checkbox-invalid.json

checkbox-in-surface example

npx shadcn@latest add https://herocn.dev/r/checkbox-in-surface.json

checkbox-rtl example

npx shadcn@latest add https://herocn.dev/r/checkbox-rtl.json

field-radio example

npx shadcn@latest add https://herocn.dev/r/field-radio.json

radio-group-demo example

npx shadcn@latest add https://herocn.dev/r/radio-group-demo.json

radio-group-variants example

npx shadcn@latest add https://herocn.dev/r/radio-group-variants.json

radio-group-description example

npx shadcn@latest add https://herocn.dev/r/radio-group-description.json

radio-group-disabled example

npx shadcn@latest add https://herocn.dev/r/radio-group-disabled.json

radio-group-invalid example

npx shadcn@latest add https://herocn.dev/r/radio-group-invalid.json

radio-group-in-surface example

npx shadcn@latest add https://herocn.dev/r/radio-group-in-surface.json

radio-group-rtl example

npx shadcn@latest add https://herocn.dev/r/radio-group-rtl.json

field-switch example

npx shadcn@latest add https://herocn.dev/r/field-switch.json

field-choice-card example

npx shadcn@latest add https://herocn.dev/r/field-choice-card.json

field-group example

npx shadcn@latest add https://herocn.dev/r/field-group.json

field-rtl example

npx shadcn@latest add https://herocn.dev/r/field-rtl.json

textarea-demo example

npx shadcn@latest add https://herocn.dev/r/textarea-demo.json

textarea-variants example

npx shadcn@latest add https://herocn.dev/r/textarea-variants.json

textarea-states example

npx shadcn@latest add https://herocn.dev/r/textarea-states.json

textarea-field example

npx shadcn@latest add https://herocn.dev/r/textarea-field.json

textarea-button example

npx shadcn@latest add https://herocn.dev/r/textarea-button.json

textarea-rtl example

npx shadcn@latest add https://herocn.dev/r/textarea-rtl.json

textarea-in-surface example

npx shadcn@latest add https://herocn.dev/r/textarea-in-surface.json

avatar-rtl example

npx shadcn@latest add https://herocn.dev/r/avatar-rtl.json

collapsible-rtl example

npx shadcn@latest add https://herocn.dev/r/collapsible-rtl.json

dropdown-menu-rtl example

npx shadcn@latest add https://herocn.dev/r/dropdown-menu-rtl.json

surface-rtl example

npx shadcn@latest add https://herocn.dev/r/surface-rtl.json

collapsible-demo example

npx shadcn@latest add https://herocn.dev/r/collapsible-demo.json

collapsible-basic example

npx shadcn@latest add https://herocn.dev/r/collapsible-basic.json

collapsible-settings example

npx shadcn@latest add https://herocn.dev/r/collapsible-settings.json

collapsible-file-tree example

npx shadcn@latest add https://herocn.dev/r/collapsible-file-tree.json

dropdown-menu-demo example

npx shadcn@latest add https://herocn.dev/r/dropdown-menu-demo.json

dropdown-menu-basic example

npx shadcn@latest add https://herocn.dev/r/dropdown-menu-basic.json

dropdown-menu-submenu example

npx shadcn@latest add https://herocn.dev/r/dropdown-menu-submenu.json

dropdown-menu-shortcuts example

npx shadcn@latest add https://herocn.dev/r/dropdown-menu-shortcuts.json

dropdown-menu-icons example

npx shadcn@latest add https://herocn.dev/r/dropdown-menu-icons.json

dropdown-menu-checkboxes example

npx shadcn@latest add https://herocn.dev/r/dropdown-menu-checkboxes.json

dropdown-menu-checkboxes-icons example

npx shadcn@latest add https://herocn.dev/r/dropdown-menu-checkboxes-icons.json

dropdown-menu-radio-group example

npx shadcn@latest add https://herocn.dev/r/dropdown-menu-radio-group.json

dropdown-menu-radio-icons example

npx shadcn@latest add https://herocn.dev/r/dropdown-menu-radio-icons.json

dropdown-menu-destructive example

npx shadcn@latest add https://herocn.dev/r/dropdown-menu-destructive.json

dropdown-menu-avatar example

npx shadcn@latest add https://herocn.dev/r/dropdown-menu-avatar.json

dropdown-menu-complex example

npx shadcn@latest add https://herocn.dev/r/dropdown-menu-complex.json

dropdown-menu-filterable example

npx shadcn@latest add https://herocn.dev/r/dropdown-menu-filterable.json

drawer-demo example

npx shadcn@latest add https://herocn.dev/r/drawer-demo.json

drawer-direction example

npx shadcn@latest add https://herocn.dev/r/drawer-direction.json

drawer-overlay-variant example

npx shadcn@latest add https://herocn.dev/r/drawer-overlay-variant.json

drawer-scrollable-content example

npx shadcn@latest add https://herocn.dev/r/drawer-scrollable-content.json

drawer-rtl example

npx shadcn@latest add https://herocn.dev/r/drawer-rtl.json

drawer-responsive-dialog example

npx shadcn@latest add https://herocn.dev/r/drawer-responsive-dialog.json

drawer-swipe-handle example

npx shadcn@latest add https://herocn.dev/r/drawer-swipe-handle.json

drawer-nested example

npx shadcn@latest add https://herocn.dev/r/drawer-nested.json

drawer-non-modal example

npx shadcn@latest add https://herocn.dev/r/drawer-non-modal.json

drawer-snap-points example

npx shadcn@latest add https://herocn.dev/r/drawer-snap-points.json

avatar-demo example

npx shadcn@latest add https://herocn.dev/r/avatar-demo.json

avatar-basic example

npx shadcn@latest add https://herocn.dev/r/avatar-basic.json

avatar-badge example

npx shadcn@latest add https://herocn.dev/r/avatar-badge.json

avatar-badge-icon example

npx shadcn@latest add https://herocn.dev/r/avatar-badge-icon.json

avatar-group example

npx shadcn@latest add https://herocn.dev/r/avatar-group.json

avatar-group-count example

npx shadcn@latest add https://herocn.dev/r/avatar-group-count.json

avatar-group-count-icon example

npx shadcn@latest add https://herocn.dev/r/avatar-group-count-icon.json

avatar-size example

npx shadcn@latest add https://herocn.dev/r/avatar-size.json

avatar-dropdown example

npx shadcn@latest add https://herocn.dev/r/avatar-dropdown.json

badge-demo example

npx shadcn@latest add https://herocn.dev/r/badge-demo.json

badge-variants example

npx shadcn@latest add https://herocn.dev/r/badge-variants.json

badge-sizes example

npx shadcn@latest add https://herocn.dev/r/badge-sizes.json

badge-icon example

npx shadcn@latest add https://herocn.dev/r/badge-icon.json

badge-colors example

npx shadcn@latest add https://herocn.dev/r/badge-colors.json

surface-demo example

npx shadcn@latest add https://herocn.dev/r/surface-demo.json

surface-variants example

npx shadcn@latest add https://herocn.dev/r/surface-variants.json

input-demo example

npx shadcn@latest add https://herocn.dev/r/input-demo.json

input-variants example

npx shadcn@latest add https://herocn.dev/r/input-variants.json

input-states example

npx shadcn@latest add https://herocn.dev/r/input-states.json

input-field example

npx shadcn@latest add https://herocn.dev/r/input-field.json

input-fieldgroup example

npx shadcn@latest add https://herocn.dev/r/input-fieldgroup.json

input-badge example

npx shadcn@latest add https://herocn.dev/r/input-badge.json

input-input-group example

npx shadcn@latest add https://herocn.dev/r/input-input-group.json

input-button-group example

npx shadcn@latest add https://herocn.dev/r/input-button-group.json

input-in-surface example

npx shadcn@latest add https://herocn.dev/r/input-in-surface.json

button-group-demo example

npx shadcn@latest add https://herocn.dev/r/button-group-demo.json

button-group-orientation example

npx shadcn@latest add https://herocn.dev/r/button-group-orientation.json

button-group-size example

npx shadcn@latest add https://herocn.dev/r/button-group-size.json

button-group-separator example

npx shadcn@latest add https://herocn.dev/r/button-group-separator.json

button-group-split example

npx shadcn@latest add https://herocn.dev/r/button-group-split.json

button-group-input example

npx shadcn@latest add https://herocn.dev/r/button-group-input.json

button-group-input-group example

npx shadcn@latest add https://herocn.dev/r/button-group-input-group.json

button-group-dropdown example

npx shadcn@latest add https://herocn.dev/r/button-group-dropdown.json

button-group-select example

npx shadcn@latest add https://herocn.dev/r/button-group-select.json

button-group-popover example

npx shadcn@latest add https://herocn.dev/r/button-group-popover.json

button-group-rtl example

npx shadcn@latest add https://herocn.dev/r/button-group-rtl.json

button-group-text example

npx shadcn@latest add https://herocn.dev/r/button-group-text.json

tabs-demo example

npx shadcn@latest add https://herocn.dev/r/tabs-demo.json

tabs-line example

npx shadcn@latest add https://herocn.dev/r/tabs-line.json

tabs-vertical example

npx shadcn@latest add https://herocn.dev/r/tabs-vertical.json

tabs-vertical-line example

npx shadcn@latest add https://herocn.dev/r/tabs-vertical-line.json

tabs-disabled example

npx shadcn@latest add https://herocn.dev/r/tabs-disabled.json

tabs-icons example

npx shadcn@latest add https://herocn.dev/r/tabs-icons.json

tabs-rtl example

npx shadcn@latest add https://herocn.dev/r/tabs-rtl.json

select-demo example

npx shadcn@latest add https://herocn.dev/r/select-demo.json

select-variants example

npx shadcn@latest add https://herocn.dev/r/select-variants.json

select-surface example

npx shadcn@latest add https://herocn.dev/r/select-surface.json

select-groups example

npx shadcn@latest add https://herocn.dev/r/select-groups.json

select-multiple example

npx shadcn@latest add https://herocn.dev/r/select-multiple.json

select-scrollable example

npx shadcn@latest add https://herocn.dev/r/select-scrollable.json

select-disabled example

npx shadcn@latest add https://herocn.dev/r/select-disabled.json

select-invalid example

npx shadcn@latest add https://herocn.dev/r/select-invalid.json

select-rtl example

npx shadcn@latest add https://herocn.dev/r/select-rtl.json

separator-demo example

npx shadcn@latest add https://herocn.dev/r/separator-demo.json

separator-vertical example

npx shadcn@latest add https://herocn.dev/r/separator-vertical.json

separator-menu example

npx shadcn@latest add https://herocn.dev/r/separator-menu.json

separator-list example

npx shadcn@latest add https://herocn.dev/r/separator-list.json

separator-surface example

npx shadcn@latest add https://herocn.dev/r/separator-surface.json

separator-rtl example

npx shadcn@latest add https://herocn.dev/r/separator-rtl.json

sidebar-demo example

npx shadcn@latest add https://herocn.dev/r/sidebar-demo.json

sidebar-rtl example

npx shadcn@latest add https://herocn.dev/r/sidebar-rtl.json

sidebar-floating example

npx shadcn@latest add https://herocn.dev/r/sidebar-floating.json

sidebar-inset example

npx shadcn@latest add https://herocn.dev/r/sidebar-inset.json

sidebar-collapsible example

npx shadcn@latest add https://herocn.dev/r/sidebar-collapsible.json

popover-demo example

npx shadcn@latest add https://herocn.dev/r/popover-demo.json

popover-basic example

npx shadcn@latest add https://herocn.dev/r/popover-basic.json

popover-align example

npx shadcn@latest add https://herocn.dev/r/popover-align.json

popover-form example

npx shadcn@latest add https://herocn.dev/r/popover-form.json

popover-with-arrow example

npx shadcn@latest add https://herocn.dev/r/popover-with-arrow.json

popover-rtl example

npx shadcn@latest add https://herocn.dev/r/popover-rtl.json

progress-demo example

npx shadcn@latest add https://herocn.dev/r/progress-demo.json

progress-label example

npx shadcn@latest add https://herocn.dev/r/progress-label.json

progress-controlled example

npx shadcn@latest add https://herocn.dev/r/progress-controlled.json

progress-sizes example

npx shadcn@latest add https://herocn.dev/r/progress-sizes.json

progress-variants example

npx shadcn@latest add https://herocn.dev/r/progress-variants.json

progress-rtl example

npx shadcn@latest add https://herocn.dev/r/progress-rtl.json

tooltip-demo example

npx shadcn@latest add https://herocn.dev/r/tooltip-demo.json

tooltip-sides example

npx shadcn@latest add https://herocn.dev/r/tooltip-sides.json

tooltip-arrow example

npx shadcn@latest add https://herocn.dev/r/tooltip-arrow.json

tooltip-keyboard example

npx shadcn@latest add https://herocn.dev/r/tooltip-keyboard.json

tooltip-disabled example

npx shadcn@latest add https://herocn.dev/r/tooltip-disabled.json

tooltip-rtl example

npx shadcn@latest add https://herocn.dev/r/tooltip-rtl.json

Install this registry

Components