Components

Browse and search through all available Spectrum UI components.

Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

Alert

Displays a callout for user attention.

Animated Card

A beautifully animated card component.

Animated Chart

Interactive and animated SVG charts.

Animated Drawer

A modern, animated sliding drawer.

Animated Testimonials

An interactive, animated testimonials slider.

Animated Text

Text that animates playfully into view.

Autosize Textarea

A textarea that automatically resizes to its content.

Badge

Displays a small badge or label.

Button

Interactive button component with various styles.

Card

Displays a card with header, content, and footer.

Datetime Picker

A customizable date and time picker.

Disclose Image

An interactive image disclosure effect.

Dual Range Slider

A slider with two handles for a range of values.

Event Calendar

A premium event calendar component.

Feedback

A widget for submitting user feedback.

Floating Label Input

Input field with a floating label animation.

Footer

Pre-designed footer sections for your site.

Github Card

A card displaying GitHub repository status.

Heading with Anchor

A heading that includes an anchor link.

Image Preview

Preview images on click or hover.

Infinite Scroll

Implement infinite scrolling lists.

Input

Standard text input field.

Input Model

An input with special modal behavior.

Kanban

A draggable Kanban board UI.

Loading Button

A button with a loading spinner state.

Login

Pre-built elegant login pages and forms.

Multiple Selector

A dropdown that allows multiple selections.

Multistep Form

A multi-step form wizard layout.

Navbar

Pre-designed top navigation bars.

Product Card

A card tailored for e-commerce products.

Profile

User profile components and cards.

Progress with Value

A progress bar that displays its numerical value.

Responsive Modal

A modal that adjusts gracefully to screen sizes.

Skeleton

Placeholder loading states for content.

Spinner

A simple loading spinner.

Status Badge

A badge indicating an operational status.

Status Code

UI for displaying HTTP status code states.

Testimonials

Elegant testimonial sections.

Spectrum Pro

Stop building from scratch.
Ship faster with Pro templates.

Premium Next.js templates built on Spectrum UI. Dark. Animated. Production-ready.