# ui-kit

UI Elements Live preview

Notification Toast Stack

Four-toned toasts (success/info/warn/error) that spring in from the right with progress bars and auto-dismiss.

29600Open

Keyboard shortcut legend with kbd chips

A settings/help panel listing shortcuts with glossy 3D keyboard key chips — JetBrains Mono, fuchsia glyphs.

27600Open

Frosted glass directional tooltips

Blurred glass tooltips with an arrow notch pop in above or below buttons on hover, spring easing.

28700Open

Spring sliding segmented control

iOS-style segmented tabs where the gradient indicator springs between options and resizes itself.

30500Open

Focus-glow email capture input

Input that ignites with a fuchsia ring, top light spill and tinted background on focus, plus a gradient CTA.

31200Open

Floating label inputs

Labels rise, shrink and turn cyan when the field focuses or has content — classic material-style form polish.

34200Open

Overlapping avatar stack

Initials avatars overlap with negative margin; hovering lifts and enlarges one above the rest, +N chip at the end.

31100Open

Selectable pricing radio cards

Plan picker where whole cards are radio targets — checked card gets a gradient border, filled tick and glow.

35600Open

Add/remove tag chips input

Tag field: chips pop in with a spring, ✕ removes with a scale-out; type and Enter to add new slug-style tags.

32400Open

Featured Components Live preview

Toast notification stack

Spring-in glass toasts (success/info/warn) slide in from the bottom-right, auto-dismiss with slide-out, closable.

40900Open

Sliding underline tabs

Gradient underline springs between tabs with width+left animation; output line reflects the active tab.

31800Open

Animated empty state

Friendly empty-state block with counter-rotating dashed orbit rings and a pulsing star, plus a CTA button.

28300Open

Accordion FAQ with plus/minus marker

Smooth <details>/<summary> accordion whose plus icon morphs into an x when open — no JS required.

37100Open

Day/night sliding toggle switch

iOS-style switch with a springy knob carrying the icon, track recolors sky-blue by day and deep space at night.

35600Open

Breadcrumb with chevron separators

Simple accessible breadcrumb trail: dim ancestors with cyan hover, fuchsia chevrons, bold current page.

21400Open

Underline sweep nav links

Gradient underline grows from the left on hover while the label brightens — one-pseudo-element nav polish.

28900Open

Sliding Indicator Tabs · Rose Gold

Tabs with a gradient pill indicator that slides and resizes to the active tab, content cross-fading. Rendered in the Rose Gold palette.

19200Open

Sliding Indicator Tabs · Ocean Sky

Tabs with a gradient pill indicator that slides and resizes to the active tab, content cross-fading. Rendered in the Ocean Sky palette.

64000Open

Sliding Indicator Tabs · Mint Breeze

Tabs with a gradient pill indicator that slides and resizes to the active tab, content cross-fading. Rendered in the Mint Breeze palette.

84000Open

Sliding Indicator Tabs · Candy Pink

Tabs with a gradient pill indicator that slides and resizes to the active tab, content cross-fading. Rendered in the Candy Pink palette.

68000Open

Sliding Indicator Tabs · Royal Gold

Tabs with a gradient pill indicator that slides and resizes to the active tab, content cross-fading. Rendered in the Royal Gold palette.

34800Open

Sliding Indicator Tabs · Crimson Heat

Tabs with a gradient pill indicator that slides and resizes to the active tab, content cross-fading. Rendered in the Crimson Heat palette.

82000Open

Sliding Indicator Tabs · Deep Indigo

Tabs with a gradient pill indicator that slides and resizes to the active tab, content cross-fading. Rendered in the Deep Indigo palette.

76900Open

Sliding Indicator Tabs · Aurora Teal

Tabs with a gradient pill indicator that slides and resizes to the active tab, content cross-fading. Rendered in the Aurora Teal palette.