@spectrumui

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.

60 components react shadcn-cli Apache-2.0

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://ui.spectrumhq.in/r/registry.json

pnpm pnpm dlx shadcn@latest add https://ui.spectrumhq.in/r/registry.json

bun bunx shadcn@latest add https://ui.spectrumhq.in/r/registry.json

fetch registry curl -s https://ui.spectrumhq.in/r/registry.json

Components

60 total

Alert demo component

component for the alert-demo

npx shadcn@latest add https://ui.spectrumhq.in/r/alert-1.json

Alert 2 component

component for the alert-2

npx shadcn@latest add https://ui.spectrumhq.in/r/alert-2.json

Alert 3 component

component for the alert-3

npx shadcn@latest add https://ui.spectrumhq.in/r/alert-3.json

Alert 4 component

component for the alert-4

npx shadcn@latest add https://ui.spectrumhq.in/r/alert-4.json

Animated Card component

component for the Animated Card

npx shadcn@latest add https://ui.spectrumhq.in/r/animated-card.json

Animated SVG Chart component

component for the Animated SVG Chart

npx shadcn@latest add https://ui.spectrumhq.in/r/animated-SVG-chart.json

Animated Testimonials component

component for the Animated Testimonials

npx shadcn@latest add https://ui.spectrumhq.in/r/animated-testimonials.json

Autosize Textarea Dependencies component

component for the Autosize Textarea Dependencies

npx shadcn@latest add https://ui.spectrumhq.in/r/autosize-textarea-dependecies.json

Autosize Textarea Demo component

component for the Autosize Textarea

npx shadcn@latest add https://ui.spectrumhq.in/r/autosize-textarea-demo.json

Autosize Textarea Max Height component

component for the Autosize Textarea Max Height

npx shadcn@latest add https://ui.spectrumhq.in/r/autosize-textarea-max-height.json

Autosize Textarea Ref component

component for the Autosize Textarea Ref

npx shadcn@latest add https://ui.spectrumhq.in/r/autosize-textarea-ref.json

Autosize Textarea Form component

component for the Autosize Textarea Form

npx shadcn@latest add https://ui.spectrumhq.in/r/autosize-textarea-form.json

Autosize Textarea Customize component

component for the Autosize Textarea Customize

npx shadcn@latest add https://ui.spectrumhq.in/r/autosize-textarea-customize.json

Datetime Picker Demo component

component for the Datetime Picker Demo

npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-demo.json

Datetime Picker Hour component

component for the Datetime Picker Hour

npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-hour-cycle.json

Datetime Picker and Time Input component

component for the Datetime Picker and Time Input

npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-and-time-input.json

Datetime Year Range component

component for the Datetime Year Range

npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-year-range.json

Datetime Picker Locale component

component for the Datetime Picker Locale

npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-locale.json

Datetime Picker Calendar Settings component

component for the Datetime Picker Calendar Settings

npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-calendar-settings.json

Datetime Picker Display Format component

component for the Datetime Picker Display Format

npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-display-format.json

Datetime Picker Placeholder component

component for the Datetime Picker Placeholder

npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-placeholder.json

Datetime Picker Granularity component

component for the Datetime Picker Granularity

npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-granularity.json

Datetime Picker Disabled component

component for the Datetime Picker Disabled

npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-disabled.json

Datetime Picker Ref component

component for the Datetime Picker Ref

npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-ref.json

Datetime Picker Form component

component for the Datetime Picker Form

npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-form.json

Dual Range Slider Dependencies component

component for the Dual Range Slider Dependencies

npx shadcn@latest add https://ui.spectrumhq.in/r/dual-range-slider-dependecies.json

Dual Range Slider Demo component

component for the Dual Range Slider Demo

npx shadcn@latest add https://ui.spectrumhq.in/r/dual-range-slider-demo.json

Dual Range Slider Custom Label component

component for the Dual Range Slider Custom Label

npx shadcn@latest add https://ui.spectrumhq.in/r/dual-range-slider-custom-label.json

Dual Range Slider Label Position component

component for the Dual Range Slider Label Position

npx shadcn@latest add https://ui.spectrumhq.in/r/dual-range-slider-label-position.json

Dual Range Slider Single component

component for the Dual Range Slider Single

npx shadcn@latest add https://ui.spectrumhq.in/r/dual-range-slider-single.json

Event Badge 3D component

component for the Event Badge 3D

npx shadcn@latest add https://ui.spectrumhq.in/r/event-badge-3d.json

Event Calendar component

component for the Event Calendar

npx shadcn@latest add https://ui.spectrumhq.in/r/event-calendar.json

Feedback Demo component

component for the Feedback Demo

npx shadcn@latest add https://ui.spectrumhq.in/r/feedback-demo.json

Floating Label Input component

component for the Floating Label Input

npx shadcn@latest add https://ui.spectrumhq.in/r/floating-label-input.json

Floating Label Input Demo component

component for the Floating Label Input Demo

npx shadcn@latest add https://ui.spectrumhq.in/r/floating-label-input-demo.json

Floating Label Customize component

component for the Floating Label Customize

npx shadcn@latest add https://ui.spectrumhq.in/r/floating-label-customize.json

Floating Label Form component

component for the Floating Label Form

npx shadcn@latest add https://ui.spectrumhq.in/r/floating-label-form.json

Footers Demo component

component for the Footers Demo

npx shadcn@latest add https://ui.spectrumhq.in/r/footers-demo.json

Animated Wave Footer component

component for the Animated Wave Footer

npx shadcn@latest add https://ui.spectrumhq.in/r/animated-wave-footer.json

Stacked Circular Footer component

component for the Stacked Circular Footer

npx shadcn@latest add https://ui.spectrumhq.in/r/stackedcircular-footer.json

Floating Particle Footer component

component for the Floating Particle Footer

npx shadcn@latest add https://ui.spectrumhq.in/r/floatingparticle-footer.json

Footer component

component for the Footer

npx shadcn@latest add https://ui.spectrumhq.in/r/footer.json

HTTP Status Code component

component for the HTTP Status Code

npx shadcn@latest add https://ui.spectrumhq.in/r/http-status-code.json

Image Preview component

component for the Image Preview Dependencies

npx shadcn@latest add https://ui.spectrumhq.in/r/image-preview.json

Image Preview component

component for the Image Preview

npx shadcn@latest add https://ui.spectrumhq.in/r/image-preview.json

Infinite Scroll Dependencies component

component for the Infinite Scroll Dependencies

npx shadcn@latest add https://ui.spectrumhq.in/r/infinite-scroll-dependecies.json

Infinite Scroll Demo component

component for the Infinite Scroll Demo

npx shadcn@latest add https://ui.spectrumhq.in/r/infinite-scroll-demo.json

Loading Button Dependencies component

component for the Loading Button Dependencies

npx shadcn@latest add https://ui.spectrumhq.in/r/loading-button-dependencies.json

Loading Button Demo component

component for the Loading Button Demo

npx shadcn@latest add https://ui.spectrumhq.in/r/loading-button-demo.json

Loading Button Usage component

component for the Loading Button Usage

npx shadcn@latest add https://ui.spectrumhq.in/r/loading-button-usage.json

Loading Button As Child component

component for the Loading Button As Child

npx shadcn@latest add https://ui.spectrumhq.in/r/loading-button-as-child.json

Multiple Selector Dependencies component

component for the Multiple Selector Dependencies

npx shadcn@latest add https://ui.spectrumhq.in/r/multiple-selector-dependencies.json

Inline Code component

component for the Inline Code

npx shadcn@latest add https://ui.spectrumhq.in/r/inline-code.json

Input Model component

component for the Input Model Demo

npx shadcn@latest add https://ui.spectrumhq.in/r/input-model.json

Multiple Selector Demo component

component for the Multiple Selector Demo

npx shadcn@latest add https://ui.spectrumhq.in/r/multiple-selector-demo.json

Multiple Selector With Disable Options component

component for the Multiple Selector With Disable Options

npx shadcn@latest add https://ui.spectrumhq.in/r/multiple-selector-with-disable-options.json

Multiple Selector Disabled component

component for the Multiple Selector Disabled

npx shadcn@latest add https://ui.spectrumhq.in/r/multiple-selector-disabled.json

Multiple Selector No Default Select component

component for the Multiple Selector No Default Select

npx shadcn@latest add https://ui.spectrumhq.in/r/multiple-selector-no-default-select.json

Multiple Selector Controlled component

component for the Multiple Selector Controlled

npx shadcn@latest add https://ui.spectrumhq.in/r/multiple-selector-controlled.json

Multiple Selector Hide Clear All component

component for the Multiple Selector Hide Clear All

npx shadcn@latest add https://ui.spectrumhq.in/r/multiple-selector-hide-clear-all.json