---
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", "hooks", "icons", "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: 250
generated_at: "2026-09-21T01:50:16.753Z"
---

# @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 (250)

| name | type | description | install |
| --- | --- | --- | --- |
| agent-plan | registry:block | An editable plan checklist the agent proposes before running. | `npx shadcn@latest add https://ui.spectrumhq.in/r/agent-plan.json` |
| agent-steps | registry:block | A timeline of tool calls with status, arguments, results, and parallel sub-steps. | `npx shadcn@latest add https://ui.spectrumhq.in/r/agent-steps.json` |
| approval-card | registry:block | A human-in-the-loop approval for an action an agent wants to take. | `npx shadcn@latest add https://ui.spectrumhq.in/r/approval-card.json` |
| chat-empty-state | registry:block | A first-run greeting with staggered suggestion chips. | `npx shadcn@latest add https://ui.spectrumhq.in/r/chat-empty-state.json` |
| citation-sources | registry:block | Inline citation markers with hover previews or a footnote list. | `npx shadcn@latest add https://ui.spectrumhq.in/r/citation-sources.json` |
| code-block | registry:block | An AI code block with a file header, copy, and line collapse. | `npx shadcn@latest add https://ui.spectrumhq.in/r/code-block.json` |
| conversation-list | registry:block | A date-grouped conversation sidebar with pinning. | `npx shadcn@latest add https://ui.spectrumhq.in/r/conversation-list.json` |
| diff-view | registry:block | Proposed file changes with per-file accept and reject. | `npx shadcn@latest add https://ui.spectrumhq.in/r/diff-view.json` |
| disclose-image | registry:component | An image reveal component with animated sliding door panels. | `npx shadcn@latest add https://ui.spectrumhq.in/r/disclose-image.json` |
| error-state | registry:block | A failed-generation state with a preserved prompt and retry. | `npx shadcn@latest add https://ui.spectrumhq.in/r/error-state.json` |
| github-profile-card | registry:component | A GitHub profile card with account stats, a contribution graph, and social links. | `npx shadcn@latest add https://ui.spectrumhq.in/r/github-profile-card.json` |
| 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` |
| inline-edit | registry:block | A selection-anchored AI edit: suggestion toolbar, word diff, accept or reject. | `npx shadcn@latest add https://ui.spectrumhq.in/r/inline-edit.json` |
| insight-cards | registry:block | Metric cards with spark bars, trend deltas, and an AI note. | `npx shadcn@latest add https://ui.spectrumhq.in/r/insight-cards.json` |
| loading-state | registry:block | A pixel-grid loader with a shimmering label and live elapsed timer. | `npx shadcn@latest add https://ui.spectrumhq.in/r/loading-state.json` |
| memory-chips | registry:block | What the assistant remembers, as removable chips. | `npx shadcn@latest add https://ui.spectrumhq.in/r/memory-chips.json` |
| message-actions | registry:block | Per-message controls — copy, regenerate, and thumb feedback. | `npx shadcn@latest add https://ui.spectrumhq.in/r/message-actions.json` |
| model-selector | registry:block | A model picker as a radio list or segmented control, with badges and disabled states. | `npx shadcn@latest add https://ui.spectrumhq.in/r/model-selector.json` |
| prompt-composer | registry:block | A prompt input with attachments, a model picker, and a stop state. | `npx shadcn@latest add https://ui.spectrumhq.in/r/prompt-composer.json` |
| quota-banner | registry:block | A message-quota banner with a live reset countdown. | `npx shadcn@latest add https://ui.spectrumhq.in/r/quota-banner.json` |
| reasoning-trace | registry:block | An expandable chain-of-thought trace with a live thinking timer. | `npx shadcn@latest add https://ui.spectrumhq.in/r/reasoning-trace.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` |
| icon-dependencies | registry:component | Shared icon set used by the footer and profile components. | `npx shadcn@latest add https://ui.spectrumhq.in/r/icon-dependencies.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-dependencies | registry:component | component for the Image Preview Dependencies | `npx shadcn@latest add https://ui.spectrumhq.in/r/image-preview-dependencies.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` |
| status-tracker | registry:block | A staged progress tracker for long-running AI jobs. | `npx shadcn@latest add https://ui.spectrumhq.in/r/status-tracker.json` |
| streaming-text | registry:block | A streamed answer with inline citations, sources, and follow-ups. | `npx shadcn@latest add https://ui.spectrumhq.in/r/streaming-text.json` |
| suggestion-banner | registry:block | An inline AI suggestion with apply and dismiss. | `npx shadcn@latest add https://ui.spectrumhq.in/r/suggestion-banner.json` |
| task-rows | registry:block | Live agent task rows with status badges and expandable notes. | `npx shadcn@latest add https://ui.spectrumhq.in/r/task-rows.json` |
| thinking-dots | registry:block | A minimal typing indicator — bouncing dots or a sliding bar. | `npx shadcn@latest add https://ui.spectrumhq.in/r/thinking-dots.json` |
| tool-chips | registry:block | Compact tool-call chips that expand into their arguments and result. | `npx shadcn@latest add https://ui.spectrumhq.in/r/tool-chips.json` |
| usage-meter | registry:block | A context-window meter with token counts and estimated cost. | `npx shadcn@latest add https://ui.spectrumhq.in/r/usage-meter.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` |
| accordion-dependencies | registry:component | component for the Accordion Dependencies | `npx shadcn@latest add https://ui.spectrumhq.in/r/accordion-dependencies.json` |
| accordion-card | registry:component | component for the Accordion Card | `npx shadcn@latest add https://ui.spectrumhq.in/r/accordion-card.json` |
| accordion-filled | registry:component | component for the Accordion Filled | `npx shadcn@latest add https://ui.spectrumhq.in/r/accordion-filled.json` |
| accordion-ghost | registry:component | component for the Accordion Ghost | `npx shadcn@latest add https://ui.spectrumhq.in/r/accordion-ghost.json` |
| accordion-generative | registry:component | component for the Accordion Generative | `npx shadcn@latest add https://ui.spectrumhq.in/r/accordion-generative.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` |
| like-button | registry:component | A heart like button micro-interaction with a spring pop, ring pulse, radial particle burst, and a rolling odometer count | `npx shadcn@latest add https://ui.spectrumhq.in/r/like-button.json` |
| like-button-demo | registry:component | Demo usage for the Like Button component | `npx shadcn@latest add https://ui.spectrumhq.in/r/like-button-demo.json` |
| tilt-card | registry:component | A 3D perspective tilt card that rotates toward the pointer with spring smoothing, parallax translateZ depth layers, and a pointer-following glare highlight | `npx shadcn@latest add https://ui.spectrumhq.in/r/tilt-card.json` |
| tilt-card-demo | registry:component | Demo usage for the 3D Tilt Card component | `npx shadcn@latest add https://ui.spectrumhq.in/r/tilt-card-demo.json` |
| hold-to-confirm | registry:component | A press-and-hold confirmation button for destructive actions with a filling progress ring, spring-back on early release, and a success check morph on completion | `npx shadcn@latest add https://ui.spectrumhq.in/r/hold-to-confirm.json` |
| hold-to-confirm-demo | registry:component | Demo usage for the Hold to Confirm component | `npx shadcn@latest add https://ui.spectrumhq.in/r/hold-to-confirm-demo.json` |
| reaction-bar | registry:component | A Slack-style emoji reaction row with popping chips, direction-aware rolling counts, and a staggered emoji-picker popover | `npx shadcn@latest add https://ui.spectrumhq.in/r/reaction-bar.json` |
| reaction-bar-demo | registry:component | Demo usage for the Reaction Bar component | `npx shadcn@latest add https://ui.spectrumhq.in/r/reaction-bar-demo.json` |
| star-rating | registry:component | An animated star rating input with hover-preview wave, pop and sparkle burst on commit, rolling value label, and fractional read-only display | `npx shadcn@latest add https://ui.spectrumhq.in/r/star-rating.json` |
| star-rating-demo | registry:component | Demo usage for the Star Rating component | `npx shadcn@latest add https://ui.spectrumhq.in/r/star-rating-demo.json` |
| quantity-stepper | registry:component | An animated quantity input for carts and forms with rolling digits, hold-to-repeat acceleration, and a boundary shake | `npx shadcn@latest add https://ui.spectrumhq.in/r/quantity-stepper.json` |
| quantity-stepper-demo | registry:component | Demo usage for the Quantity Stepper component | `npx shadcn@latest add https://ui.spectrumhq.in/r/quantity-stepper-demo.json` |
| follow-button | registry:component | A morphing follow/unfollow button with a spring width morph, animated check draw, and a hover-revealed unfollow state | `npx shadcn@latest add https://ui.spectrumhq.in/r/follow-button.json` |
| follow-button-demo | registry:component | Demo usage for the Follow Button component | `npx shadcn@latest add https://ui.spectrumhq.in/r/follow-button-demo.json` |
| notification-bell | registry:component | A bell icon button with a ring-shake swing, springy unread badge with rolling odometer count, and a pinging dot mode | `npx shadcn@latest add https://ui.spectrumhq.in/r/notification-bell.json` |
| notification-bell-demo | registry:component | Demo usage for the Notification Bell component | `npx shadcn@latest add https://ui.spectrumhq.in/r/notification-bell-demo.json` |
| face-rating | registry:component | A five-level feedback rating where one large SVG face morphs its mouth, eyes and color between moods as you hover and click, with a joy bounce on commit | `npx shadcn@latest add https://ui.spectrumhq.in/r/face-rating.json` |
| face-rating-demo | registry:component | Demo usage for the Face Rating component | `npx shadcn@latest add https://ui.spectrumhq.in/r/face-rating-demo.json` |
| undo-pill | registry:component | An inline undo pill with a draining countdown ring that pauses on hover and fires undo or expire callbacks | `npx shadcn@latest add https://ui.spectrumhq.in/r/undo-pill.json` |
| undo-pill-demo | registry:component | Demo usage for the Undo Pill component | `npx shadcn@latest add https://ui.spectrumhq.in/r/undo-pill-demo.json` |
| password-strength | registry:component | A password input with an animated four-segment strength meter, crossfading strength label, requirements checklist with drawing check marks, and a visibility to… | `npx shadcn@latest add https://ui.spectrumhq.in/r/password-strength.json` |
| password-strength-demo | registry:component | Demo usage for the Password Strength component | `npx shadcn@latest add https://ui.spectrumhq.in/r/password-strength-demo.json` |
| swipe-to-delete | registry:component | An iOS-style swipeable list-item wrapper that reveals a delete action on drag, pops the icon at the commit threshold, and collapses the row before firing onDel… | `npx shadcn@latest add https://ui.spectrumhq.in/r/swipe-to-delete.json` |
| swipe-to-delete-demo | registry:component | Demo usage for the Swipe to Delete component | `npx shadcn@latest add https://ui.spectrumhq.in/r/swipe-to-delete-demo.json` |
| task-checkbox | registry:component | A satisfying todo checkbox row with spring fill, drawn-in check, confetti burst and animated strikethrough | `npx shadcn@latest add https://ui.spectrumhq.in/r/task-checkbox.json` |
| task-checkbox-demo | registry:component | Demo usage for the Task Checkbox component | `npx shadcn@latest add https://ui.spectrumhq.in/r/task-checkbox-demo.json` |
| morph-button | registry:component | A multi-state async action button that morphs between idle, loading, success and error with an arc spinner, drawn-in check, tight error shake and auto-reset | `npx shadcn@latest add https://ui.spectrumhq.in/r/morph-button.json` |
| morph-button-demo | registry:component | Demo usage for the Morph Button component | `npx shadcn@latest add https://ui.spectrumhq.in/r/morph-button-demo.json` |
| animated-switch | registry:component | An iOS-quality animated toggle switch with a press-to-stretch knob, drag-to-toggle with flick support, and optional crossfading knob icons | `npx shadcn@latest add https://ui.spectrumhq.in/r/animated-switch.json` |
| animated-switch-demo | registry:component | Demo usage for the Animated Switch component | `npx shadcn@latest add https://ui.spectrumhq.in/r/animated-switch-demo.json` |
| avatar-stack | registry:component | An overlapping avatar stack that fans apart on hover, springs name tooltips over each face and expands hidden members from a +N pill with a stagger | `npx shadcn@latest add https://ui.spectrumhq.in/r/avatar-stack.json` |
| avatar-stack-demo | registry:component | Demo usage for the Avatar Stack component | `npx shadcn@latest add https://ui.spectrumhq.in/r/avatar-stack-demo.json` |
| kbd-key | registry:component | A 3D keycap that physically depresses when the real key is pressed, with combo shortcuts that pulse and fire when every key is held at once | `npx shadcn@latest add https://ui.spectrumhq.in/r/kbd-key.json` |
| kbd-key-demo | registry:component | Demo usage for the Kbd Key component | `npx shadcn@latest add https://ui.spectrumhq.in/r/kbd-key-demo.json` |
| share-button | registry:component | A share trigger that fans out into copy-link and custom share actions with staggered springs, tooltips and full keyboard support | `npx shadcn@latest add https://ui.spectrumhq.in/r/share-button.json` |
| share-button-demo | registry:component | Demo usage for the Share Button component | `npx shadcn@latest add https://ui.spectrumhq.in/r/share-button-demo.json` |
| voice-input | registry:block | A voice recorder pill with animated level bars and a live timer. | `npx shadcn@latest add https://ui.spectrumhq.in/r/voice-input.json` |
| web-search | registry:block | Agent search results with a live reading indicator. | `npx shadcn@latest add https://ui.spectrumhq.in/r/web-search.json` |
| chart-kit | registry:component | Shared data, fills, tooltip, and axis chrome for Spectrum Charts. | `npx shadcn@latest add https://ui.spectrumhq.in/r/chart-kit.json` |
| bar-chart | registry:component | Vertical and horizontal bars with hatch, duotone, gradient, stripe, stack, and glow fills. | `npx shadcn@latest add https://ui.spectrumhq.in/r/bar-chart.json` |
| line-chart | registry:component | Multi-series lines with solid, dashed, bump, step, gradient, and glow strokes. | `npx shadcn@latest add https://ui.spectrumhq.in/r/line-chart.json` |
| area-chart | registry:component | Filled areas with gradient, hatch, dotted, stacked, and dashed-stroke variants. | `npx shadcn@latest add https://ui.spectrumhq.in/r/area-chart.json` |
| pie-chart | registry:component | Pie and donut charts with padded sectors, labels, and optional sector glow. | `npx shadcn@latest add https://ui.spectrumhq.in/r/pie-chart.json` |
| radar-chart | registry:component | Radar plots with filled or outline series, circle grids, and glow. | `npx shadcn@latest add https://ui.spectrumhq.in/r/radar-chart.json` |
| radial-chart | registry:component | Full and semi-circle radial bars for share and progress. | `npx shadcn@latest add https://ui.spectrumhq.in/r/radial-chart.json` |
| composed-chart | registry:component | Bars, lines, and areas on one plot — mix fills, dashes, and glow per series. | `npx shadcn@latest add https://ui.spectrumhq.in/r/composed-chart.json` |
| chart-data | registry:component | Wiring any chart to a real source: fetch in an effect, SWR or React Query, server components, and streaming — with every outcome mapped onto a status. | `npx shadcn@latest add https://ui.spectrumhq.in/r/chart-data.json` |
| chart-states | registry:component | Loading skeletons, empty states and error states for every chart — one wrapper, six skeleton shapes, and a frame height that never shifts between them. | `npx shadcn@latest add https://ui.spectrumhq.in/r/chart-states.json` |
| market-chart | registry:component | A trading-desk chart in pure SVG: OHLC candles, a volume pane, a snapping crosshair with axis-pinned price and time, a range selector that morphs the series, a… | `npx shadcn@latest add https://ui.spectrumhq.in/r/market-chart.json` |
| indicator-chart | registry:component | Price, RSI and MACD stacked on one time axis with a single crosshair that reports all three panes at once. | `npx shadcn@latest add https://ui.spectrumhq.in/r/indicator-chart.json` |
| depth-chart | registry:component | Cumulative bid and ask liquidity either side of the mid, with a crosshair that reports the size resting up to any price. | `npx shadcn@latest add https://ui.spectrumhq.in/r/depth-chart.json` |
| order-book | registry:component | A trading ladder with cumulative depth bars, a spread row, and flashing updates in live mode. | `npx shadcn@latest add https://ui.spectrumhq.in/r/order-book.json` |
| portfolio-chart | registry:component | Account value against cost basis with drawdown from the running peak shaded underneath. | `npx shadcn@latest add https://ui.spectrumhq.in/r/portfolio-chart.json` |
| market-heatmap | registry:component | A squarified treemap sized by market cap and coloured on a diverging change ramp — the market map. | `npx shadcn@latest add https://ui.spectrumhq.in/r/market-heatmap.json` |
| calendar-heatmap | registry:component | A year of daily values as week columns — the contributions grid, with five quantised intensity steps, streak stats, and month rails. | `npx shadcn@latest add https://ui.spectrumhq.in/r/calendar-heatmap.json` |
| cohort-chart | registry:component | The retention triangle: cohorts down, periods across, intensity by share retained, with a row and column crosshair and a period average. | `npx shadcn@latest add https://ui.spectrumhq.in/r/cohort-chart.json` |
| stat-cards | registry:component | KPI cards with a big value, the delta written as a sentence, and a scrubbable sparkline or progress bar beside it — the row every dashboard opens with. | `npx shadcn@latest add https://ui.spectrumhq.in/r/stat-cards.json` |
| histogram-chart | registry:component | A distribution of raw samples binned on nice edges, with p50 / p95 / p99 pinned onto the plot — the chart that shows the tail your average hides. | `npx shadcn@latest add https://ui.spectrumhq.in/r/histogram-chart.json` |
| candlestick-chart | registry:component | OHLC candles with optional volume and hollow-up bodies — for stocks, SOL, and any market pair. | `npx shadcn@latest add https://ui.spectrumhq.in/r/candlestick-chart.json` |
| price-chart | registry:component | Ticker chrome with last price and signed delta. Use it for tokens, equities, or protocol TVL. | `npx shadcn@latest add https://ui.spectrumhq.in/r/price-chart.json` |
| sparkline-chart | registry:component | Compact inline price marks for watchlists, token tables, and portfolio rows. | `npx shadcn@latest add https://ui.spectrumhq.in/r/sparkline-chart.json` |
| offset-tiers | registry:block | Staggered serif panels on a dot grid, with one entry price and expert CTAs. | `npx shadcn@latest add https://ui.spectrumhq.in/r/offset-tiers.json` |
| gradient-tiers | registry:block | Pastel gradient card headers with icons and color-coded inheritance labels. | `npx shadcn@latest add https://ui.spectrumhq.in/r/gradient-tiers.json` |
| dark-matrix | registry:block | A dark comparison table with dashed rows, mint checks, and per-plan CTA pills. | `npx shadcn@latest add https://ui.spectrumhq.in/r/dark-matrix.json` |
| blueprint-tiers | registry:block | A Swiss-style pricing table with crop marks, mono labels, and a royal-blue accent. | `npx shadcn@latest add https://ui.spectrumhq.in/r/blueprint-tiers.json` |
| serif-tiers | registry:block | Cream serif cards with a black featured card lit by a crimson glow. | `npx shadcn@latest add https://ui.spectrumhq.in/r/serif-tiers.json` |
| banner-tiers | registry:block | A brutalist plan table whose featured column wears a blue banner on top. | `npx shadcn@latest add https://ui.spectrumhq.in/r/banner-tiers.json` |
| receipt-tiers | registry:block | Plans printed as thermal receipts with torn edges, dotted leaders, and a rubber stamp. | `npx shadcn@latest add https://ui.spectrumhq.in/r/receipt-tiers.json` |
| use-typewriter | registry:hook | A typewriter hook that types, holds and deletes phrases on a loop, plus a prefers-reduced-motion hook. | `npx shadcn@latest add https://ui.spectrumhq.in/r/use-typewriter.json` |
| command-search | registry:component | A command palette that types queries and live-filters grouped results, with keyboard navigation. | `npx shadcn@latest add https://ui.spectrumhq.in/r/command-search.json` |
| command-search-demo | registry:component | Demo usage for the Command Search component | `npx shadcn@latest add https://ui.spectrumhq.in/r/command-search-demo.json` |
| recent-activity | registry:component | An activity feed card that lists agent runs with duration and recency chips. | `npx shadcn@latest add https://ui.spectrumhq.in/r/recent-activity.json` |
| recent-activity-demo | registry:component | Demo usage for the Recent Activity component | `npx shadcn@latest add https://ui.spectrumhq.in/r/recent-activity-demo.json` |
| account-access-card | registry:component | A credentials card that auto-fills email and password on a loop, with a danger zone. | `npx shadcn@latest add https://ui.spectrumhq.in/r/account-access-card.json` |
| account-access-card-demo | registry:component | Demo usage for the Account Access Card component | `npx shadcn@latest add https://ui.spectrumhq.in/r/account-access-card-demo.json` |
| ai-chat-card | registry:component | An AI chat card that types prompts into its composer, with send, attach and reset actions. | `npx shadcn@latest add https://ui.spectrumhq.in/r/ai-chat-card.json` |
| ai-chat-card-demo | registry:component | Demo usage for the AI Chat Card component | `npx shadcn@latest add https://ui.spectrumhq.in/r/ai-chat-card-demo.json` |
| nav-list-card | registry:component | A compact navigation card that lists links with icons, with a spring slide on hover. | `npx shadcn@latest add https://ui.spectrumhq.in/r/nav-list-card.json` |
| nav-list-card-demo | registry:component | Demo usage for the Nav List Card component | `npx shadcn@latest add https://ui.spectrumhq.in/r/nav-list-card-demo.json` |
| transfer-funds-card | registry:component | A money transfer form card with account pickers, a summary and a confirm action. | `npx shadcn@latest add https://ui.spectrumhq.in/r/transfer-funds-card.json` |
| transfer-funds-card-demo | registry:component | Demo usage for the Transfer Funds Card component | `npx shadcn@latest add https://ui.spectrumhq.in/r/transfer-funds-card-demo.json` |
| faq-tabs-card | registry:component | A tabbed FAQ card with animated accordion answers and a support footer. | `npx shadcn@latest add https://ui.spectrumhq.in/r/faq-tabs-card.json` |
| faq-tabs-card-demo | registry:component | Demo usage for the FAQ Tabs Card component | `npx shadcn@latest add https://ui.spectrumhq.in/r/faq-tabs-card-demo.json` |
| tree-nav | registry:component | A nav list with a tree rail and a spring marker that follows hover and settles on the active link. | `npx shadcn@latest add https://ui.spectrumhq.in/r/tree-nav.json` |
| tree-nav-demo | registry:component | Demo usage for the Tree Nav component | `npx shadcn@latest add https://ui.spectrumhq.in/r/tree-nav-demo.json` |
| use-surface-theme | registry:hook | Resolves auto to dark or light from a .dark class on <html>, then the OS preference, updating live. | `npx shadcn@latest add https://ui.spectrumhq.in/r/use-surface-theme.json` |
| metal-button | registry:component | A pill button framed by a real-time WebGL liquid-metal ring, in chromatic, silver and gold presets. | `npx shadcn@latest add https://ui.spectrumhq.in/r/metal-button.json` |
| metal-button-demo | registry:component | Demo usage for the Metal Button component | `npx shadcn@latest add https://ui.spectrumhq.in/r/metal-button-demo.json` |
| metal-prompt-bar | registry:component | An AI prompt bar with a live liquid-metal send button that reflects onto the chips beside it. | `npx shadcn@latest add https://ui.spectrumhq.in/r/metal-prompt-bar.json` |
| metal-prompt-bar-demo | registry:component | Demo usage for the Metal Prompt Bar component | `npx shadcn@latest add https://ui.spectrumhq.in/r/metal-prompt-bar-demo.json` |
| beam-card | registry:component | A card wrapped in an animated border beam, traveling or breathing, in four color palettes. | `npx shadcn@latest add https://ui.spectrumhq.in/r/beam-card.json` |
| beam-card-demo | registry:component | Demo usage for the Beam Card component | `npx shadcn@latest add https://ui.spectrumhq.in/r/beam-card-demo.json` |
| beam-search | registry:component | A search bar whose bottom edge lights up with a traveling beam while it has focus. | `npx shadcn@latest add https://ui.spectrumhq.in/r/beam-search.json` |
| beam-search-demo | registry:component | Demo usage for the Beam Search Bar component | `npx shadcn@latest add https://ui.spectrumhq.in/r/beam-search-demo.json` |
| dynamic-island | registry:component | An iOS-style island pill that morphs between live activity views with a bouncy resize. | `npx shadcn@latest add https://ui.spectrumhq.in/r/dynamic-island.json` |
| dynamic-island-demo | registry:component | Demo usage for the Dynamic Island component | `npx shadcn@latest add https://ui.spectrumhq.in/r/dynamic-island-demo.json` |
| expandable-action-bar | registry:component | Compact icon actions that expand into labeled controls on hover or focus with shared layout motion. | `npx shadcn@latest add https://ui.spectrumhq.in/r/expandable-action-bar.json` |
| expandable-action-bar-demo | registry:component | Demo usage for the Expandable Action Bar component | `npx shadcn@latest add https://ui.spectrumhq.in/r/expandable-action-bar-demo.json` |
| toast-stack | registry:component | Stacked toasts with status morphs, swipe to dismiss, actions and layout-aware motion. | `npx shadcn@latest add https://ui.spectrumhq.in/r/toast-stack.json` |
| toast-stack-demo | registry:component | Demo usage for the Toast Stack component | `npx shadcn@latest add https://ui.spectrumhq.in/r/toast-stack-demo.json` |
| number-ticker | registry:component | A rolling digit ticker that counts to a value with per-digit stagger, padding and blur. | `npx shadcn@latest add https://ui.spectrumhq.in/r/number-ticker.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).
```