# Spectrum UI

> 250+ React and Next.js components, blocks, and animations built with Tailwind CSS and Framer Motion.

- Owner: [Arihant jain](https://21st.dev/@arihantcodes_1f7b8c4d)
- Components: 110
- Website: https://ui.spectrumhq.in
- GitHub: https://github.com/arihantcodes/spectrum-ui
- Live page: https://21st.dev/@arihantcodes_1f7b8c4d/library/spectrum-ui

## Components

Showing the first 100 of 110 — browse the rest at https://21st.dev/@arihantcodes_1f7b8c4d/library/spectrum-ui.

- [Accordion Card](https://21st.dev/@arihantcodes_1f7b8c4d/components/accordion-card.md)
- [Accordion Generative](https://21st.dev/@arihantcodes_1f7b8c4d/components/accordion-generative.md)
- [Account Access Card](https://21st.dev/@arihantcodes_1f7b8c4d/components/account-access-card.md)
- [Activity Empty State](https://21st.dev/@arihantcodes_1f7b8c4d/components/activity-empty.md)
- [AI Chat Card](https://21st.dev/@arihantcodes_1f7b8c4d/components/ai-chat-card.md)
- [Animated Drawer](https://21st.dev/@arihantcodes_1f7b8c4d/components/animated-drawer.md)
- [Animated Wave Footer](https://21st.dev/@arihantcodes_1f7b8c4d/components/animated-wave-footer.md)
- [Area Chart](https://21st.dev/@arihantcodes_1f7b8c4d/components/area-chart.md)
- [Audit Log Table](https://21st.dev/@arihantcodes_1f7b8c4d/components/audit-log-table.md)
- [Autosize Textarea Customize](https://21st.dev/@arihantcodes_1f7b8c4d/components/autosize-textarea-customize.md)
- [Avatar](https://21st.dev/@arihantcodes_1f7b8c4d/components/avatar-1.md)
- [Avatar Stack](https://21st.dev/@arihantcodes_1f7b8c4d/components/avatar-stack.md)
- [Banner Tiers Pricing Table](https://21st.dev/@arihantcodes_1f7b8c4d/components/banner-tiers.md)
- [Bar Chart](https://21st.dev/@arihantcodes_1f7b8c4d/components/bar-chart.md)
- [Base Button](https://21st.dev/@arihantcodes_1f7b8c4d/components/base-button.md)
- [Beam Search Bar](https://21st.dev/@arihantcodes_1f7b8c4d/components/beam-search.md)
- [Bento Grid](https://21st.dev/@arihantcodes_1f7b8c4d/components/bento-grid.md)
- [Blueprint Tiers](https://21st.dev/@arihantcodes_1f7b8c4d/components/blueprint-tiers.md)
- [Calendar Heatmap](https://21st.dev/@arihantcodes_1f7b8c4d/components/calendar-heatmap.md)
- [Candlestick Chart](https://21st.dev/@arihantcodes_1f7b8c4d/components/candlestick-chart.md)
- [Chart Data Recipes](https://21st.dev/@arihantcodes_1f7b8c4d/components/chart-data.md)
- [Chat Empty State](https://21st.dev/@arihantcodes_1f7b8c4d/components/chat-empty-state.md)
- [Citation Sources](https://21st.dev/@arihantcodes_1f7b8c4d/components/citation-sources.md)
- [Cohort Retention Chart](https://21st.dev/@arihantcodes_1f7b8c4d/components/cohort-chart.md)
- [Command Search](https://21st.dev/@arihantcodes_1f7b8c4d/components/command-search.md)
- [Conversation List](https://21st.dev/@arihantcodes_1f7b8c4d/components/conversation-list.md)
- [Customers Table](https://21st.dev/@arihantcodes_1f7b8c4d/components/customers-table.md)
- [Dark Matrix Pricing Table](https://21st.dev/@arihantcodes_1f7b8c4d/components/dark-matrix.md)
- [Data Table](https://21st.dev/@arihantcodes_1f7b8c4d/components/data-table.md)
- [Depth Chart](https://21st.dev/@arihantcodes_1f7b8c4d/components/depth-chart.md)
- [Diff View](https://21st.dev/@arihantcodes_1f7b8c4d/components/diff-view.md)
- [Disclose Image](https://21st.dev/@arihantcodes_1f7b8c4d/components/disclose-image.md)
- [Dual Range Slider](https://21st.dev/@arihantcodes_1f7b8c4d/components/dual-range-slider.md)
- [Dynamic Island](https://21st.dev/@arihantcodes_1f7b8c4d/components/dynamic-island.md)
- [Empty Table](https://21st.dev/@arihantcodes_1f7b8c4d/components/table-empty.md)
- [Event Calendar](https://21st.dev/@arihantcodes_1f7b8c4d/components/event-calendar.md)
- [Expandable Action Bar](https://21st.dev/@arihantcodes_1f7b8c4d/components/expandable-action-bar.md)
- [FAQ Tabs Card](https://21st.dev/@arihantcodes_1f7b8c4d/components/faq-tabs-card.md)
- [Feedback Card](https://21st.dev/@arihantcodes_1f7b8c4d/components/feedback-card.md)
- [Floating Label](https://21st.dev/@arihantcodes_1f7b8c4d/components/floating-label.md)
- [Floating Navbar](https://21st.dev/@arihantcodes_1f7b8c4d/components/floating-navbar.md)
- [Fluid Ink Morph](https://21st.dev/@arihantcodes_1f7b8c4d/components/ink.md)
- [Follow Button](https://21st.dev/@arihantcodes_1f7b8c4d/components/follow-button.md)
- [Footer section](https://21st.dev/@arihantcodes_1f7b8c4d/components/footer-section.md)
- [Ghost Accordion](https://21st.dev/@arihantcodes_1f7b8c4d/components/accordion-ghost.md)
- [Gradient Tiers](https://21st.dev/@arihantcodes_1f7b8c4d/components/gradient-tiers.md)
- [Hold to Confirm Button](https://21st.dev/@arihantcodes_1f7b8c4d/components/hold-to-confirm.md)
- [HTTP Status Code](https://21st.dev/@arihantcodes_1f7b8c4d/components/http-status-code.md)
- [Indicator Chart](https://21st.dev/@arihantcodes_1f7b8c4d/components/indicator-chart.md)
- [Inline Code](https://21st.dev/@arihantcodes_1f7b8c4d/components/inline-code.md)
- [Input Modal](https://21st.dev/@arihantcodes_1f7b8c4d/components/input-modal.md)
- [Insight Cards](https://21st.dev/@arihantcodes_1f7b8c4d/components/insight-cards.md)
- [Inventory Table](https://21st.dev/@arihantcodes_1f7b8c4d/components/inventory-table.md)
- [Invoices Table](https://21st.dev/@arihantcodes_1f7b8c4d/components/invoices-table.md)
- [Kanban Board](https://21st.dev/@arihantcodes_1f7b8c4d/components/kanban-board.md)
- [Kbd Key](https://21st.dev/@arihantcodes_1f7b8c4d/components/kbd-key.md)
- [Large Name Footer](https://21st.dev/@arihantcodes_1f7b8c4d/components/large-name-footer.md)
- [Leaderboard Table](https://21st.dev/@arihantcodes_1f7b8c4d/components/leaderboard-table.md)
- [Like Button](https://21st.dev/@arihantcodes_1f7b8c4d/components/like-button.md)
- [Loading Button](https://21st.dev/@arihantcodes_1f7b8c4d/components/loading-button.md)
- [Login Card](https://21st.dev/@arihantcodes_1f7b8c4d/components/login-card.md)
- [Login Card](https://21st.dev/@arihantcodes_1f7b8c4d/components/login-card-1.md)
- [Market Chart](https://21st.dev/@arihantcodes_1f7b8c4d/components/market-chart.md)
- [Market Heatmap](https://21st.dev/@arihantcodes_1f7b8c4d/components/market-heatmap.md)
- [Memory Chips](https://21st.dev/@arihantcodes_1f7b8c4d/components/memory-chips.md)
- [Metal Button](https://21st.dev/@arihantcodes_1f7b8c4d/components/metal-button.md)
- [Metal Prompt Bar](https://21st.dev/@arihantcodes_1f7b8c4d/components/metal-prompt-bar.md)
- [Morph Button](https://21st.dev/@arihantcodes_1f7b8c4d/components/morph-button.md)
- [Multiple Selector](https://21st.dev/@arihantcodes_1f7b8c4d/components/multiple-selector.md)
- [Multistep Form](https://21st.dev/@arihantcodes_1f7b8c4d/components/multistep-form.md)
- [Navbars](https://21st.dev/@arihantcodes_1f7b8c4d/components/navbars.md)
- [Nav List Card](https://21st.dev/@arihantcodes_1f7b8c4d/components/nav-list-card.md)
- [Orbital Letters](https://21st.dev/@arihantcodes_1f7b8c4d/components/orbital-letters.md)
- [Orders Table](https://21st.dev/@arihantcodes_1f7b8c4d/components/orders-table.md)
- [Payments Table](https://21st.dev/@arihantcodes_1f7b8c4d/components/payments-table.md)
- [Pie Chart](https://21st.dev/@arihantcodes_1f7b8c4d/components/pie-chart.md)
- [Portfolio Chart](https://21st.dev/@arihantcodes_1f7b8c4d/components/portfolio-chart.md)
- [Profile Dropdown](https://21st.dev/@arihantcodes_1f7b8c4d/components/profile-dropdown.md)
- [Progress With Value](https://21st.dev/@arihantcodes_1f7b8c4d/components/progress-with-value.md)
- [Project Empty State](https://21st.dev/@arihantcodes_1f7b8c4d/components/project-empty.md)
- [Prompt Composer](https://21st.dev/@arihantcodes_1f7b8c4d/components/prompt-composer.md)
- [Quantity Stepper](https://21st.dev/@arihantcodes_1f7b8c4d/components/quantity-stepper.md)
- [Radar Chart](https://21st.dev/@arihantcodes_1f7b8c4d/components/radar-chart.md)
- [Radial Chart](https://21st.dev/@arihantcodes_1f7b8c4d/components/radial-chart.md)
- [Receipt Tiers](https://21st.dev/@arihantcodes_1f7b8c4d/components/receipt-tiers.md)
- [Responsive Modal](https://21st.dev/@arihantcodes_1f7b8c4d/components/responsive-modal.md)
- [Saved Empty State](https://21st.dev/@arihantcodes_1f7b8c4d/components/saved-empty.md)
- [Scratch Card](https://21st.dev/@arihantcodes_1f7b8c4d/components/scratch-card.md)
- [Search Empty State](https://21st.dev/@arihantcodes_1f7b8c4d/components/search-empty.md)
- [Serif Tiers Pricing](https://21st.dev/@arihantcodes_1f7b8c4d/components/serif-tiers.md)
- [Sidebar Navbar](https://21st.dev/@arihantcodes_1f7b8c4d/components/sidebar-navbar.md)
- [Skeleton](https://21st.dev/@arihantcodes_1f7b8c4d/components/skeleton.md)
- [Skeleton Reveal](https://21st.dev/@arihantcodes_1f7b8c4d/components/skeleton-reveal.md)
- [Spinner](https://21st.dev/@arihantcodes_1f7b8c4d/components/spinner.md)
- [Stacked Circular Footer](https://21st.dev/@arihantcodes_1f7b8c4d/components/stacked-circular-footer.md)
- [Star Rating](https://21st.dev/@arihantcodes_1f7b8c4d/components/star-rating.md)
- [Status Badge](https://21st.dev/@arihantcodes_1f7b8c4d/components/status-badge.md)
- [Streaming Text](https://21st.dev/@arihantcodes_1f7b8c4d/components/streaming-text.md)
- [Tab Navbar](https://21st.dev/@arihantcodes_1f7b8c4d/components/tab-navbar.md)
- [Task Checkbox](https://21st.dev/@arihantcodes_1f7b8c4d/components/task-checkbox.md)

Full component directory: https://21st.dev/llms.txt