Copy-paste React + Tailwind components, blocks & themes.

Components 26

Pro

AI chat inputNew

Rounded AI prompt box with attach tools, a round send button and a shimmering "Searching the web" status below.

Pro

Agent task checklistNew

Collapsible to-do list for an AI agent: each step fills a progress ring, rolls its percentage and strikes through when done.

Agent thinking

Thinking indicator: a wobbling dot ring and a shimmering label.

Thinking indicator

AI thinking status with a monochrome sparkling diamond and shimmering text.

Prompt deckNew

A stack of prompt cards that swipes the front card away and lifts the next one into place, on a loop while it is on screen.

Input with label

Email input with a label and helper text.

Input with icon and button

Newsletter-style input with a leading icon and submit button.

Settings switches

Notification settings list with switches.

Password with strength meter

Password input with show/hide toggle and a live strength checklist.

One-time code input

Six-digit OTP input with paste, backspace and arrow-key support.

WaitlistNew

Email signup with a live avatar stack: new people slide in, the last one tucks under a rolling join counter.

Pro

File dropzone

Drop zone that grows as files land, with per-file progress, errors and retry.

Pro

Style marquee cardNew

Feature card with rows of style tags drifting in alternating directions behind faded edges, above a short headline.

Folder card

Folder that opens on hover and fans out the files inside.

Pro

Celebration card

Task bubbles rain down, pile up on the headline and drain away when you switch range.

Smart PDF stackNew

A file card with paper sheets and tilted profile cards behind it that rise in on enter and fan out on hover.

Waitlist pass

Ticket-style waitlist pass with notched edges, a QR code stub and a tilt-and-glare hover.

Buttons with icons

Secondary, outline and destructive buttons with soft status buttons and animated icons, popping in as one group.

QR scan badge

A QR code that dissolves into sand, pours into a scan badge and grows back.

Avatar group

Stacked avatars with an overflow count.

Rolling price badge

Pill badge that rolls between prices glyph by glyph, resizing smoothly as it goes.

Avatars with status

Team list with online, away and offline status dots.

Alert banners

Info, success, warning and error alerts with dismiss buttons.

FAQ accordion

Accessible accordion built on details and summary.

Keyboard shortcuts

Shortcut list with styled key caps.

Empty state

Dashed empty state with a skeleton-card illustration, copy and two actions.

Blocks 11

Pro

Animated pill heroNew

Centered hero with a crew of bobbing agent avatars and a headline pill that wipes between words and colours. Respects reduced motion.

Integrations grid hero

Centered hero on a square grid where integration icons blink in and out, paused while off screen.

Waitlist heroNew

Hero with email capture and avatar social proof.

Orbit chat heroNew

AI hero with a polished chatbox whose placeholder types out questions, ringed by app icons orbiting on dashed circles. Paused while off screen.

Pro

Usage card

Animated credit usage card with period tabs, stacked breakdown, daily chart and plan limits.

Three-tier pricing

Three plans with a monthly/annual toggle, usage chips and a framed recommended tier.

Feature with board

Text and checklist next to a kanban-style pipeline mockup.

Testimonial cards

Three testimonial cards with ratings and avatars.

Single quote

One large testimonial with author.

Team carousel

Staggered speaker cards on one warm backdrop with a champagne keynote card, scroll-in and hover motion.

Pro

Sign-in card

Sign-in card in a soft frame: GitHub and Google buttons, email and password with a show toggle, remember me and a sign-up footer.

Motion 2

Pro

Text revealNew

Words that arrive one at a time, fading in out of a soft blur as they rise into place.

Sound ringNew

A ring of rounded bars that jumps like an audio visualizer, each beat lifting a cluster of bars into a peak.

Geist · 0.625rem radius

Default

Free · preview and copy the CSS

Geist · 0.5rem radius

Ember

Free · preview and copy the CSS

Geist · 0.75rem radius

Ocean

Free · preview and copy the CSS

Geist · 0.375rem radius

Forest

Free · preview and copy the CSS

Geist · 1rem radius

Grape

Free · preview and copy the CSS

Geist · 0.625rem radius

Rose

Free · preview and copy the CSS

Rounded · 0.5rem radius

Amber

Free · preview and copy the CSS

Serif · 0.5rem radius

ClayNew

Free · preview and copy the CSS

Mono · 0rem radius

BrutalNew

Free · preview and copy the CSS
Stay informed

Subscribe to our newsletter

Get the latest themes, tips and new blocks from nextui.

We respect your privacy

  • Weekly updates
  • New themes first
  • Early access to Pro blocks