---
name: "@spectrumui"
slug: "spectrumui"
description: "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."
category: "Component library (general)"
tags: ["3d", "accessibility", "aesthetic", "ai", "animation", "auth", "blocks", "buttons", "cards", "charts", "components", "dashboard", "design-system", "forms", "glassmorphism", "hooks", "loaders", "marketing", "media", "navigation", "overlays", "payments", "tables"]
framework: "react"
license: "Apache-2.0"
author: "arihantcodes"
website: "https://ui.spectrumhq.in"
github: "https://github.com/arihantcodes/spectrum-ui"
registry: "https://ui.spectrumhq.in/r/registry.json"
pro: false
pro_url: null
github_stars: 1003
component_count: 116
generated_at: "2026-07-28T08:00:50.948Z"
---

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

## Links

- Website: https://ui.spectrumhq.in
- GitHub: https://github.com/arihantcodes/spectrum-ui
- Registry JSON: https://ui.spectrumhq.in/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/spectrumui
- This file: https://sh4dcn.vercel.app/md/spectrumui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.spectrumhq.in/r/registry.json
pnpm dlx shadcn@latest add https://ui.spectrumhq.in/r/registry.json
bunx shadcn@latest add https://ui.spectrumhq.in/r/registry.json
# clone the source repo
git clone https://github.com/arihantcodes/spectrum-ui.git
# fetch the raw registry index
curl -s https://ui.spectrumhq.in/r/registry.json
```

## Components (116)

| name | type | description | install |
| --- | --- | --- | --- |
| alert-1 | registry:component | component for the alert-demo | `npx shadcn@latest add https://ui.spectrumhq.in/r/alert-1.json` |
| alert-2 | registry:component | component for the alert-2 | `npx shadcn@latest add https://ui.spectrumhq.in/r/alert-2.json` |
| alert-3 | registry:component | component for the alert-3 | `npx shadcn@latest add https://ui.spectrumhq.in/r/alert-3.json` |
| alert-4 | registry:component | component for the alert-4 | `npx shadcn@latest add https://ui.spectrumhq.in/r/alert-4.json` |
| animated-card | registry:component | component for the Animated Card | `npx shadcn@latest add https://ui.spectrumhq.in/r/animated-card.json` |
| animated-SVG-chart | registry:component | component for the Animated SVG Chart | `npx shadcn@latest add https://ui.spectrumhq.in/r/animated-SVG-chart.json` |
| animated-testimonials | registry:component | component for the Animated Testimonials | `npx shadcn@latest add https://ui.spectrumhq.in/r/animated-testimonials.json` |
| autosize-textarea-dependecies | registry:component | component for the Autosize Textarea Dependencies | `npx shadcn@latest add https://ui.spectrumhq.in/r/autosize-textarea-dependecies.json` |
| autosize-textarea-demo | registry:component | component for the Autosize Textarea | `npx shadcn@latest add https://ui.spectrumhq.in/r/autosize-textarea-demo.json` |
| autosize-textarea-max-height | registry: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 | registry:component | component for the Autosize Textarea Ref | `npx shadcn@latest add https://ui.spectrumhq.in/r/autosize-textarea-ref.json` |
| autosize-textarea-form | registry:component | component for the Autosize Textarea Form | `npx shadcn@latest add https://ui.spectrumhq.in/r/autosize-textarea-form.json` |
| autosize-textarea-customize | registry:component | component for the Autosize Textarea Customize | `npx shadcn@latest add https://ui.spectrumhq.in/r/autosize-textarea-customize.json` |
| datetime-picker-demo | registry:component | component for the Datetime Picker Demo | `npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-demo.json` |
| datetime-picker-hour-cycle | registry: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 | registry: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-picker-year-range | registry:component | component for the Datetime Year Range | `npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-year-range.json` |
| datetime-picker-locale | registry:component | component for the Datetime Picker Locale | `npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-locale.json` |
| datetime-picker-calendar-settings | registry: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 | registry: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 | registry:component | component for the Datetime Picker Placeholder | `npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-placeholder.json` |
| datetime-picker-granularity | registry:component | component for the Datetime Picker Granularity | `npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-granularity.json` |
| datetime-picker-disabled | registry:component | component for the Datetime Picker Disabled | `npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-disabled.json` |
| datetime-picker-ref | registry:component | component for the Datetime Picker Ref | `npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-ref.json` |
| datetime-picker-form | registry:component | component for the Datetime Picker Form | `npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-form.json` |
| dual-range-slider-dependecies | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry:component | component for the Event Badge 3D | `npx shadcn@latest add https://ui.spectrumhq.in/r/event-badge-3d.json` |
| event-calendar | registry:component | component for the Event Calendar | `npx shadcn@latest add https://ui.spectrumhq.in/r/event-calendar.json` |
| feedback-demo | registry:component | component for the Feedback Demo | `npx shadcn@latest add https://ui.spectrumhq.in/r/feedback-demo.json` |
| floating-label-input | registry:component | component for the Floating Label Input | `npx shadcn@latest add https://ui.spectrumhq.in/r/floating-label-input.json` |
| floating-label-input-demo | registry: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 | registry:component | component for the Floating Label Customize | `npx shadcn@latest add https://ui.spectrumhq.in/r/floating-label-customize.json` |
| floating-label-form | registry:component | component for the Floating Label Form | `npx shadcn@latest add https://ui.spectrumhq.in/r/floating-label-form.json` |
| footers-demo | registry:component | component for the Footers Demo | `npx shadcn@latest add https://ui.spectrumhq.in/r/footers-demo.json` |
| animated-wave-footer | registry:component | component for the Animated Wave Footer | `npx shadcn@latest add https://ui.spectrumhq.in/r/animated-wave-footer.json` |
| stackedcircular-footer | registry:component | component for the Stacked Circular Footer | `npx shadcn@latest add https://ui.spectrumhq.in/r/stackedcircular-footer.json` |
| floatingparticle-footer | registry:component | component for the Floating Particle Footer | `npx shadcn@latest add https://ui.spectrumhq.in/r/floatingparticle-footer.json` |
| footer | registry:component | component for the Footer | `npx shadcn@latest add https://ui.spectrumhq.in/r/footer.json` |
| http-status-code | registry:component | component for the HTTP Status Code | `npx shadcn@latest add https://ui.spectrumhq.in/r/http-status-code.json` |
| image-preview | registry:component | component for the Image Preview Dependencies | `npx shadcn@latest add https://ui.spectrumhq.in/r/image-preview.json` |
| image-preview | registry:component | component for the Image Preview | `npx shadcn@latest add https://ui.spectrumhq.in/r/image-preview.json` |
| infinite-scroll-dependecies | registry:component | component for the Infinite Scroll Dependencies | `npx shadcn@latest add https://ui.spectrumhq.in/r/infinite-scroll-dependecies.json` |
| infinite-scroll-demo | registry:component | component for the Infinite Scroll Demo | `npx shadcn@latest add https://ui.spectrumhq.in/r/infinite-scroll-demo.json` |
| loading-button-dependencies | registry:component | component for the Loading Button Dependencies | `npx shadcn@latest add https://ui.spectrumhq.in/r/loading-button-dependencies.json` |
| loading-button-demo | registry:component | component for the Loading Button Demo | `npx shadcn@latest add https://ui.spectrumhq.in/r/loading-button-demo.json` |
| loading-button-usage | registry:component | component for the Loading Button Usage | `npx shadcn@latest add https://ui.spectrumhq.in/r/loading-button-usage.json` |
| loading-button-as-child | registry: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 | registry:component | component for the Multiple Selector Dependencies | `npx shadcn@latest add https://ui.spectrumhq.in/r/multiple-selector-dependencies.json` |
| inline-code | registry:component | component for the Inline Code | `npx shadcn@latest add https://ui.spectrumhq.in/r/inline-code.json` |
| input-model | registry:component | component for the Input Model Demo | `npx shadcn@latest add https://ui.spectrumhq.in/r/input-model.json` |
| multiple-selector-demo | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry:component | component for the Multiple Selector With Group | `npx shadcn@latest add https://ui.spectrumhq.in/r/multiple-selector-with-group.json` |
| use-toast | registry:component | component for the Use Toast | `npx shadcn@latest add https://ui.spectrumhq.in/r/use-toast.json` |
| multiple-selector-max-selected | registry: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 | registry: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 | registry: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 | registry: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 | registry:component | component for the Multiple Selector Ref | `npx shadcn@latest add https://ui.spectrumhq.in/r/multiple-selector-ref.json` |
| multiple-selector-commandprops | registry: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 | registry: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 | registry:component | component for the Multiple Step Form Demo | `npx shadcn@latest add https://ui.spectrumhq.in/r/multiple-step-form-demo.json` |
| navbar-demo | registry:component | component for the Navbar Demo | `npx shadcn@latest add https://ui.spectrumhq.in/r/navbar-demo.json` |
| circular-navbar | registry:component | component for the Circular Navbar | `npx shadcn@latest add https://ui.spectrumhq.in/r/circular-navbar.json` |
| tab-navbar | registry:component | component for the Tab Navbar | `npx shadcn@latest add https://ui.spectrumhq.in/r/tab-navbar.json` |
| floating-navbar | registry:component | component for the Floating Navbar | `npx shadcn@latest add https://ui.spectrumhq.in/r/floating-navbar.json` |
| sidebar-navbar | registry:component | component for the Sidebar Navbar | `npx shadcn@latest add https://ui.spectrumhq.in/r/sidebar-navbar.json` |
| login-card | registry:component | component for the Login Card | `npx shadcn@latest add https://ui.spectrumhq.in/r/login-card.json` |
| kanbanboard | registry:component | component for the Kanban Board | `npx shadcn@latest add https://ui.spectrumhq.in/r/kanbanboard.json` |
| profile-dropdown | registry:component | component for the Profile Dropdown | `npx shadcn@latest add https://ui.spectrumhq.in/r/profile-dropdown.json` |
| product-card | registry:component | component for the Product Card | `npx shadcn@latest add https://ui.spectrumhq.in/r/product-card.json` |
| progress-with-value-dependencies | registry: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 | registry:component | component for the Progress With Value | `npx shadcn@latest add https://ui.spectrumhq.in/r/progress-with-value.json` |
| value-position | registry:component | component for the Progress With Value Position | `npx shadcn@latest add https://ui.spectrumhq.in/r/value-position.json` |
| custom-label | registry:component | component for the Progress With Value Custom Label | `npx shadcn@latest add https://ui.spectrumhq.in/r/custom-label.json` |
| responsive-modal-dependencies | registry:component | component for the Responsive Modal Dependencies | `npx shadcn@latest add https://ui.spectrumhq.in/r/responsive-modal-dependencies.json` |
| responsive-modal | registry:component | component for the Responsive Modal | `npx shadcn@latest add https://ui.spectrumhq.in/r/responsive-modal.json` |
| responsive-modal-side | registry:component | component for the Responsive Modal Side | `npx shadcn@latest add https://ui.spectrumhq.in/r/responsive-modal-side.json` |
| accordion | registry:component | component for the Accordion | `npx shadcn@latest add https://ui.spectrumhq.in/r/accordion.json` |
| skeleton | registry:component | component for the Skeleton | `npx shadcn@latest add https://ui.spectrumhq.in/r/skeleton.json` |
| skeleton-card | registry:component | component for the Skeleton Card | `npx shadcn@latest add https://ui.spectrumhq.in/r/skeleton-card.json` |
| spinner-dependencies | registry:component | component for the Skeleton Card | `npx shadcn@latest add https://ui.spectrumhq.in/r/spinner-dependencies.json` |
| spinner-demo | registry:component | component for the Spinner Demo | `npx shadcn@latest add https://ui.spectrumhq.in/r/spinner-demo.json` |
| spinner-size | registry:component | component for the Spinner Size | `npx shadcn@latest add https://ui.spectrumhq.in/r/spinner-size.json` |
| spinner-with-text | registry:component | component for the Spinner With Text | `npx shadcn@latest add https://ui.spectrumhq.in/r/spinner-with-text.json` |
| spinner-toggle | registry:component | component for the Spinner Toggle | `npx shadcn@latest add https://ui.spectrumhq.in/r/spinner-toggle.json` |
| status-badge | registry:component | component for the Status Badge | `npx shadcn@latest add https://ui.spectrumhq.in/r/status-badge.json` |
| testimonials | registry:component | component for the Testimonials | `npx shadcn@latest add https://ui.spectrumhq.in/r/testimonials.json` |
| holographic | registry:component | component for the Holographic Scan Reveal | `npx shadcn@latest add https://ui.spectrumhq.in/r/holographic.json` |
| orbital-letters | registry:component | component for the Orbital Letters | `npx shadcn@latest add https://ui.spectrumhq.in/r/orbital-letters.json` |
| ink | registry:component | component for the Fluid Ink Morph | `npx shadcn@latest add https://ui.spectrumhq.in/r/ink.json` |
| animated-drawer | registry:component | component for the Animated Drawer | `npx shadcn@latest add https://ui.spectrumhq.in/r/animated-drawer.json` |
| command-palette | registry: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 | registry:component | Demo usage for the Command Palette component | `npx shadcn@latest add https://ui.spectrumhq.in/r/command-palette-demo.json` |
| scratch-card | registry: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 | registry:component | Demo usage for the Scratch Card component | `npx shadcn@latest add https://ui.spectrumhq.in/r/scratch-card-demo.json` |
| dock | registry:component | A premium macOS-Style Animated Dock Menu component | `npx shadcn@latest add https://ui.spectrumhq.in/r/dock.json` |
| dock-demo | registry: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 | registry: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 | registry:component | A premium interactive Bento Grid component | `npx shadcn@latest add https://ui.spectrumhq.in/r/bento-grid.json` |

## For AI agents

```text
You are adding components from @spectrumui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/spectrumui.md) for the component list.
2. Fetch the machine-readable index: https://ui.spectrumhq.in/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: spectrumui).
```