UI

A versatile button with six variants, four sizes, a springy press scale, leading/trailing icon slots and a loading state where a spinner slides in beside the label. Renders an anchor when given an href.

A text field whose label glides up and shrinks when focused or filled, with an animated accent focus ring, helper or error text that cross-fades in place, and an optional clear button that pops in once there is a value.

An iOS-style segmented control whose raised thumb springs between segments and squishes slightly while pressed. Hairline dividers fade around the active segment, with a neutral or solid accent thumb.

A tab list whose active indicator springs between tabs as a sliding underline or pill, with panels that slide or fade in the direction of travel. Supports arrow-key, Home and End navigation and both controlled and uncontrolled use.

A modal dialog that fades in a blurred backdrop and scales the panel up with a soft ease, with a title, description, body content and footer actions. Focus is trapped while open and restored to the trigger on close.

A dashboard KPI card whose headline number counts up with an ease-out curve while a gradient-filled sparkline draws itself in and an end-point dot pops on. A colored delta badge shows the change versus the previous period, with an option to treat decreases as good.

An account-style dropdown menu built on the WAI-ARIA menu button pattern, with icons, shortcut hints, group labels, separators, animated checkbox items and a flyout submenu. It scales in from the trigger with measured, viewport-aware placement and supports full keyboard navigation with typeahead.

A clean data table with sortable column headers, row hover, row selection with a tri-state select-all checkbox, colored status pills and simple pagination. Rows glide to their new positions with a spring when the sort changes and fade in when you page.

A site header navigation with a pill or underline indicator that glides under the hovered item and a shared dropdown panel that springs open, slides between triggers and cross-fades its sub-links and feature card.

A stacked toaster: notifications pile up with depth, fan out on hover or focus, auto-dismiss with pause-on-hover, swipe away sideways, and include success, error, and promise (loading → done) variants.

A headline accent that rolls through icons on a 3D cube flip instead of words — a static prefix followed by a tiled icon that turns over on an interval.

A dark payment card with chip, number, holder and expiry, whose warm glow follows the pointer with smoothing and an optional 3D tilt, settling back to a soft rest glow when the pointer leaves.

A row of numbered panels where the hovered or focused one expands, fills with the accent color, and reveals its title and description while the others narrow.

A round or square icon-only button with a floating label that springs in on hover or keyboard focus and a ripple that expands from the exact press point. Comes with solid, soft, outline and ghost variants and seven built-in inline icons.

An attached single-select button group (segmented control) whose active indicator springs between options, measured from the real button widths. Supports pill, solid and underline indicators and full arrow-key navigation.

Copies text to the clipboard while the copy icon spins into a self-drawing check mark and the label rolls to "Copied", then resets after a configurable delay. Optionally shows the copied value in an inline code field.

A group of pressable toggles (bold / italic / underline, alignment, or view switches) in single or multiple mode. Pressed items pop in a tinted fill with a spring, and in single mode the fill glides between items.

A like toggle whose heart squashes and pops as it fills, firing a shockwave ring and a burst of particles while the counter rolls to the next number. Works as a pill with a count, a ghost button, or a bare icon.

A primary action fused to a chevron that opens an animated menu of secondary actions. The chevron flips, the menu scales in from its anchored corner with staggered items, flips above the button when there is no room below, and can promote the chosen action into the primary slot.

A one-time-code field rendered as separate slots: characters spring into place as you type, the active slot glows with a blinking caret, pasting fills every slot at once, and a completed code flashes green.

A password field with an animated eye toggle, a four-segment strength meter that springs and recolors as you type, and a rule checklist whose check marks draw themselves in as each requirement is met.

A text box that turns entries into chips: Enter or comma adds a tag that pops in while its neighbours slide aside, Backspace arms then removes the last chip, duplicates shake the existing chip, and pasted comma lists are split automatically.

A minus/plus number stepper whose digits roll up or down like an odometer on every change, clamps to min/max/step, accelerates while a button is held, and supports arrow, Page and Home/End keys.

A single or dual-thumb slider with a gradient-filled track, thumbs that glide to keyboard steps and swell while dragged, and a value tooltip that springs up above the active thumb.

Selectable option cards that behave as a single radio group. The accent border springs from card to card and a check mark draws itself into the selected card's indicator.

A custom single-select built on the select-only combobox pattern: the listbox scales and fades out of the trigger, flips above it when there is no room, and draws a check next to the selected option. Supports typeahead, full keyboard navigation and disabled options.

A filterable autocomplete input: typing narrows a popover listbox, highlights the matched characters and shows an animated empty state when nothing matches. The popover scales out of the field, flips above it near the viewport edge, and marks the selected option with a check.

A drag-and-drop upload area that lifts and glows in the accent color while files hover over it, with a file list that springs new entries in, animates simulated upload progress, draws a check on completion and slides removed files out. Oversized files are rejected inline.

A star rating input that previews the score as you hover (down to half stars), springs the hovered star up, and pops the stars in sequence when a rating is committed. Works with arrow keys and has a read-only display mode.

A breadcrumb trail with chevron, slash, dot or arrow separators, an accent underline that sweeps in on hover, and long trails whose middle pages collapse into an animated ellipsis dropdown.

A modal side sheet that springs in from any edge of the viewport over a blurred backdrop, with a title, description, scrollable body and footer actions. Focus is trapped while open and restored to the trigger on close.

An overlapping stack of initials avatars with deterministic per-name gradients that cascade in, lift on hover and fan apart when the group is hovered or focused. Extra people collapse into an accent +N chip that expands the full list, with optional presence dots and name tooltips.

A compact status badge in six variants (default, secondary, outline, success, warning, destructive) that springs in on mount, with an optional pulsing status dot and a remove button that animates the badge out.

Page navigation with smart ellipsis truncation (boundary and sibling counts), Previous/Next buttons and an active-page indicator that springs from page to page. Works controlled or uncontrolled.

A horizontal or vertical multi-step progress indicator whose connectors fill with the accent color and whose step numbers morph into drawn check marks as you advance. Includes Back/Next demo controls and optional click-to-revisit for completed steps.

A vertically stacked set of disclosure sections that open with a smooth height animation and a spring-rotating chevron or plus icon. Supports single or multiple open items, separated, bordered or ghost styles, and controlled or uncontrolled state.

A mobile-style modal sheet that springs up from the bottom edge with a drag handle and snap points. Drag (with velocity projection) to resize between snaps or flick down to dismiss; the handle is also a keyboard-operable button.

A click-triggered floating panel with a pointing arrow that scales in from the trigger. Placement is measured against the viewport: it honours side and align, flips to the opposite side when there is no room and keeps the arrow pointed at the trigger.

A delayed preview card that springs out from a link on hover or keyboard focus, showing a user profile with avatar initials, name, bio, follower stats and join date. Open and close delays, side, alignment and a viewport collision flip are all configurable.

A delayed hover and keyboard-focus tooltip that fades and slides in from its side with a pointing arrow, measured placement and an automatic viewport flip. The demo shows a formatting toolbar with shortcut hints plus a labelled button.

A circular SVG progress indicator whose arc and center percentage tween smoothly to each new value, with an optional two-color gradient stroke, soft glow, rounded caps and a caption.

A dependency-free SVG bar chart card whose bars grow in with a staggered spring-like ease, with nice-rounded gridlines, an axis, value labels and a hover/keyboard tooltip. Vertical or horizontal, sized to its container via ResizeObserver.

A tiny SVG trend line that draws itself in, fills a fading gradient area and lands on a pulsing end dot. Hover or arrow keys scrub a cursor with a live value readout, shown as a KPI card or a bare inline chip.

A nested, file-explorer style tree whose folders expand and collapse with an animated height reveal and a rotating chevron. Supports single selection, indent guides and controlled or uncontrolled selection and expansion.

A vertical activity timeline whose events slide in one after another, each with a springy color-coded inline-SVG icon (commit, comment, deploy, merge, alert, star) and a connector line that draws down to the next event. Relative times are derived deterministically from minutes-ago values.

A GitHub-style calendar heatmap whose cells pop in along a diagonal wave, shaded in five intensity levels mixed from a single accent color. Includes month and weekday labels, a Less/More legend and a hover/keyboard tooltip, driven by seeded deterministic demo data or your own daily counts.

A before/after comparison slider with a draggable divider and round grab handle that clips one image over the other, split left/right or top/bottom. Plays a short hint sweep on mount and ships with built-in CSS gradient landscape scenes so it works without any images.

A right-click menu that scales in at the pointer inside a dashed target area, clamped and flipped to stay inside the viewport. It supports shortcut hints, separators, group labels, checkbox items with an animated check and a nested submenu, with full keyboard navigation.

A confirmation dialog for destructive or irreversible actions that scales in over a blurred backdrop with Cancel focused by default. Clicking the backdrop does not dismiss it; the panel gives a gentle pulse instead, so a decision is always explicit.

A spring-driven slide carousel with drag/swipe, previous/next arrows and pill dots whose active pill fills as the autoplay timer runs. Autoplay pauses on hover, focus and drag, can be stopped with a play/pause button, and optionally loops.

An app sidebar with grouped links, an accent pill that glides to the active item, count badges, and a toggle that springs the panel down to an icon rail.

A desktop-app style menubar (File, Edit, View, Profiles) whose menus fade and lift in, switch on hover once one is open, and support shortcuts, separators, disabled items, and checkbox items.

A loader where a shadow disc sweeps across a glowing moon, cycling crescent → new → crescent; optionally clipped to the moon for a crisp phase silhouette.

A labelled progress bar whose fill springs to each new value with a glowing leading edge, a sheen sweeping along it, and a percentage that counts with it.

Content placeholder blocks — an avatar, title lines, and body lines — with a soft shimmer band sweeping across every bar in sync.