Spectrum UI components

Spectrum UI ⭐ is a collection of re-usable components built using Aceternity UI Magic UI and ShadCN UI that you can copy and paste into your apps.

Components: 209
Framework: React
Stack: React, TypeScript, Tailwind
License: Apache-2.0
GitHub stars: 1,459
Source: https://github.com/arihantcodes/spectrum-ui
Website: https://ui.spectrumhq.in
Install: npx shadcn@latest add @spectrumui/{name}

All Spectrum UI components

No Access: A permission wall that names the owner and turns request into requested.
Accordion: component for the Accordion
Account Access Card: A credentials card that auto-fills email and password on a loop, with a danger zone.
No Activity Yet: An audit timeline with a dashed rail above its one real event.
Agent Plan: An editable plan checklist the agent proposes before running.
Agent Steps: A timeline of tool calls with status, arguments, results, and parallel sub-steps.
AI Chat Card: An AI chat card that types prompts into its composer, with send, attach and reset actions.
Alert demo: component for the alert-demo
Alert 2: component for the alert-2
Alert 3: component for the alert-3
Alert 4: component for the alert-4
Animated SVG Chart: component for the Animated SVG Chart
Animated Card: component for the Animated Card
Animated Drawer: component for the Animated Drawer
Animated Switch: An iOS-quality animated toggle switch with a press-to-stretch knob, drag-to-toggle with flick support, and optional crossfading knob icons
Animated Testimonials: component for the Animated Testimonials
Animated Wave Footer: component for the Animated Wave Footer
No API Keys: Key creation that reveals the secret once, masked, with a copy that confirms itself.
API Keys Table: Key management with masked secrets in mono, scope chips, usage counts and a revoke action.
Approval Card: A human-in-the-loop approval for an action an agent wants to take.
Area Chart: Filled areas with gradient, hatch, dotted, stacked, and dashed-stroke variants.
Ask Docs Footer: A docs question box that streams a cited answer, over link columns.
Audit Log Table: A dense, pinned-header event log with actors, mono action names, IPs and severity levels.
Autosize Textarea Dependencies: component for the Autosize Textarea Dependencies
Avatar Stack: An overlapping avatar stack that fans apart on hover, springs name tooltips over each face and expands hidden members from a +N pill with…
Banner Tiers: A brutalist plan table whose featured column wears a blue banner on top.
Bar Chart: Vertical and horizontal bars with hatch, duotone, gradient, stripe, stack, and glow fills.
Beam Card: A card wrapped in an animated border beam, traveling or breathing, in four color palettes.
Beam Search Bar: A search bar whose bottom edge lights up with a traveling beam while it has focus.
Bento Grid: A premium interactive Bento Grid component
Blueprint Tiers: A Swiss-style pricing table with crop marks, mono labels, and a royal-blue accent.
Empty Board Column: A kanban column that accepts real drags from its neighbours and composes cards inline.
Button Collection
Calendar Heatmap: A year of daily values as week columns — the contributions grid, with five quantised intensity steps, streak stats, and month rails.
Candlestick Chart: OHLC candles with optional volume and hollow-up bodies — for stocks, SOL, and any market pair.
Card Collection
Careers Footer: A rolling three-role window with department filters, over link columns.
Empty Cart: An empty bag with three recently viewed products that add for real.
Connecting Real Data: Wiring any chart to a real source: fetch in an effect, SWR or React Query, server components, and streaming — with every outcome mapped…
No Chart Data: Ghost axes with a sample series that springs up on request.
Chart Kit: Shared data, fills, tooltip, and axis chrome for Spectrum Charts.
Chart States: Loading skeletons, empty states and error states for every chart — one wrapper, six skeleton shapes, and a frame height that never shifts…
Chat Empty State: A first-run greeting with staggered suggestion chips.
Circular Navbar: component for the Circular Navbar
Citation Sources: Inline citation markers with hover previews or a footnote list.
Code Block: An AI code block with a file header, copy, and line collapse.
Cohort Retention: The retention triangle: cohorts down, periods across, intensity by share retained, with a row and column crosshair and a period average.
Command Palette: A fully customizable, smooth-animated Command Palette (Cmd+K) component
Command Search: A command palette that types queries and live-filters grouped results, with keyboard navigation.
Composed Chart: Bars, lines, and areas on one plot — mix fills, dashes, and glow per series.
Contact Card Footer: Copyable email, phone and address rows with opening hours and local time.
Conversation List: A date-grouped conversation sidebar with pinning.
Customers Table: Accounts ranked by MRR with plan badges, churn-risk indicators and owner avatars.
Dark Matrix: A dark comparison table with dashed rows, mint checks, and per-plan CTA pills.
Data Table: A typed data table with sorting, search and row selection, where rows glide into their new order.
Datetime Picker: A date and time picker built on shadcn/ui with no extra dependencies.
Deployments Table: CI deploys with commit messages, mono shas, environment badges, build status and author avatars.
Depth Chart: Cumulative bid and ask liquidity either side of the mid, with a crosshair that reports the size resting up to any price.
Diff View: Proposed file changes with per-file accept and reject.
Disclose Image: An image reveal component with animated sliding door panels.
Dock: A premium macOS-Style Animated Dock Menu component
Dual Range Slider Dependencies: component for the Dual Range Slider Dependencies
Dynamic Island: An iOS-style island pill that morphs between live activity views with a bouncy resize.
Failed to Load: A load failure with a copyable request id and a details panel that opens to fit.
Error State: A failed-generation state with a preserved prompt and retry.
Event Badge 3D: component for the Event Badge 3D
Event Calendar: component for the Event Calendar
Expandable Action Bar: Compact icon actions that expand into labeled controls on hover or focus with shared layout motion.
Face Rating: 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…
FAQ Tabs Card: A tabbed FAQ card with animated accordion answers and a support footer.
Feature Flags Table: Flag management with env chips, rollout meters and a live spring-animated switch per row.
Feedback Demo: component for the Feedback Demo
Files Table: A shared-drive browser with type-glyph tiles, sizes, collaborator stacks and modified dates.
No Matching Filters: Filter chips you can drop one at a time, with the match count coming back as you do.
Floating Label Input: component for the Floating Label Input
Floating Navbar: component for the Floating Navbar
Floating Particle Footer: component for the Floating Particle Footer
Follow Button: A morphing follow/unfollow button with a spring width morph, animated check draw, and a hover-revealed unfollow state
Footer: component for the Footer
Footers Demo: component for the Footers Demo
GitHub Profile Card: A GitHub profile card with account stats, a contribution graph, and social links.
Gradient Tiers: Pastel gradient card headers with icons and color-coded inheritance labels.
Heading With Anchor: component for the Heading With Anchor
Histogram: 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…
Hold to Confirm: A press-and-hold confirmation button for destructive actions with a filling progress ring, spring-back on early release, and a success…
Holographic Scan Reveal: component for the Holographic Scan Reveal
HTTP Status Code: component for the HTTP Status Code
Image Preview: component for the Image Preview
Inbox Zero: A cleared inbox where the last three cards sweep out and the stats land.
Indicator Chart: Price, RSI and MACD stacked on one time axis with a single crosshair that reports all three panes at once.
Infinite Scroll Dependencies: component for the Infinite Scroll Dependencies
Fluid Ink Morph: component for the Fluid Ink Morph
Inline Code: component for the Inline Code
Inline Edit: A selection-anchored AI edit: suggestion toolbar, word diff, accept or reject.
Input Model: component for the Input Model Demo
Insight Cards: Metric cards with spark bars, trend deltas, and an AI note.
Connect a Source: A connector grid where tiles run a real connect sequence and settle into connected.
Inventory Table: Stock management with SKU tiles, capacity meters that change color at thresholds and status labels.
Invite Teammates: A one-seat team with an avatar rail, live invite field and copyable join link.
Invoices Table: Billing history with mono invoice numbers, status pills and a per-row PDF download.
Kanban Board: component for the Kanban Board
Kbd Key: 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
Leaderboard Table: Rankings with medal chips for the top three, player avatars, streaks and weekly movement.
Like Button: A heart like button micro-interaction with a spring pop, ring pulse, radial particle burst, and a rolling odometer count
Line Chart: Multi-series lines with solid, dashed, bump, step, gradient, and glow strokes.
Link Search Footer: Type-to-filter across every footer link, with arrow-key navigation.
Loading Button As Child: component for the Loading Button As Child
Loading Button Usage: component for the Loading Button Usage
Loading State: A pixel-grid loader with a shimmering label and live elapsed timer.
Locked Feature: A paywall over a blurred preview of the feature it is selling.
Login Card: component for the Login Card
Scheduled Maintenance: A maintenance window with a ticking ETA, a stage rail and a notify-me field.
Market Chart: 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…
Market Heatmap: A squarified treemap sized by market cap and coloured on a diverging change ramp — the market map.
Market Watchlist Table: A price watchlist with ticker tiles, signed 24h changes and seven-day inline sparklines.
Mega Sitemap Footer: A five-column sitemap with region and language selectors and mobile accordions.
Memory Chips: What the assistant remembers, as removable chips.
Message Actions: Per-message controls — copy, regenerate, and thumb feedback.
Metal Button: A pill button framed by a real-time WebGL liquid-metal ring, in chromatic, silver and gold presets.
Metal Prompt Bar: An AI prompt bar with a live liquid-metal send button that reflects onto the chips beside it.
Minimal Footer: A single-line footer with hover-expanding link clusters, status and socials.
Model Selector: A model picker as a radio list or segmented control, with badges and disabled states.
Morph Button: A multi-state async action button that morphs between idle, loading, success and error with an arc spinner, drawn-in check, tight error…
Multiple Selector: A multi-select input with async search, grouping, and creatable options.
Multiple Step Form Demo: component for the Multiple Step Form Demo
Nav List Card: A compact navigation card that lists links with icons, with a spring slide on hover.
Navbar Demo: component for the Navbar Demo
Neural Grid Footer: An SVG node lattice that lights up under the pointer.
Newsletter Footer: A newsletter panel with a value checklist, reader stack and inline validation.
Page Not Found: A 404 that prints the path it tried and filters real destinations as you type.
Notification Bell: A bell icon button with a ring-shake swing, springy unread badge with rolling odometer count, and a pinging dot mode
No Notifications: An empty notification tray with working channel switches and a quiet-hours state.
Number Ticker: A rolling digit ticker that counts to a value with per-digit stagger, padding and blur.
Offline: An offline panel that counts down, retries itself and recovers on screen.
Offset Tiers: Staggered serif panels on a dot grid, with one entry price and expert CTAs.
Orbital Letters: component for the Orbital Letters
Order Book: A trading ladder with cumulative depth bars, a spread row, and flashing updates in live mode.
Orders Table: E-commerce orders with fulfillment pills, customer avatars and an expandable line-item panel.
Password Strength: A password input with an animated four-segment strength meter, crossfading strength label, requirements checklist with drawing check…
Payments Table: Transactions with people avatars, status pills, filters, row selection and a bulk export bar.
Pie Chart: Pie and donut charts with padded sectors, labels, and optional sector glow.
Policy Footer: Cookie-category switches with a save state, over a layered legal row.
Portfolio Chart: Account value against cost basis with drawdown from the running peak shaded underneath.
Price Chart: Ticker chrome with last price and signed delta. Use it for tokens, equities, or protocol TVL.
Product Card: component for the Product Card
Profile Dropdown: component for the Profile Dropdown
Progress With Value: component for the Progress With Value
First Project: First-run project screen with selectable templates and a setup checklist.
Prompt Composer: A prompt input with attachments, a model picker, and a stop state.
Quantity Stepper: An animated quantity input for carts and forms with rolling digits, hold-to-repeat acceleration, and a boundary shake
Quota Banner: A message-quota banner with a live reset countdown.
Limit Reached: A quota wall with a full meter, seven days of history and a reset clock.
Radar Chart: Radar plots with filled or outline series, circle grids, and glow.
Radial Chart: Full and semi-circle radial bars for share and progress.
Reaction Bar: A Slack-style emoji reaction row with popping chips, direction-aware rolling counts, and a staggered emoji-picker popover
Reasoning Trace: An expandable chain-of-thought trace with a live thinking timer.
Receipt Tiers: Plans printed as thermal receipts with torn edges, dotted leaders, and a rubber stamp.
Recent Activity: An activity feed card that lists agent runs with duration and recency chips.
Region Picker Footer: A region popover with locale, currency, data residency and live local time.
Release Feed Footer: A changelog list with version, kind and date on hairline rows.
Responsive Modal: component for the Responsive Modal
Sales CTA Footer: A seat slider that prices a tier live, beside the link grid.
Nothing Saved: An empty saved list that teaches the gesture on three real rows.
Nothing Scheduled: A day rail with a now marker where any hour opens an inline composer.
Scratch Card: A scratch-to-reveal coupon card with an HTML5 canvas foil, dust particles on scratch, and a reveal callback at a configurable threshold
No Search Results: A no-results state that echoes the query and resolves when a suggestion is taken.
Serif Tiers: Cream serif cards with a black featured card lit by a crimson glow.
Service Status Footer: Thirty days of per-service uptime bars with a rolling incident ticker.
Share Button: A share trigger that fans out into copy-link and custom share actions with staggered springs, tooltips and full keyboard support
Sidebar Navbar: component for the Sidebar Navbar
Skeleton: component for the Skeleton
Skeleton Reveal: A skeleton that pulses while loading, then cross-fades and un-blurs into the real content.
Logo Wall Footer: A customer logo wall — marquee or plotted grid — over stats and link columns.
Sparkline: Compact inline price marks for watchlists, token tables, and portfolio rows.
Spinner: A loading spinner with multiple sizes and variants for async states.
Stacked Circular Footer: component for the Stacked Circular Footer
Star Rating: An animated star rating input with hover-preview wave, pop and sparkle burst on commit, rolling value label, and fractional read-only…
Stat Cards: KPI cards with a big value, the delta written as a sentence, and a scrubbable sparkline or progress bar beside it — the row every…
Status Badge: component for the Status Badge
Status Tracker: A staged progress tracker for long-running AI jobs.
Streaming Text: A streamed answer with inline citations, sources, and follow-ups.
Suggestion Banner: An inline AI suggestion with apply and dismiss.
Swipe to Delete: An iOS-style swipeable list-item wrapper that reveals a delete action on drag, pops the icon at the commit threshold, and collapses the…
Tab Navbar: component for the Tab Navbar
Empty Table: A table that keeps its header and column widths, with rows that spring in.
Task Checkbox: A satisfying todo checkbox row with spring fill, drawn-in check, confetti burst and animated strikethrough
Task Rows: Live agent task rows with status badges and expandable notes.
Team Members Table: Workspace member management with roles, two-factor status, last activity and a remove action.
Testimonials: component for the Testimonials
Text States: A status label that swaps its text in place, exiting up with blur and entering from below.
Thinking Dots: A minimal typing indicator — bouncing dots or a sliding bar.
Support Tickets Table: A support queue with priority icons, SLA countdowns, assignee avatars and status pills.
3D Tilt Card: A 3D perspective tilt card that rotates toward the pointer with spring smoothing, parallax translateZ depth layers, and a…
Toast Stack: Stacked toasts with status morphs, swipe to dismiss, actions and layout-aware motion.
Token Stream Footer: A one-line manifesto that types itself in, over a metric row.
Tool Chips: Compact tool-call chips that expand into their arguments and result.
Top Pages Table: An analytics table with mono paths, share-of-traffic bars and signed week-over-week deltas.
Transfer Funds Card: A money transfer form card with account pickers, a summary and a confirm action.
Trash Is Empty: An empty trash that explains the retention window instead of celebrating.
Tree Nav: A nav list with a tree rail and a spring marker that follows hover and settles on the active link.
Trust Center Footer: Compliance marks that expand to scope, over a logo row and link columns.
Undo Pill: An inline undo pill with a draining countdown ring that pauses on hover and fires undo or expire callbacks
Drop Files: A drop zone with real drag handling and per-file upload meters.
Usage Meter: A context-window meter with token counts and estimated cost.
Voice Input: A voice recorder pill with animated level bars and a live timer.
Waitlist Footer: Waitlist capture with an avatar stack and a live position counter.
Web Search: Agent search results with a live reading indicator.
Waiting for Events: A live endpoint waiting for its first delivery, with a test event that lands.
Wordmark Spotlight Footer: A full-bleed wordmark lit by a spotlight that follows the pointer.

Spectrum UI components

All Spectrum UI components

Browse by category