Components

Email + password login with GitHub OAuth and show/hide password toggle.

Registration form with name fields, email, and live password strength hints.

Two-step flow: account type picker then profile details.

Single date picker with month navigation and today indicator.

Select a start and end date with an interactive range highlight.

Monthly view with colour-coded event dots and a day detail panel.

Compact inline calendar paired with an upcoming events list.

Date picker combined with an AM/PM hour and minute roller.

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.

Classic Kanban board with status columns, priority badges, assignee avatars, and a full filter/sort toolbar.

Horizontal swimlane board grouping tasks by status, with horizontal card scroll per lane.

Responsive card grid view showing full task details with tag, status, priority, and assignee.

Compact single-column list view with drag handles, inline badges, and all metadata at a glance.

Sortable data table with clickable column headers, status and priority chips, and avatar assignees.

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.

Container for grouping related content.

User profile pictures with fallback initials.

Visualise completion of a task or metric.

Communicate important messages inline.

Temporary notifications at the edge of the screen.

Segmented navigation between related views.

Full contact form with name, email, subject, and message fields. Includes client-side validation, error states, loading spinner, and success confirmation.

Product feedback form with a 5-star rating, category chip selector, and open text. Validates all fields before submitting.

Three-step survey with progress bar, single-select list, multi-select chips, and NPS 0–10 grid. Each step validates before advancing.

Minimal email subscribe form with inline validation, loading state, and success confirmation. Ideal for footers or landing pages.

Support form with severity selector (Low / Medium / High with color coding), reproduction steps, and email for follow-up.

Feature request form capturing the problem, suggested solution, and personal priority level. Helps product teams triage incoming ideas.

Three-step onboarding wizard: name + avatar color, role picker, and team-size selector. Ends with a personalised welcome screen.

Thumbs-up / thumbs-down doc-page feedback widget. One click locks in your vote and shows aggregate counts.

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.

Compact 340px chat panel designed for sidebars and drawers. Online indicator, streaming bubbles with typewriter effect, and minimal send input.

Fixed-position FAB that toggles a compact support chat panel. Includes unread badge, primary-colored header, streaming replies, and a mock page backdrop.

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.

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.

Smart pagination with ellipsis truncation, previous/next buttons, and a compact page-info row variant. Fully keyboard and aria accessible.

Collapsible sidebar with grouped nav items, active state, badge counts, collapse toggle, and a live content area preview.

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.

Spotlight-style command palette with live search filtering, grouped results, keyboard shortcut hints, arrow-key navigation, and a footer legend.

macOS-style app dock with magnification scaling on hover, active dot indicator, notification badge, and tooltip labels.

Smooth area chart with gradient fills and a Normal/Stacked toggle. Shows multi-series revenue vs expenses data.

Grouped and stacked bar chart with a vertical/horizontal orientation toggle. Three-series quarterly data with NexUI BarChart.

Multi-line chart with three team traces, a reference target line, and no-dot style for clean readability.

Interactive pie/donut toggle with hover highlighting, center-text total, and a custom side legend with percentages.

Dual-trace radar chart comparing individual scores vs industry benchmarks across six skill dimensions.

Circular progress rings for four system resources (Storage, Memory, CPU, Network) with a matching linear progress legend.

Two-segment bubble scatter chart with semi-transparent fills and axis domains from 0–100.

Proportional treemap with custom SVG cell content, tinted fills per segment, and label overflow protection.

Conversion funnel from Visitors through Retention with percentage drop-off labels and a step-by-step side legend.

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/person-based Gantt (swim-lane view) showing five team members' tasks across a 3-week sprint with hover highlights.

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.

Custom SVG waterfall chart showing cumulative revenue gains and losses with connector lines between bars and a running total column.

GitHub-style calendar heatmap over 16 weeks. Custom SVG cells with opacity-scaled fill and an interactive hover state.

Pure SVG bubble chart encoding three dimensions: x-axis price, y-axis satisfaction, and bubble radius as market share. Hover to reveal product names.

OHLC candlestick chart with green/red candle bodies, high/low wicks, and an on-hover tooltip showing all four price values.

Frequency distribution histogram built with Recharts BarChart with zero gap between bins and a sample of 200 data points.

Proportional stacked bar chart normalised to 100% per quarter, showing relative team effort split across Design, Dev, and QA.

Staircase-type line chart using Recharts stepAfter interpolation for discrete pricing or status changes over time.

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.

Eight-direction polar area chart (wind rose) built with Recharts RadarChart, comparing two seasonal datasets with filled area traces.

Phase + milestone SVG Gantt chart with diamond milestone markers, 60% progress fills inside phase bars, and a Today reference line. Hover diamonds for labels.

SVG service-architecture dependency graph with directed arrow edges, hover-triggered node and edge highlighting, and automatic edge shortening to avoid node overlap.

Auto-playing image carousel with smooth slide transitions, arrow controls, drag-to-swipe, dot navigation, and a play/pause toggle.

Feature-card carousel with a peek effect showing partial adjacent cards, scale-and-fade depth, and icon-led content cards.

Single-card testimonial carousel with star ratings, avatar initials, decorative quote mark, and directional controls.

E-commerce product carousel with drag-to-swipe, badge overlay, likeable heart toggle, star ratings, and add-to-cart action.

Video chapter carousel with a large main stage, play/pause toggle, duration badge, and a scrollable filmstrip thumbnail track.

Stacked perspective card carousel for step-by-step flows — tap any back card to advance, progress bar shows completion.