@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.

116 components react shadcn-cli Apache-2.0

website ↗ github ↗ registry ↗ agent brief (.md) ↗ clone source (116 .json) ↗ clone brief (PROMPT.md) ↗

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

116 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

Multiple Selector Creatable component

component for the Multiple Selector Creatable

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

Multiple Selector With Async Search component

component for the Multiple Selector With Async Search

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

Multiple Selector With Async Search And OnFocus component

component for the Multiple Selector With Async Search And OnFocus

npx shadcn@latest add https://ui.spectrumhq.in/r/multiple-selector-with-async-search-and-onfocus.json

Multiple Selector With Async Search And Creatable component

component for the Multiple Selector With Async Search And Creatable

npx shadcn@latest add https://ui.spectrumhq.in/r/multiple-selector-with-async-search-and-creatable.json

Multiple Selector With Async Search And Creatable And Group component

component for the Multiple Selector With Async Search And Creatable And Group

npx shadcn@latest add https://ui.spectrumhq.in/r/multiple-selector-with-async-search-and-creatable-and-group.json

Heading With Anchor component

component for the Heading With Anchor

npx shadcn@latest add https://ui.spectrumhq.in/r/heading-with-anchor.json

Multiple Selector With Sync Search And Creatable And Group component

component for the Multiple Selector With Sync Search And Creatable And Group

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

Multiple Selector Manually Controlled component

component for the Multiple Selector Manually Controlled

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

Multiple Selector With Group component

component for the Multiple Selector With Group

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

Use Toast component

component for the Use Toast

npx shadcn@latest add https://ui.spectrumhq.in/r/use-toast.json

Multiple Selector Max Selected component

component for the Multiple Selector Max Selected

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

Multiple Selector Max Text Length component

component for the Multiple Selector Max Text Length

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

Multiple Selector No Placeholder When Selected component

component for the Multiple Selector No Placeholder When Selected

npx shadcn@latest add https://ui.spectrumhq.in/r/multiple-selector-no-placeholder-when-selected.json

Multiple Selector Fixed Option component

component for the Multiple Selector Fixed Option

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

Multiple Selector Ref component

component for the Multiple Selector Ref

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

Multiple Selector Command Props component

component for the Multiple Selector Command Props

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

Multiple Selector With Form component

component for the Multiple Selector With Form

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

Multiple Step Form Demo component

component for the Multiple Step Form Demo

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

Navbar Demo component

component for the Navbar Demo

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

Circular Navbar component

component for the Circular Navbar

npx shadcn@latest add https://ui.spectrumhq.in/r/circular-navbar.json

Tab Navbar component

component for the Tab Navbar

npx shadcn@latest add https://ui.spectrumhq.in/r/tab-navbar.json

Floating Navbar component

component for the Floating Navbar

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

Sidebar Navbar component

component for the Sidebar Navbar

npx shadcn@latest add https://ui.spectrumhq.in/r/sidebar-navbar.json

component for the Login Card

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

Kanban Board component

component for the Kanban Board

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

Profile Dropdown component

component for the Profile Dropdown

npx shadcn@latest add https://ui.spectrumhq.in/r/profile-dropdown.json

Product Card component

component for the Product Card

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

Progress With Value Dependencies component

component for the Progress With Value Dependencies

npx shadcn@latest add https://ui.spectrumhq.in/r/progress-with-value-dependencies.json

Progress With Value component

component for the Progress With Value

npx shadcn@latest add https://ui.spectrumhq.in/r/progress-with-value.json

Progress With Value Position component

component for the Progress With Value Position

npx shadcn@latest add https://ui.spectrumhq.in/r/value-position.json

Progress With Value Custom Label component

component for the Progress With Value Custom Label

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

Responsive Modal Dependencies component

component for the Responsive Modal Dependencies

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

Responsive Modal component

component for the Responsive Modal

npx shadcn@latest add https://ui.spectrumhq.in/r/responsive-modal.json

Responsive Modal Side component

component for the Responsive Modal Side

npx shadcn@latest add https://ui.spectrumhq.in/r/responsive-modal-side.json

Accordion component

component for the Accordion

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

Skeleton component

component for the Skeleton

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

Skeleton Card component

component for the Skeleton Card

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

Skeleton Card component

component for the Skeleton Card

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

Spinner Demo component

component for the Spinner Demo

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

Spinner Size component

component for the Spinner Size

npx shadcn@latest add https://ui.spectrumhq.in/r/spinner-size.json

Spinner With Text component

component for the Spinner With Text

npx shadcn@latest add https://ui.spectrumhq.in/r/spinner-with-text.json

Spinner Toggle component

component for the Spinner Toggle

npx shadcn@latest add https://ui.spectrumhq.in/r/spinner-toggle.json

Status Badge component

component for the Status Badge

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

Testimonials component

component for the Testimonials

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

Holographic Scan Reveal component

component for the Holographic Scan Reveal

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

Orbital Letters component

component for the Orbital Letters

npx shadcn@latest add https://ui.spectrumhq.in/r/orbital-letters.json

Fluid Ink Morph component

component for the Fluid Ink Morph

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

Animated Drawer component

component for the Animated Drawer

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

Command Palette component

A fully customizable, smooth-animated Command Palette (Cmd+K) component

npx shadcn@latest add https://ui.spectrumhq.in/r/command-palette.json

Command Palette Demo component

Demo usage for the Command Palette component

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

Scratch Card component

A scratch-to-reveal coupon card with an HTML5 canvas foil, dust particles on scratch, and a reveal callback at a configurable threshold

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

Scratch Card Demo component

Demo usage for the Scratch Card component

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

Dock component

A premium macOS-Style Animated Dock Menu component

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

Dock Demo component

Demo usage for the macOS-Style Animated Dock Menu component

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

Dock Glass component

Glassmorphism variant demo for the macOS-Style Animated Dock Menu component

npx shadcn@latest add https://ui.spectrumhq.in/r/dock-glass.json

Bento Grid component

A premium interactive Bento Grid component

npx shadcn@latest add https://ui.spectrumhq.in/r/bento-grid.json