ActiveAnimated components10
@herocn
Animated components · MIT · data updated 2026-10-10
HeroUI's design system, shadcn's abstraction.
accessibilityanimationauthblocksbuttonscardschartsdashboarddesign-systemformshooksiconsloadersmediamobilenavigationoverlaystables
Install
npx shadcn@latest add https://herocn.dev/r/registry.jsonHealth
StatusActive
Last committoday
LicenseMIT
Open issues0
ArchivedNo
Stars10
Components (630)
indexstylealertalert-dialogaccordionaspect-ratioattachmentavatarbuttonbutton-groupbreadcrumbbadgebreadcrumbbubblecalendarcardchartcarouselcheckboxcollapsiblecommandcomboboxcontext-menupopoverprogressquestionnairetooltipdropdown-menudraweremptydialogsheetfieldhover-cardsurfacescroll-areasheetinputinput-groupinput-otpitemkbdlabelmenubarmarkermessagemessage-scrollernavigation-menunative-selectpaginationselectseparatorswitchcheckboxsidebarsliderskeletonspinnertabstable
Components: index, style, alert, alert-dialog, accordion, aspect-ratio, attachment, avatar, button, button-group, breadcrumb, badge, breadcrumb, bubble, calendar, card, chart, carousel, checkbox, collapsible, command, combobox, context-menu, popover, progress, questionnaire, tooltip, dropdown-menu, drawer, empty, dialog, sheet, field, hover-card, surface, scroll-area, sheet, input, input-group, input-otp, item, kbd, label, menubar, marker, message, message-scroller, navigation-menu, native-select, pagination, select, separator, switch, checkbox, sidebar, slider, skeleton, spinner, tabs, table, toggle, toggle-group, toast, textarea, radio-group, resizable, use-mobile, attachment-demo, attachment-image, attachment-states, attachment-sizes, attachment-group, attachment-trigger, aspect-ratio-demo, aspect-ratio-portrait, aspect-ratio-rtl, aspect-ratio-square, aspect-ratio-rtl, card-demo, card-variants, card-small, card-image, card-rtl, button-demo, button-variants, button-sizes, button-icons, button-render, button-rtl, skeleton-demo, skeleton-avatar, skeleton-card, skeleton-text, skeleton-form, skeleton-table, skeleton-animation-types, skeleton-single-shimmer, skeleton-rtl, badge-rtl, input-rtl, field-demo, field-input, field-textarea, field-select, field-slider, field-fieldset, field-checkbox, checkbox-demo, checkbox-basic, checkbox-variants, checkbox-description, checkbox-disabled, checkbox-invalid, checkbox-in-surface, checkbox-rtl, field-radio, radio-group-demo, radio-group-variants, radio-group-description, radio-group-disabled, radio-group-invalid, radio-group-in-surface, radio-group-rtl, field-switch, field-choice-card, field-group, field-rtl, textarea-demo, textarea-variants, textarea-states, textarea-field, textarea-button, textarea-rtl, textarea-in-surface, avatar-rtl, collapsible-rtl, dropdown-menu-rtl, surface-rtl, collapsible-demo, collapsible-basic, collapsible-settings, collapsible-file-tree, dropdown-menu-demo, dropdown-menu-basic, dropdown-menu-submenu, dropdown-menu-shortcuts, dropdown-menu-icons, dropdown-menu-checkboxes, dropdown-menu-checkboxes-icons, dropdown-menu-radio-group, dropdown-menu-radio-icons, dropdown-menu-destructive, dropdown-menu-avatar, dropdown-menu-complex, dropdown-menu-filterable, drawer-demo, drawer-direction, drawer-overlay-variant, drawer-scrollable-content, drawer-rtl, drawer-responsive-dialog, drawer-swipe-handle, drawer-nested, drawer-non-modal, drawer-snap-points, avatar-demo, avatar-basic, avatar-badge, avatar-badge-icon, avatar-group, avatar-group-count, avatar-group-count-icon, avatar-size, avatar-dropdown, badge-demo, badge-variants, badge-sizes, badge-icon, badge-colors, surface-demo, surface-variants, input-demo, input-variants, input-states, input-field, input-fieldgroup, input-badge, input-input-group, input-button-group, input-in-surface, button-group-demo, button-group-orientation, button-group-size, button-group-separator, button-group-split, button-group-input, button-group-input-group, button-group-dropdown, button-group-select, button-group-popover, button-group-rtl, button-group-text, tabs-demo, tabs-line, tabs-vertical, tabs-vertical-line, tabs-disabled, tabs-icons, tabs-rtl, select-demo, select-variants, select-surface, select-groups, select-multiple, select-scrollable, select-disabled, select-invalid, select-rtl, separator-demo, separator-vertical, separator-menu, separator-list, separator-surface, separator-rtl, sidebar-demo, sidebar-rtl, sidebar-floating, sidebar-inset, sidebar-collapsible, popover-demo, popover-basic, popover-align, popover-form, popover-with-arrow, popover-rtl, progress-demo, progress-label, progress-controlled, progress-sizes, progress-variants, progress-rtl, tooltip-demo, tooltip-sides, tooltip-arrow, tooltip-keyboard, tooltip-disabled, tooltip-rtl, input-group-demo, input-group-variants, input-group-invalid, input-group-disabled, input-group-inline-start, input-group-inline-end, input-group-block-start, input-group-block-end, input-group-icon, input-group-text, input-group-button, input-group-spinner, input-group-textarea, input-group-dropdown, input-group-rtl, input-group-in-surface, item-demo, item-variants, item-sizes, item-icon, item-avatar, item-image, item-group, item-header, item-link, item-dropdown, item-rtl, kbd-demo, kbd-variants, kbd-group, kbd-button, kbd-tooltip, kbd-input-group, kbd-rtl, toggle-demo, toggle-ghost, toggle-sizes, toggle-disabled, toggle-rtl, toggle-group-demo, toggle-group-ghost, toggle-group-sizes, toggle-group-spacing, toggle-group-vertical, toggle-group-disabled, toggle-group-custom, toggle-group-rtl, label-demo, label-in-field, label-rtl, switch-demo, switch-description, switch-choice-card, switch-disabled, switch-invalid, switch-sizes, switch-rtl, spinner-demo, spinner-variants, spinner-sizes, spinner-button, spinner-badge, spinner-input-group, spinner-empty, empty-demo, empty-outline, empty-background, empty-avatar, empty-avatar-group, empty-input-group, empty-rtl, spinner-rtl, slider-demo, slider-range, slider-multiple, slider-vertical, slider-controlled, slider-disabled, slider-rtl, alert-demo, alert-variants, alert-action, alert-colors, alert-rtl, alert-dialog-demo, alert-dialog-basic, alert-dialog-variants, alert-dialog-small, alert-dialog-with-media, alert-dialog-small-with-media, alert-dialog-destructive, alert-dialog-rtl, dialog-demo, dialog-close-button, dialog-no-close-button, dialog-sticky-footer, dialog-scrollable-content, dialog-nested, dialog-overlay-variant, dialog-rtl, sheet-demo, sheet-side, sheet-overlay-variant, sheet-no-close-button, sheet-rtl, scroll-area-demo, scroll-area-horizontal, scroll-area-rtl, combobox-demo, combobox-variants, combobox-surface, combobox-multiple, combobox-groups, combobox-clear, combobox-invalid, combobox-disabled, combobox-auto-highlight, combobox-popup, combobox-rtl, hover-card-demo, hover-card-with-arrow, hover-card-sides, hover-card-rtl, context-menu-demo, context-menu-basic, context-menu-submenu, context-menu-shortcuts, context-menu-groups, context-menu-icons, context-menu-checkboxes, context-menu-radio, context-menu-destructive, context-menu-sides, context-menu-rtl, native-select-demo, native-select-variants, native-select-in-surface, native-select-disabled, native-select-invalid, native-select-groups, native-select-rtl, command-demo, command-basic, command-shortcuts, command-groups, command-scrollable, command-rtl, command-overlay-variant, calendar-demo, calendar-basic, calendar-range, calendar-caption, calendar-with-presetsPreview
Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.