Library
97 accessible, dark-mode-ready components built with Tailwind CSS. Copy the code and own it.
97 components

“The best components library we've ever used.”
— Alex Chen, Product Designer
Email + password login with GitHub OAuth and show/hide password toggle.

“The best components library we've ever used.”
— Alex Chen, Product Designer
Registration form with name fields, email, and live password strength hints.
Step 1 of 2

“The best components library we've ever used.”
— Alex Chen, Product Designer
Two-step flow: account type picker then profile details.
Selected: March 17, 2026
Single date picker with month navigation and today indicator.
From
Mar 8
To
Mar 18
Select a start and end date with an interactive range highlight.
Monthly view with colour-coded event dots and a day detail panel.
Upcoming
Product launch
Mar 12 · 2:00 PM
1:1 with Alex
Mar 18 · 10:30 AM
Sprint planning
Mar 22 · 9:00 AM
Compact inline calendar paired with an upcoming events list.
Scheduled
Mar 17
10:30 AM
Date picker combined with an AM/PM hour and minute roller.
Tue, Mar 17
Available time slots
Date selector with available time slots and a confirm booking flow.
Single-select dropdown with a solid primary background on the selected item and a left-aligned checkmark — matching the macOS-native style.
Dropdown with a live search input to filter a long list of options.
Select multiple options with checkboxes and removable chip badges.
Rich dropdown with icon, title, and subtitle per option — great for framework or service pickers.
Clean animated search bar with a glowing ring focus state and animated clear button.
Command palette style search bar with ⌘K keyboard shortcut badge.
Animated suggestions dropdown that appears on focus with live filtering.
Search bar with animated filter pill tabs to scope the search query.
Animated pill toggle that switches between dark and light mode with icon transitions.
Three-way segmented control for System / Light / Dark mode selection.
Settings-style list of labeled pill toggles with animated thumb transitions.
Expanding swatch palette — hover to expand a color slot and click to copy the hex value.
Interactive design token grid with dark/light mode preview and one-click hex copy.
Write API docs
Onboarding emails
Performance audit
Implement auth flow
Fix mobile layout
Dashboard analytics
Design system tokens
User research interviews
Classic Kanban board with status columns, priority badges, assignee avatars, and a full filter/sort toolbar.
Write API docs
Onboarding emails
Performance audit
Implement auth flow
Fix mobile layout
Dashboard analytics
Design system tokens
User research interviews
Horizontal swimlane board grouping tasks by status, with horizontal card scroll per lane.
Design system tokens
Performance audit
Implement auth flow
Fix mobile layout
Dashboard analytics
Write API docs
Onboarding emails
User research interviews
Responsive card grid view showing full task details with tag, status, priority, and assignee.
Design system tokens
DesignDoneHighAKPerformance audit
DevIn ProgressHighJSImplement auth flow
DevIn ProgressHighJSFix mobile layout
DevIn ReviewMediumAKDashboard analytics
DevIn ReviewLowNPWrite API docs
DocsTodoMediumMLOnboarding emails
MarketingTodoLowNPUser research interviews
ResearchDoneMediumMLCompact single-column list view with drag handles, inline badges, and all metadata at a glance.
Design system tokens | Done | Mar 10 |
Performance audit | In Progress | Mar 11 |
Implement auth flow | In Progress | Mar 12 |
Fix mobile layout | In Review | Mar 13 |
Dashboard analytics | In Review | Mar 14 |
Write API docs | Todo | Mar 15 |
Onboarding emails | Todo | Mar 18 |
User research interviews | Done | Mar 9 |
Sortable data table with clickable column headers, status and priority chips, and avatar assignees.
Write API docs
Onboarding emails
Performance audit
Implement auth flow
Fix mobile layout
Dashboard analytics
Design system tokens
User research interviews
Full view-switcher with Kanban, Board, Cards, List, and Table — all sharing the same filter and sort toolbar.
Trigger actions with multiple variants and sizes.
Multi-select control with accessible toggle states.
Dropdown menu for choosing from a list of options.
Multi-line text input for longer content.
Text fields for capturing user input.
Toggle boolean settings on or off.
Small status indicators and labels.
Alex Chen
Product Designer
"NexUI components saved us weeks of work."
Container for grouping related content.
User profile pictures with fallback initials.
Visualise completion of a task or metric.
New release
NexUI v1.0 is now available.
Error
Something went wrong. Please retry.
Communicate important messages inline.
Temporary notifications at the edge of the screen.
Segmented navigation between related views.
We'll reply within 24 hours
Full contact form with name, email, subject, and message fields. Includes client-side validation, error states, loading spinner, and success confirmation.
Help us improve the product
Product feedback form with a 5-star rating, category chip selector, and open text. Validates all fields before submitting.
Step 1 of 3
Your role
What best describes your role?
Three-step survey with progress bar, single-select list, multi-select chips, and NPS 0–10 grid. Each step validates before advancing.
Get notified when new components drop. No spam, ever.
Minimal email subscribe form with inline validation, loading state, and success confirmation. Ideal for footers or landing pages.
Help us fix it fast
Support form with severity selector (Low / Medium / High with color coding), reproduction steps, and email for follow-up.
Shape the roadmap
Feature request form capturing the problem, suggested solution, and personal priority level. Helps product teams triage incoming ideas.
Step 1 of 3
Your name
What should we call you?
Pick an avatar color
Three-step onboarding wizard: name + avatar color, role picker, and team-size selector. Ends with a personalised welcome screen.
Was this documentation helpful?
Thumbs-up / thumbs-down doc-page feedback widget. One click locks in your vote and shows aggregate counts.
NexUI Assistant
Online
Hello! I'm your AI assistant. Ask me anything, share a file, or pick a suggestion below.
Can you review this report?
I've reviewed the document. The three most important points are:
1.Revenue grew 24% YoY to $4.2M
2.Churn dropped from 5.1% to 3.8%
3.Organic search is your top acquisition channel at 38%
Should I draft an executive summary email?
AI can make mistakes — verify important information.
ChatGPT-style full-screen chat with conversation sidebar, model selector, file attachments (PDF/image/doc/CSV), emoji picker, voice recording, streaming typewriter replies, stop generation, and copy-on-hover.
NexAI
Always ready
Hi! How can I help you today?
What's the difference between let and const?
const declares a block-scoped variable that cannot be reassigned. let is also block-scoped but can be reassigned. Neither is function-scoped like var.
Compact 340px chat panel designed for sidebars and drawers. Online indicator, streaming bubbles with typewriter effect, and minimal send input.
NexAI Support
Typically replies instantly
Hi there! Got a question? I'm here to help.
Fixed-position FAB that toggles a compact support chat panel. Includes unread badge, primary-colored header, streaming replies, and a mock page backdrop.
Tap to speak
Voice-first interface with animated waveform bars, four-state mic button (idle → listening → processing → speaking), live transcript, and a rolling conversation history.
Matches the screenshot exactly: title line, two body lines, a 3-column card grid, then two footer lines — all with a smooth left-to-right shimmer sweep.
Full blog-post skeleton: hero image, author avatar with meta, two heading lines, three body lines, and tag pill row with a shimmer sweep.
User profile skeleton with circular avatar, name/handle lines, three stat columns, a CTA button bone, and a list of info rows.
Full dashboard placeholder: four stat cards, a large chart area, and a five-row data table — all shimmering simultaneously.
E-commerce 3-column product grid skeleton with image, title, price, and add-to-cart button bones inside each card.
Chat interface skeleton with alternating user/assistant bubble rows (varying widths), avatar bone, and an input bar placeholder.
Indeterminate
Steps (3/5)
Complete loading indicator collection: ring, bouncing dots, vertical bars, dual counter-rotating rings, ripple ping, NexUI logo pulse, indeterminate and determinate progress bars, segmented steps, and circular progress SVGs.
Responsive top navigation bar with a hover-triggered two-column mega menu, CTA buttons, and a mobile hamburger drawer.
Two text-based breadcrumb variants (chevron-separated and slash-separated pill) with current-page aria annotation.
Page 4 of 12
Smart pagination with ellipsis truncation, previous/next buttons, and a compact page-info row variant. Fully keyboard and aria accessible.
Dashboard
Collapsible sidebar with grouped nav items, active state, badge counts, collapse toggle, and a live content area preview.
Account
Create credentials
Profile
Personal details
Plan
Choose your tier
Confirm
Review & finish
Account
Create credentials
Profile
Personal details
Plan
Choose your tier
Confirm
Review & finish
Horizontal and vertical stepper variants with completed/active/pending states, connecting progress lines, and back/continue controls.
Mobile-style bottom navigation bar with active indicator line, notification badge, and label. Rendered inside a phone-screen mock.
Navigation
Actions
Theme
Spotlight-style command palette with live search filtering, grouped results, keyboard shortcut hints, arrow-key navigation, and a footer legend.
Dashboard
macOS-style app dock with magnification scaling on hover, active dot indicator, notification badge, and tooltip labels.
Revenue vs Expenses
Jan – Jul 2025
Smooth area chart with gradient fills and a Normal/Stacked toggle. Shows multi-series revenue vs expenses data.
Traffic by Platform
Quarterly breakdown
Grouped and stacked bar chart with a vertical/horizontal orientation toggle. Three-series quarterly data with NexUI BarChart.
Weekly Active Users
8-week trend by team
Multi-line chart with three team traces, a reference target line, and no-dot style for clean readability.
Traffic Sources
Channel distribution
Interactive pie/donut toggle with hover highlighting, center-text total, and a custom side legend with percentages.
Skill Radar
Score vs industry average
Dual-trace radar chart comparing individual scores vs industry benchmarks across six skill dimensions.
System Usage
Resource utilisation %
Circular progress rings for four system resources (Storage, Memory, CPU, Network) with a matching linear progress legend.
Scatter Plot
Two-segment distribution
Two-segment bubble scatter chart with semi-transparent fills and axis domains from 0–100.
Tech Stack Usage
Size = relative popularity
Proportional treemap with custom SVG cell content, tinted fills per segment, and label overflow protection.
Conversion Funnel
Visitor → Retention
Conversion funnel from Visitors through Retention with percentage drop-off labels and a step-by-step side legend.
Project Gantt Chart
10 tasks · 5 groups · dependencies
Full Gantt chart with 10 tasks across 5 groups, dependency arrows, progress fills, day/week zoom toggle, and a Today marker — rendered as scalable SVG.
Resource Timeline
Team allocation across 3-week sprint
Resource/person-based Gantt (swim-lane view) showing five team members' tasks across a 3-week sprint with hover highlights.
Sales vs Target + Growth
Bar (sales & target) + Line (growth %)
Combined bar + line chart on dual Y-axes — Sales/Target bars on the left axis, Growth % line on the right, with a zero reference line.
Waterfall Chart
Cumulative revenue change Jan–Jun
Custom SVG waterfall chart showing cumulative revenue gains and losses with connector lines between bars and a running total column.
Activity Heatmap
Contribution graph — 16 weeks
GitHub-style calendar heatmap over 16 weeks. Custom SVG cells with opacity-scaled fill and an interactive hover state.
Bubble Chart
Market share (size) vs satisfaction (y) vs price (x)
Pure SVG bubble chart encoding three dimensions: x-axis price, y-axis satisfaction, and bubble radius as market share. Hover to reveal product names.
Candlestick Chart
OHLC — stock price Jan 13–24
OHLC candlestick chart with green/red candle bodies, high/low wicks, and an on-hover tooltip showing all four price values.
Histogram
Frequency distribution of 200 samples
Frequency distribution histogram built with Recharts BarChart with zero gap between bins and a sample of 200 data points.
100% Stacked Bar
Team effort distribution by quarter
Proportional stacked bar chart normalised to 100% per quarter, showing relative team effort split across Design, Dev, and QA.
Step Line Chart
Dynamic pricing changes over 24 hours
Staircase-type line chart using Recharts stepAfter interpolation for discrete pricing or status changes over time.
Dual-Axis Chart
Revenue (bars, left) vs Active users (line, right)
ComposedChart with revenue bars on the left Y-axis and active user count line on the right Y-axis — two independent scales on one canvas.
Polar Area / Rose Chart
Wind direction distribution (two datasets)
Eight-direction polar area chart (wind rose) built with Recharts RadarChart, comparing two seasonal datasets with filled area traces.
Milestone Gantt
Phase + milestone diamonds — 30-day project
Phase + milestone SVG Gantt chart with diamond milestone markers, 60% progress fills inside phase bars, and a Today reference line. Hover diamonds for labels.
Network / Dependency Graph
Service architecture — hover nodes to highlight
SVG service-architecture dependency graph with directed arrow edges, hover-triggered node and edge highlighting, and automatic edge shortening to avoid node overlap.
Image Carousel
Aurora Peaks
Norwegian highlands at dusk
Violet Tide
Pacific coastline at sunset
Emerald Basin
Rainforest canopy, Borneo
Amber Flats
Saharan dunes, golden hour
Crimson Cliffs
Utah canyon country
Auto-playing image carousel with smooth slide transitions, arrow controls, drag-to-swipe, dot navigation, and a play/pause toggle.
Feature Cards
Peek carousel with side previews
Design System
Unified token-based design language across all platforms.
Feature-card carousel with a peek effect showing partial adjacent cards, scale-and-fade depth, and icon-led content cards.
Testimonials
1 / 4“NexUI cut our design-to-production time in half. The components are thoughtfully built — every edge case handled, every accessibility concern addressed.”
Sarah Okonkwo
Staff Eng, Vercel
Single-card testimonial carousel with star ratings, avatar initials, decorative quote mark, and directional controls.
Product Showcase
Arc Pro Headphones
E-commerce product carousel with drag-to-swipe, badge overlay, likeable heart toggle, star ratings, and add-to-cart action.
Filmstrip Carousel
1 / 6Chapter 01
The Beginning
Video chapter carousel with a large main stage, play/pause toggle, duration badge, and a scrollable filmstrip thumbnail track.
Stacked Cards
Tap to advance through steps
Onboarding
Set up your workspace in minutes with our guided flow.
Stacked perspective card carousel for step-by-step flows — tap any back card to advance, progress bar shows completion.