ActiveAnimated componentspro available0
@ai2
Animated components · MIT · data updated 2026-09-05
Agent-native design system for the shadcn CLI: 51 base components with a full variant, tone and size matrix on an OKLCH token layer, plus 307 styled variations. MIT.
accessibilityaianimationauthbuttonscardsdesign-systemformsglassmorphismhooksloadersmedianavigationoverlayspro-availabletablestheming
Install
npx shadcn@latest add https://ai2.design/r/registry.jsonHealth
StatusActive
Last commit1 month ago
LicenseMIT
Open issues0
ArchivedNo
Stars0
Components (414)
tokensbuttontheme-indigoglassprimitivesprimitives-basecardfile-inputinput-groupinputtextarealabelcheckboxradio-groupswitchbadgeavatarprogressskeletonspinnerseparatorkbdfieldtabsaccordionalerttooltipbreadcrumbdialogsheetpopoverdropdown-menuselectcommandsonnertablealert-dialogtoggletoggle-grouppaginationcomboboxsliderscroll-areahover-cardcollapsiblebutton-groupemptyitemdrawerinput-otpcalendardate-pickercontext-menumenubarresizablecarouselaccordion-demoalert-demoalert-dialog-demoavatar-demo
Components: tokens, button, theme-indigo, glass, primitives, primitives-base, card, file-input, input-group, input, textarea, label, checkbox, radio-group, switch, badge, avatar, progress, skeleton, spinner, separator, kbd, field, tabs, accordion, alert, tooltip, breadcrumb, dialog, sheet, popover, dropdown-menu, select, command, sonner, table, alert-dialog, toggle, toggle-group, pagination, combobox, slider, scroll-area, hover-card, collapsible, button-group, empty, item, drawer, input-otp, calendar, date-picker, context-menu, menubar, resizable, carousel, accordion-demo, alert-demo, alert-dialog-demo, avatar-demo, badge-demo, breadcrumb-demo, button-demo, card-demo, checkbox-demo, combobox-demo, command-demo, dialog-demo, dropdown-menu-demo, field-demo, input-demo, kbd-demo, label-demo, pagination-demo, popover-demo, progress-demo, radio-group-demo, select-demo, separator-demo, sheet-demo, skeleton-demo, sonner-demo, spinner-demo, switch-demo, table-demo, tabs-demo, textarea-demo, toggle-demo, toggle-group-demo, tooltip-demo, file-input-demo, input-group-demo, button-group-demo, collapsible-demo, hover-card-demo, scroll-area-demo, slider-demo, calendar-demo, date-picker-demo, drawer-demo, empty-demo, input-otp-demo, item-demo, carousel-demo, context-menu-demo, menubar-demo, resizable-demo, avatars-badge, avatars-glass, avatars-magnetic, avatars-stack, avatars-styled, avatars-threed, badges-animated, badges-glass, badges-particle, badges-shine, badges-status, badges-styled, buttons-3d, buttons-animated, buttons-glass, buttons-glow, buttons-gradient, buttons-magnetic, buttons-particle, buttons-pill, buttons-ripple, buttons-shiny, buttons-stroke, buttons-text-animated, inputs-glass, inputs-magnetic, inputs-otp, inputs-styled, inputs-typewriter, inputs-validation, loaders-dna, loaders-morph, loaders-orbital, loaders-particle, loaders-skeleton, loaders-styled, loaders-text, progress-circular, progress-indeterminate, progress-liquid, progress-stepped, progress-styled, progress-threed, toggles-3d, toggles-liquid, toggles-neon, toggles-particle, toggles-styled, toggles-themed, tooltips-animated, tooltips-interactive, tooltips-magnetic, tooltips-rich, tooltips-shape, tooltips-styled, alert-styled, card-styled, checkbox-styled, separator-styled, skeleton-styled, textarea-styled, accordion-styled, kbd-styled, label-styled, radio-group-styled, slider-styled, tabs-styled, alert-dialog-styled, dialog-styled, drawer-styled, hover-card-styled, popover-styled, sheet-styled, breadcrumb-styled, command-styled, context-menu-styled, dropdown-menu-styled, menubar-styled, pagination-styled, combobox-styled, field-styled, file-input-styled, input-group-styled, input-otp-styled, select-styled, button-group-styled, calendar-styled, date-picker-styled, item-styled, table-styled, toggle-group-styled, carousel-styled, collapsible-styled, empty-styled, resizable-styled, scroll-area-styled, sonner-styled, dialog-blur, dialog-bordered, dialog-corner, dialog-header, dialog-motion, alert-dialog-accent, alert-dialog-glass, alert-dialog-illustration, alert-dialog-layout, alert-dialog-motion, sheet-blur, sheet-content, sheet-header, sheet-inset, sheet-motion, hover-card-accent, hover-card-layout, hover-card-motion, hover-card-placement, hover-card-tone, popover-accent, popover-compact, popover-motion, popover-placement, popover-tone, drawer-blur, drawer-content, drawer-header, drawer-motion, drawer-side, accordion-accent, accordion-glass, accordion-numbered, accordion-timeline, accordion-underline, carousel-coverflow, carousel-fraction, carousel-parallax, carousel-thumbnails, carousel-vertical, collapsible-accent, collapsible-glass, collapsible-notice, collapsible-split, collapsible-underline, resizable-accent, resizable-inset, resizable-minimal, resizable-panel, resizable-ratio, scroll-area-fade, scroll-area-gutter, scroll-area-inset, scroll-area-primary, scroll-area-shadow, alert-action, alert-banner, alert-motion, alert-outline, alert-solid, breadcrumb-collapse, empty-error, empty-glass, empty-motion, empty-onboarding, empty-search, pagination-glass, skeleton-avatar, skeleton-card, skeleton-shapes, skeleton-table, skeleton-text, sonner-compact, sonner-motion, sonner-position, sonner-progress, sonner-rich, breadcrumb-bar, breadcrumb-glass, breadcrumb-icon, breadcrumb-motion, command-accent, command-compact, command-dialog, command-empty, command-motion, context-menu-check, context-menu-compact, context-menu-glass, context-menu-motion, context-menu-submenu, dropdown-menu-glass, dropdown-menu-motion, dropdown-menu-placement, dropdown-menu-shortcut, dropdown-menu-tone, menubar-accent, menubar-dense, menubar-motion, menubar-shortcut, menubar-tone, pagination-compact, pagination-motion, pagination-outline, pagination-rich, tabs-accent, tabs-badge, tabs-glass, tabs-motion, tabs-vertical, button-group-glass, button-group-icon, button-group-motion, button-group-tone, button-group-vertical, calendar-event, calendar-minimal, calendar-motion, calendar-tone, calendar-week, card-media, card-motion, card-outline, card-pricing, card-stat, checkbox-card, checkbox-indeterminate, checkbox-list, checkbox-switch, checkbox-tone, combobox-async, combobox-motion, combobox-multi, combobox-rich, combobox-tone, date-picker-compact, date-picker-motion, date-picker-preset, date-picker-time, date-picker-tone, field-glass, field-group, field-help, field-motion, field-validation, file-input-compact, file-input-motion, file-input-preview, file-input-progress, file-input-tone, input-group-action, input-group-glass, input-group-search, input-group-tone, input-group-unit, input-otp-glass, input-otp-length, input-otp-motion, input-otp-state, input-otp-tone, item-drag, item-media, item-motion, item-select, item-status, kbd-combo, kbd-glass, kbd-mac, kbd-motion, kbd-tone, label-badge, label-float, label-help, label-size, label-tone, radio-group-glass, radio-group-image, radio-group-list, radio-group-motion, radio-group-tone, select-motion, select-multi, select-rich, select-search, select-tone, separator-decorative, separator-dotted, separator-thick, separator-tone, separator-vertical, slider-marks, slider-minimal, slider-range, slider-tone, slider-vertical, table-glassPreview
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.