ActiveAnimated componentspro available0
@siteplane
Animated components · data updated 2026-10-17
Finished React components with every state and micro-interaction built in, plus a skill for your coding agent. Free with full source.
accessibilityaianimationauthbuttonscardschartsdashboardformsiconsloadersmedianavigationoverlayspro-availabletablestheming
Install
npx shadcn@latest add https://ui.siteplane.io/registry/registry.jsonHealth
StatusActive
Last committoday
License—
Open issues0
ArchivedNo
Stars0
Components (551)
baseaction-iconsbuttoncolor-pickercolor-swatch-pickerinputcalendardate-fieldtime-fielddate-pickerdate-range-pickerdate-time-pickerinput-grouplabellist-boxformfieldseticon-morphsframegroupdialogcomboboxlocaleavataravatar-groupbadgecardalertempty-stateskeletonspinnersteppercodekbdseparatorprogressmetertextareacheckboxcheckbox-groupradio-groupswitchtoggletoggle-groupnumber-fieldotp-fieldslideralert-dialogdrawersheetpopovertooltippreview-cardmenucontext-menuaccordioncollapsibletabstoolbartoast
Components: base, action-icons, button, color-picker, color-swatch-picker, input, calendar, date-field, time-field, date-picker, date-range-picker, date-time-picker, input-group, label, list-box, form, fieldset, icon-morphs, frame, group, dialog, combobox, locale, avatar, avatar-group, badge, card, alert, empty-state, skeleton, spinner, stepper, code, kbd, separator, progress, meter, textarea, checkbox, checkbox-group, radio-group, switch, toggle, toggle-group, number-field, otp-field, slider, alert-dialog, drawer, sheet, popover, tooltip, preview-card, menu, context-menu, accordion, collapsible, tabs, toolbar, toast, scroll-area, sidebar, dropdown-menu, select, autocomplete, timeline, table, tag-group, command, pagination, breadcrumb, dashboard-shell, filter-bar, detail-drawer, resource-list, settings-list, data-list, truncate, copy-button, animated-buttons, theme-toggles, pie-chart, file-type-icon, navigation-menu, motion, chart, line-chart, area-chart, bar-chart, sparkline, bar-list, accordion-demo, accordion-multiple-example, accordion-disabled-example, accordion-controlled-example, alert-demo, alert-variants-example, alert-action-example, alert-banner-example, alert-banner-link-example, alert-band-example, alert-dialog-demo, alert-dialog-delete-account-example, alert-dialog-controlled-example, animated-buttons-demo, animated-buttons-variants-example, animated-buttons-expanding-example, animated-buttons-sizes-example, area-chart-demo, area-chart-stacked-example, area-chart-fill-example, area-chart-curves-example, area-chart-negative-example, area-chart-fill-height-example, area-chart-changing-example, autocomplete-demo, autocomplete-controlled-example, autocomplete-groups-example, autocomplete-limit-results-example, autocomplete-appearance-example, autocomplete-sizes-example, autocomplete-form-example, avatar-demo, avatar-fallback-example, avatar-sizes-example, avatar-group-example, avatar-status-example, avatar-group-demo, avatar-group-sizes-example, avatar-group-count-example, avatar-group-card-example, badge-demo, badge-variants-example, badge-secondary-example, badge-emphasis-example, badge-sizes-example, badge-shape-example, badge-composition-example, badge-status-dot-example, badge-status-example, badge-link-example, badge-light-example, bar-chart-demo, bar-chart-multiple-example, bar-chart-stacked-example, bar-chart-horizontal-example, bar-chart-negative-example, bar-chart-categorical-example, bar-chart-value-labels-example, bar-chart-highlight-example, bar-chart-fill-height-example, bar-chart-changing-example, bar-list-demo, bar-list-formatted-example, bar-list-icons-example, bar-list-second-line-example, bar-list-heading-example, bar-list-changing-example, bar-list-rtl-example, breadcrumb-demo, breadcrumb-separator-example, breadcrumb-collapsed-example, button-demo, button-variants-example, button-glass-example, button-sizes-example, button-pill-example, button-icons-example, button-states-example, button-async-action-example, button-layout-example, button-link-example, button-underlined-link-example, calendar-demo, calendar-range-example, calendar-shortcuts-example, calendar-multiple-example, calendar-constraints-example, calendar-controlled-example, calendar-locale-example, card-demo, card-action-example, card-header-media-example, card-divided-example, card-inset-example, card-frame-example, card-variants-example, card-nested-example, card-feedback-example, card-glass-example, card-background-example, checkbox-demo, checkbox-with-description-example, checkbox-states-example, checkbox-card-style-example, checkbox-controlled-example, checkbox-form-example, checkbox-sizes-example, checkbox-group-demo, checkbox-group-controlled-example, checkbox-group-select-all-example, checkbox-group-form-example, checkbox-group-card-style-example, checkbox-group-sizes-example, code-demo, code-block-example, code-mask-example, collapsible-demo, collapsible-controlled-example, collapsible-file-tree-example, color-picker-demo, color-picker-controlled-example, color-picker-sizes-example, color-picker-custom-example, color-picker-form-example, color-swatch-picker-demo, color-swatch-picker-controlled-example, color-swatch-picker-ring-example, color-swatch-picker-images-example, color-swatch-picker-states-example, color-swatch-picker-form-example, combobox-demo, combobox-controlled-example, combobox-multiple-example, combobox-groups-example, combobox-searchable-select-example, combobox-appearance-example, combobox-sizes-example, combobox-form-example, command-demo, command-groups-example, context-menu-demo, context-menu-submenu-example, context-menu-choices-example, context-menu-with-link-example, context-menu-glass-example, copy-button-demo, copy-button-text-example, copy-button-input-group-example, copy-button-states-example, dashboard-shell-inset-example, dashboard-shell-demo, dashboard-shell-sticky-header-example, dashboard-shell-header-workspace-on-top-example, dashboard-shell-header-logo-above-workspace-example, dashboard-shell-header-logo-only-example, dashboard-shell-controlled-example, data-list-demo, data-list-dividers-example, data-list-vertical-example, date-field-demo, date-field-controlled-example, date-field-constraints-example, date-field-states-example, date-field-form-example, date-field-icons-example, date-picker-demo, date-picker-controlled-example, date-picker-constraints-example, date-picker-format-example, date-picker-states-example, date-range-picker-demo, date-range-picker-controlled-example, date-range-picker-constraints-example, date-range-picker-states-example, date-range-picker-form-example, date-time-picker-demo, date-time-picker-controlled-example, date-time-picker-constraints-example, date-time-picker-step-example, date-time-picker-states-example, date-time-picker-form-example, detail-drawer-demo, detail-drawer-form-example, detail-drawer-scrolling-example, dialog-demo, dialog-controlled-example, dialog-nested-example, dialog-scrolling-example, drawer-demo, drawer-mobile-menu-example, drawer-menu-example, drawer-positions-example, drawer-width-example, drawer-variants-example, drawer-scrolling-example, drawer-snap-points-example, dropdown-menu-demo, dropdown-menu-glass-example, empty-state-demo, empty-state-no-results-example, empty-state-with-avatars-example, field-demo, field-validation-example, field-floating-label-example, field-with-select-example, field-item-example, fieldset-demo, fieldset-disabled-example, fieldset-choice-set-example, file-type-icon-demo, file-type-icon-types-example, file-type-icon-sizes-example, file-type-icon-list-example, file-type-icon-extension-example, filter-bar-demo, filter-bar-removable-filters-example, filter-bar-date-range-example, form-demo, form-server-validation-example, form-reset-example, form-floating-labels-example, frame-demo, frame-sections-example, frame-settings-panel-example, group-demo, group-text-example, group-input-button-example, group-vertical-example, icon-morphs-demo, icon-morphs-controlled-example, icon-morphs-sizes-example, input-demo, input-variants-example, input-sizes-example, input-states-example, input-file-example, input-password-example, input-controlled-example, input-floating-label-example, input-group-demo, input-group-with-text-example, input-group-addons-example, input-group-password-toggle-example, input-group-multiline-example, input-group-appearance-example, kbd-demo, kbd-group-example, kbd-input-group-example, kbd-button-example, label-demo, label-help-example, label-checkbox-example, line-chart-demo, line-chart-multiple-example, line-chart-categorical-example, line-chart-curves-example, line-chart-dots-example, line-chart-dates-example, line-chart-fill-height-example, line-chart-changing-example, list-box-demo, list-box-controlled-example, list-box-appearance-example, menu-demo, menu-account-menu-example, menu-choices-example, menu-glass-example, meter-demo, meter-range-example, motion-demo, motion-reorder-example, motion-divided-example, motion-flow-example, motion-reveal-example, motion-field-error-example, motion-swap-example, motion-number-example, motion-values-example, navigation-menu-demo, navigation-menu-groups-example, navigation-menu-controlled-example, number-field-demo, number-field-controlled-example, number-field-format-example, number-field-appearance-example, number-field-sizes-example, number-field-emphasized-example, number-field-form-example, otp-field-demo, otp-field-separator-example, otp-field-joined-example, otp-field-alphanumeric-example, otp-field-controlled-example, otp-field-appearance-example, otp-field-sizes-example, otp-field-form-example, pagination-demo, pagination-ghost-example, pie-chart-demo, pie-chart-pie-example, pie-chart-center-example, pie-chart-without-legend-example, pie-chart-categorical-example, pie-chart-pop-out-example, pie-chart-changing-example, pie-chart-sizes-example, popover-demo, popover-close-button-example, popover-position-examplePreview
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.