sp

componentsReact

@spectrumui

A modern component library built with shadcn/ui and Tailwind CSS. Spectrum UI offers elegant, responsive components and smooth animations designed for high-quality interfaces.

212 items3 screenshots0 run liveui.spectrumhq.in

Add to components.json

"registries": {
  "@spectrumui": "https://ui.spectrumhq.in/r/{name}.json"
}

Then npx shadcn@latest add @spectrumui/<item> — every tile below copies its own command.

212 items

Animated Wave Footer

animated-wave-footer

Animated SVG Chart

animated-SVG-chart

Autosize Textarea Dependencies

autosize-textarea-dependecies

Connecting Real Data

Circular Navbar

circular-navbar

Command Palette Demo

command-palette-demo

Cohort Retention

Animated Switch

animated-switch

Autosize Textarea Form

autosize-textarea-form

Avatar Stack Demo

avatar-stack-demo

Blueprint Tiers

blueprint-tiers

Citation Sources

citation-sources

Datetime Picker and Time Input

datetime-picker-and-time-input

Morph Button Demo

morph-button-demo

Animated Drawer

animated-drawer

Animated Testimonials

animated-testimonials

Autosize Textarea Demo

autosize-textarea-demo

Autosize Textarea Ref

autosize-textarea-ref

Candlestick Chart

candlestick-chart

Chat Empty State

chat-empty-state

Command Palette

command-palette

Progress With Value Custom Label

Datetime Picker Demo

datetime-picker-demo

Animated Switch Demo

animated-switch-demo

Autosize Textarea Customize

autosize-textarea-customize

Autosize Textarea Max Height

autosize-textarea-max-height

Calendar Heatmap

calendar-heatmap

Conversation List

conversation-list

Datetime Picker Calendar Settings

datetime-picker-calendar-settings