ActiveFeaturedComponent library (general)1,003
@spectrumui
Component library (general) · Apache-2.0 · data updated 2026-07-08
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.
Install
npx shadcn@latest add https://ui.spectrumhq.in/r/registry.jsonHealth
StatusActive
Last commit1 day ago
LicenseApache-2.0
Open issues3
ArchivedNo
Stars1,003
Components (116)
alert-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-footerstackedcircular-footerfloatingparticle-footerfooterhttp-status-codeimage-previewimage-previewinfinite-scroll-dependeciesinfinite-scroll-demoloading-button-dependenciesloading-button-demoloading-button-usageloading-button-as-childmultiple-selector-dependenciesinline-codeinput-modelmultiple-selector-demomultiple-selector-with-disable-optionsmultiple-selector-disabledmultiple-selector-no-default-selectmultiple-selector-controlledmultiple-selector-hide-clear-all
Components: 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, stackedcircular-footer, floatingparticle-footer, footer, http-status-code, image-preview, 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, 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, skeleton, skeleton-card, spinner-dependencies, spinner-demo, spinner-sizePreview
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.