Atelier UI

Responsive multi-series SVG line and area chart with smooth curves, hover crosshair tooltip, legend toggles and draw-in animation.

Semicircular gauge with animated needle or arc fill, colored threshold zones and meter semantics.

GitHub-style contribution calendar with five intensity levels, tooltips and roving-tabindex keyboard navigation.

Accessible slide carousel with prev/next, dots, drag and swipe, keyboard arrows, loop and pausable autoplay.

Collapsible JSON tree with syntax colors, key counts, expand/collapse all, copy value or path and long-string expansion.

Side-by-side and unified text diff with line numbers and word-level highlights, stacking to unified on narrow screens.

Semantic key/value detail list in vertical, horizontal and grid layouts with copy buttons, badges, links and empty placeholders.

Conversion funnel with tapering stages, percent of top, drop-off between stages and animated entry.

A desktop-style application menubar with submenus, checkbox and radio items, shortcuts and full keyboard support.

An avatar-triggered account menu with a profile header, links, a theme toggle and sign out.

A compact language selector with a listbox dropdown, an inline segmented variant and typeahead.

A collapsible nested navigation tree with WAI-ARIA arrow-key navigation, badges and controlled selection.

A narrow icon-only sidebar rail with tooltips, a sliding active indicator and an expandable labels mode.

A vertical multi-step progress navigator with connectors, error state, expandable content and clickable steps.

A sidebar-header workspace dropdown with plan badges, a create row and search for long lists.

A sticky secondary navigation that highlights the current section on scroll, with smooth scrolling and mobile overflow fades.

Searchable multi-value dropdown with removable chips, keyboard navigation, select all/clear and a max-selection limit.

Two-month range calendar popover with hover preview, presets, min/max bounds and full keyboard navigation.

Formatted money input with live thousands separators, decimals on blur, a currency selector and min/max validation.

Click-to-edit text or textarea with Enter to save, Esc to cancel, async saving state and validation.

Emoji grid popover with category tabs, search, skin-tone selector, recent row and keyboard grid navigation.

Dual listbox with search, checkbox selection and move selected/all buttons between Available and Chosen.

Single and multiple selection button group with roving tabindex, sizes and outline/ghost variants.

Canvas signature pad using pointer events with undo, clear, pen color/width and PNG download.

A floating action button that fans out labeled quick actions with staggered motion and full keyboard support.

A small anchored confirmation popover with destructive tone, safe default focus and async confirm.

A modal share dialog with copy link, email invite chips, access level and per-person roles.

A non-modal right-side inspector with Details and Activity tabs, property rows and an optional pin.

A full-screen navigation overlay with a morphing hamburger, staggered links, scroll lock and focus trap.

A selection-style floating toolbar with roving tabindex, separator and an overflow menu.

A "+ New" popover form with title, type segmented control, due-date chips and validation.

A bottom-right feedback launcher with sentiment choice, message, optional email and a thank-you state.

Dark button with an SVG feTurbulence grain overlay; grain strength is adjustable.

Layered gradients imitate flowing liquid metal; a blurred halo spreads on hover.

Frosted-glass button with backdrop blur, translucent fill, hairline border and a glowing top highlight.

Industrial metal button with a dark-gray gradient, stacked inner borders and brushed grain.

Square-cornered retro game button with a mono font and 8-bit hard shadow that collapses on press.

Cyberpunk button cut into broken pixel blocks with clip-path and a periodic glitch shift.

Pill button with a circular icon on the right; inverts on hover while the arrow nudges forward.

A diagonal white streak sweeps across on hover; sweep duration is adjustable.

A blurred glow spot follows the cursor across the button; glow color is adjustable.

Neon halo button whose box-shadow glow grows on hover.

On hover a dot expands to fill the button while the label slides out and an inverted label with an arrow slides in.

Button with a continuously flowing blue/purple/green aurora gradient and a matching outer glow.

CTA button whose label scrambles into random glyphs on hover or focus, then resolves letter by letter.

Like/star toggle with a spring-scaled star, particle burst and live count.

AI generate button: swaps to a spinner with a breathing glow while running; works controlled or uncontrolled.

Play/pause toggle with animated sound-wave bars while playing.

shadcn-style base button with 6 variants and 4 sizes, built on class-variance-authority.

iOS/macOS-feel button with hairline ring, soft shadow and a subtle press scale.

Origin UI–style button with a refined 1px border, inner shadow and restrained interaction.

Black App Store badge with the Apple logo and two-line text, rendered as a link.

Joined button group with shared borders, horizontal or vertical, rounding only the outer corners.

HeroUI-style group with solid/bordered/flat/faded variants, 4 semantic colors and configurable radius.

Black button where a “moon” slides aside on hover to reveal a glowing corona.

Primary action plus a chevron that opens a menu; closes on outside click or Escape.

Button with a leading or trailing icon; position is switchable.

Compound button with an icon tile, label and subtext, for actions that need a short explanation.

Segmented radio group with a spring-sliding glowing thumb and arrow-key navigation.

Save button that shows a spinner or filling progress bar, turns green with a check, then resets.

Two-step delete: first click arms it, a second click within 3s confirms; blur cancels.

Pill button with an embedded badge (New / Beta / count) on either side.

GitHub-style dark button with an inline Octocat mark and an optional star count.

File-link button with the multicolor Figma mark, file name and subtext.

iOS capsule button with filled, tinted, gray and plain styles in three sizes and a custom tint.

iOS 26 liquid glass button with frosted blur, specular highlight and soft shadow for photo or gradient backdrops.

App Store style GET button that turns into a ring progress indicator and becomes OPEN when finished.

Control Center style round toggle with icon and caption; switches to the tint color when pressed.

Slide-to-unlock control: drag past 85% to confirm, keyboard accessible, with a shimmering label.

iOS pull-down menu button with a frosted menu, destructive actions, and Esc / outside-click dismissal.

Soft-UI neumorphic button with raised and inset shadows in three shapes.

Neo-brutalist button with thick border and hard shadow that lifts on hover and flattens on press.

Button with a continuously rotating conic-gradient border; colors and speed are configurable.

3D push button with layered edge and shadow that rises on hover and sinks on press; hue is configurable.

Material style ripple button that spreads a wave from the pointer position and cleans up afterwards.

Magnetic button that follows the pointer nearby and springs back when it leaves.

Neon button with glowing outline and text that fills in on hover; color is configurable.

Jelly candy button with gloss highlight that wobbles on hover and squishes on press.

Glitch button with cyan and magenta channel slicing on hover; respects reduced motion.

Arrow button where the round arrow chip expands to fill the whole button on hover.

Stateful button cycling idle → loading → success → idle, with async onAction support.

Button whose SVG outline draws itself along the path on hover or focus.

Like button with heart pop, particle burst and live count; exposes aria-pressed.

Button whose fill sweeps in from any of four directions on hover while the text inverts.

Click-triggered popover with side and alignment options; closes on outside click or Esc and restores focus.

Delayed hover and focus preview card for profiles and link previews.

Right-click menu at the pointer with icons, shortcuts, destructive items, separators and arrow-key navigation.

Confirmation dialog for destructive actions; no backdrop dismiss and focus starts on Cancel.

Thumbnail grid with a full-screen viewer, previous/next, counter, arrow keys and Esc.

Cookie consent banner: accept all, reject all, or customize per-category preferences.

Draggable bottom sheet that snaps between stops, dismisses when pulled down and cycles on handle click.

Spotlight product tour that highlights targets step by step with keyboard control.

Bottom snackbar with an action button; the countdown pauses on hover or focus.

Bell with unread badge, All/Unread tabs and a mark-all-read action.

Wide dropdown navigation with grouped links and an optional featured card.

Floating pill navbar that hides on scroll down and returns on scroll up or focus.

Scroll-spy outline that highlights the current section with smooth jump links and nested levels.

Vertical tabs with arrow-key navigation, icons and badges following the ARIA tabs pattern.

Mobile bottom navigation with icons, badges and an optional raised center action.

Segmented radio group with a sliding thumb, arrow keys, optional icons and two sizes.

Top gradient bar that fills with scroll progress; bind it to any scroll container.

Button that appears after scrolling, with a progress ring and smooth scroll to top.

Expandable file tree with arrow keys, Home/End, Enter and Space following the ARIA tree pattern.

Navigation where a highlight pill glides between links on hover or focus and fades out on leave.

Single-thumb slider with pointer drag and keyboard control (arrows, PageUp/Down, Home/End), steps and disabled state.

Dual-thumb range slider with a minimum gap and keyboard control, ideal for price filters.

Toggle switch in three sizes with optional label and description following the ARIA switch pattern.

Checkbox group with a tri-state select-all, descriptions and disabled options.

Selectable radio cards built on native radios with arrow-key support, great for plan pickers.

Textarea that grows with its content up to a max row count, with an optional character counter.

Color picker with a saturation/brightness area, hue bar, hex input and presets, with keyboard nudging.

Search field with a / focus shortcut, Esc to clear, loading state and a clear button.

Phone input with a country dial-code select, live per-country formatting and E.164 output.

Segmented time field with arrow-key stepping, direct digit entry and 12/24-hour modes.

Nested comment thread with replies, likes and inline reply forms; new comments appear instantly.

Chat view with grouped bubbles, sent/read receipts, a typing indicator and auto-scroll.

Profile card with a gradient cover, avatar, verified badge, tags, stats and a follow toggle.

Month calendar with event chips, +N overflow, month navigation and a per-day agenda.

Grouped settings with switches, selects and segmented options, plus a save/reset bar for unsaved changes.

Empty state with icon, copy and actions, optionally dashed, for empty lists, searches and upload areas.

Onboarding checklist with a progress bar, expandable steps, inline actions and a completed state.

Stacked usage meter with a legend and warnings when nearing or exceeding the limit.

Team member list with email invites, role selects and removal; the owner is protected.

Audio player UI with cover art, seek bar, previous/next, volume and mute (simulated playback).

Inline alert with info, success, warning and error variants, optional title, dismiss button and action.

Determinate and indeterminate progress bar with label, percentage, sizes and animated stripes.

SVG ring progress with centered percentage, adjustable size, thickness and color.

Skeleton primitive with pulse or shimmer effect, plus SkeletonCard and SkeletonList compositions.

Five CSS-only loaders (ring, dots, bars, pulse, orbit) with size prop and screen-reader label.

Status badge with seven variants, optional dot, removable chip and three sizes.

A "Was this helpful?" emoji rating widget with keyboard radiogroup, comment box and thank-you state.

Vertical deployment-style step list with pending, running, done and failed states.

A dismissible top announcement banner with a badge, message, arrow link and close button.

A three-column icon feature grid with a heading and subtitle.

A row of large stat numbers with labels and dividers.

A masonry-style three-column grid of testimonial cards with initials avatars, roles and star ratings.

Team member cards with gradient initials avatars, roles and social icon buttons.

A three-plan feature comparison table with a sticky first column, highlighted recommended plan and inner horizontal scroll on mobile.

A quarterly product roadmap timeline with Shipped, In progress and Planned status pills on a vertical line.

A contact form with validation, accessible error messages and a simulated success state.

Article card with a gradient cover, category chip, author and read time, using a stretched link with hover lift and arrow nudge.

Product tile with badge, star rating, strikethrough price, an Add to cart toggle and a wishlist heart.

3D flip card that turns on hover, focus or click, is keyboard accessible and cross-fades under reduced motion.

Card that smoothly expands to reveal details using grid-rows animation, with aria-expanded and aria-controls.

Glassmorphism card with backdrop blur and a translucent border, made to sit over a colorful gradient.

Full-bleed gradient photo card whose caption slides up on hover or focus, with tag chips and a corner action.

Quote card with a large quote mark, star rating and author, in plain, outlined and filled variants.

URL preview card with a gradient icon, title, domain and description, plus a copy-link button showing Copied for 1.5s.

Overlapping avatar stack with deterministic name-hashed colors, +N overflow chip, sizes and presence status dots.

Single or multiple accordion with smooth grid-rows height animation, chevron rotation and full keyboard navigation.

Underline and pill tabs with a sliding indicator and roving-tabindex arrow-key navigation.

Tiny responsive SVG line/area chart with gradient fill, last-point dot and up/down trend colors.

Responsive vertical bar chart with gridlines, hover tooltips, mount animation and a hidden accessible data table.

SVG donut chart with focusable segments, legend, and a center label that updates on hover or focus.

Syntax-lite code block with filename header, line numbers, copy button and in-block horizontal scroll.

Keycap and key-combo components with a Mac/Windows symbol map, shown as a shortcut cheatsheet.

Infinite horizontal or vertical scrolling strip with pause on hover, reverse, speed control and edge fade.

A 3D card that tilts toward the pointer with a glare highlight and eases back on leave.

Text that scrambles through random glyphs before resolving, replaying on hover, focus or trigger change.

A deterministic diagonal meteor shower background.

Canvas confetti fired from a button click with physics, cleanup and reduced-motion support.

A headline whose words blur, slide and fade in one by one when scrolled into view, with replay.

Text with a moving light sweep clipped to the glyphs, with adjustable speed and color.

A canvas particle network that reacts to the mouse and pauses when off-screen or the tab is hidden.

iOS interface kit: device frame, large-title navigation bar, tab bar, grouped lists, switch, segmented control, bottom sheet and app icons, with light and dark support.

Call-to-action banner with a soft glow and dotted pattern, centered or left aligned.

Customer logo wall as an infinite marquee or a static grid.

FAQ accordion with smooth height animation, single or multiple open items.

Newsletter form with validation, loading and success states.

Multi-column site footer with social icons, legal line and an oversized fading wordmark.

Card with a spotlight that follows the pointer and a glowing border.

Number that counts up to its value once it scrolls into view.

Typewriter text that types, deletes and cycles through words.

Gradient beam of light travelling around a card's border.

One-time code input with paste support, grouping, masking and keyboard navigation.

Password field with show / hide toggle, strength meter and rules checklist.

Tag input — add with Enter or comma, with suggestions and a tag limit.

Drag-and-drop upload zone with type / size checks, file list and progress.

Quantity stepper with press-and-hold acceleration, rolling digits and arrow keys.

Searchable select with keyboard navigation and deselect support.

Date picker and standalone calendar with keyboard navigation, locales and disabled dates.

Sign-in form with social providers, validation, remember me and loading state.

Modal built on native <dialog> with enter / exit animation, focus handling and backdrop dismiss.

⌘K command palette with fuzzy search, groups, shortcut hints and full keyboard control.

Panel that slides in from a screen edge; the bottom sheet can be dragged down to close.

Dropdown menu with labels, checkbox items, shortcuts, destructive actions and typeahead.

Lightweight tooltip with four sides, show delay and keyboard focus support.

Responsive navbar with frosted glass on scroll, a mobile menu and a floating pill variant.

Breadcrumb trail that collapses the middle into an expandable ellipsis.

Pagination with smart ellipses, first / last buttons, page-size select and a result summary.

Multi-step progress indicator, horizontal or vertical, with clickable completed steps.

Data table with search, column sorting, row selection, pagination and custom cells.

Kanban board with native drag and drop between columns, drop indicators and quick add.

App sidebar with grouped navigation, badges and a user card; collapses to an icon rail.

Activity timeline with icon or dot markers that fade in one by one.

Landing page hero with a spotlight gradient, grid backdrop and dual CTAs.

Slowly drifting aurora gradient background with configurable colors and speed.

Button with a sweeping shimmer; shine color, background and speed are configurable.

Three-tier pricing cards with a monthly / yearly switch and a highlighted plan.

Tabs with a sliding active indicator and arrow-key navigation.

Asymmetric bento grid for showcasing product features.

AI chat composer with auto-grow, attachments, model picker and Enter to send.

Two-row testimonial marquee scrolling in opposite directions, paused on hover with faded edges.

SVG grid background with a radial mask and optional highlighted squares.

Stacked toasts that fan out on hover, with auto-dismiss timers.

Heading text with a slowly flowing gradient fill.

macOS-style dock whose icons magnify as the pointer approaches.

KPI card with a sparkline and a trend badge.

Star rating control with hover preview and keyboard support.