ActiveFeaturedComponent library (general)1,029
@spectrumui
Component library (general) · Apache-2.0 · data updated 2026-09-05
An open-source React/Next.js component library with 250+ free components built on shadcn/ui and Tailwind CSS, featuring smooth animations and responsive design. Components span common UI patterns: Login forms, Payment forms, Settings panels, Data visualization (bar, line, radar charts), AI assistant chat UI, and standard shadcn component variants. A Spectrum Pro tier ($49-$79 launch price) adds premium blocks. Vercel OSS-backed. TypeScript throughout. Use for: projects that need a large free set of pre-built, animated Next.js components that extend shadcn/ui with richer variants and more categories than the default library.
3daccessibilityaestheticaianimationauthblocksbuttonscardschartscomponentsdashboarddesign-systemformshooksiconsloadersmarketingmedianavigationoverlayspaymentstables
Install
npx shadcn@latest add https://ui.spectrumhq.in/r/registry.jsonHealth
StatusActive
Last committoday
LicenseApache-2.0
Open issues7
ArchivedNo
Stars1,029
Components (217)
agent-planagent-stepsapproval-cardchat-empty-statecitation-sourcescode-blockconversation-listdiff-viewdisclose-imageerror-stategithub-profile-cardalert-1alert-2alert-3alert-4animated-cardanimated-SVG-chartanimated-testimonialsautosize-textarea-dependeciesautosize-textarea-demoautosize-textarea-max-heightautosize-textarea-refautosize-textarea-formautosize-textarea-customizedatetime-picker-demodatetime-picker-hour-cycledatetime-picker-and-time-inputdatetime-picker-year-rangedatetime-picker-localedatetime-picker-calendar-settingsdatetime-picker-display-formatdatetime-picker-placeholderdatetime-picker-granularitydatetime-picker-disableddatetime-picker-refdatetime-picker-formdual-range-slider-dependeciesdual-range-slider-demodual-range-slider-custom-labeldual-range-slider-label-positiondual-range-slider-singleevent-badge-3devent-calendarfeedback-demofloating-label-inputfloating-label-input-demofloating-label-customizefloating-label-formfooters-demoanimated-wave-footerinline-editinsight-cardsloading-statememory-chipsmessage-actionsmodel-selectorprompt-composerquota-bannerreasoning-tracestackedcircular-footer
Components: agent-plan, agent-steps, approval-card, chat-empty-state, citation-sources, code-block, conversation-list, diff-view, disclose-image, error-state, github-profile-card, alert-1, alert-2, alert-3, alert-4, animated-card, animated-SVG-chart, animated-testimonials, autosize-textarea-dependecies, autosize-textarea-demo, autosize-textarea-max-height, autosize-textarea-ref, autosize-textarea-form, autosize-textarea-customize, datetime-picker-demo, datetime-picker-hour-cycle, datetime-picker-and-time-input, datetime-picker-year-range, datetime-picker-locale, datetime-picker-calendar-settings, datetime-picker-display-format, datetime-picker-placeholder, datetime-picker-granularity, datetime-picker-disabled, datetime-picker-ref, datetime-picker-form, dual-range-slider-dependecies, dual-range-slider-demo, dual-range-slider-custom-label, dual-range-slider-label-position, dual-range-slider-single, event-badge-3d, event-calendar, feedback-demo, floating-label-input, floating-label-input-demo, floating-label-customize, floating-label-form, footers-demo, animated-wave-footer, inline-edit, insight-cards, loading-state, memory-chips, message-actions, model-selector, prompt-composer, quota-banner, reasoning-trace, stackedcircular-footer, floatingparticle-footer, footer, icon-dependencies, http-status-code, image-preview-dependencies, image-preview, infinite-scroll-dependecies, infinite-scroll-demo, loading-button-dependencies, loading-button-demo, loading-button-usage, loading-button-as-child, multiple-selector-dependencies, inline-code, input-model, multiple-selector-demo, multiple-selector-with-disable-options, multiple-selector-disabled, multiple-selector-no-default-select, multiple-selector-controlled, multiple-selector-hide-clear-all, multiple-selector-creatable, multiple-selector-with-async-search, multiple-selector-with-async-search-and-onfocus, multiple-selector-with-async-search-and-creatable, multiple-selector-with-async-search-and-creatable-and-group, heading-with-anchor, multiple-selector-with-sync-search, multiple-selector-manually-controlled, multiple-selector-with-group, status-tracker, streaming-text, suggestion-banner, task-rows, thinking-dots, tool-chips, usage-meter, use-toast, multiple-selector-max-selected, multiple-selector-max-text-length, multiple-selector-no-placeholder-when-selected, multiple-selector-fixed-option, multiple-selector-ref, multiple-selector-commandprops, multiple-selector-with-form, multiple-step-form-demo, navbar-demo, circular-navbar, tab-navbar, floating-navbar, sidebar-navbar, login-card, kanbanboard, profile-dropdown, product-card, progress-with-value-dependencies, progress-with-value, value-position, custom-label, responsive-modal-dependencies, responsive-modal, responsive-modal-side, accordion, accordion-dependencies, accordion-card, accordion-filled, accordion-ghost, accordion-generative, skeleton, skeleton-card, spinner-dependencies, spinner-demo, spinner-size, spinner-with-text, spinner-toggle, status-badge, testimonials, holographic, orbital-letters, ink, animated-drawer, command-palette, command-palette-demo, scratch-card, scratch-card-demo, dock, dock-demo, dock-glass, bento-grid, like-button, like-button-demo, tilt-card, tilt-card-demo, hold-to-confirm, hold-to-confirm-demo, reaction-bar, reaction-bar-demo, star-rating, star-rating-demo, quantity-stepper, quantity-stepper-demo, follow-button, follow-button-demo, notification-bell, notification-bell-demo, face-rating, face-rating-demo, undo-pill, undo-pill-demo, password-strength, password-strength-demo, swipe-to-delete, swipe-to-delete-demo, task-checkbox, task-checkbox-demo, morph-button, morph-button-demo, animated-switch, animated-switch-demo, avatar-stack, avatar-stack-demo, kbd-key, kbd-key-demo, share-button, share-button-demo, voice-input, web-search, chart-kit, bar-chart, line-chart, area-chart, pie-chart, radar-chart, radial-chart, composed-chart, chart-data, chart-states, market-chart, indicator-chart, depth-chart, order-book, portfolio-chart, market-heatmap, calendar-heatmap, cohort-chart, stat-cards, histogram-chart, candlestick-chart, price-chart, sparkline-chart, offset-tiers, gradient-tiers, dark-matrix, blueprint-tiers, serif-tiers, banner-tiers, receipt-tiersPreview
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.