KidCash UI
Liquid glass. Spring physics. Apple-grade craft. Free and open source.
Press ⌘ K to open the command palette
Theme
Nine themes — six dark, three light. Click any card to apply it; the choice persists in localStorage.
Buttons
Spring-tap physics. Four variants, three sizes. Works with icons and async states.
primary
secondary
ghost
destructive
Glass cards
Multi-layer translucency. Three modes — calm by default, hover bloom, or a pinned halo. Pick a glow color to recolor the demos live.
Calm
Subtle surface
40px blur, 5% white tint, inset highlight. Sits quietly on top of the background.
<GlassCard />
Hover
Bloom on hover
Hover anywhere on the card. The halo eases in over ~500ms, then drifts out when you leave.
<GlassCard variant="strong" hoverGlow="primary" />
Pinned
Always-on halo
Use sparingly — one or two per screen. Pin it on a hero surface, celebration, or key call-to-action.
<GlassCard variant="strong" glow="primary" />
Gradient text
Five preset palettes, including an animated drift. Background-clipped, transparent fill.
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
Animated number
easeOutExpo tween via rAF. Tabular numerals, format-agnostic — drives currency and plain numbers alike.
Currency
$1,234.56Plain number
42Confetti
One-shot canvas burst. Pick an intensity to fire it.
Floating coins
Full-viewport overlay. 3D-ish flip, sway, and depth-driven shadow per coin.
Progress bar
Apple-style fill on a glass track. Spring-tweened. Primary variant gets a flowing aurora gradient when animate=true.
Toast
Glass-strong cards with a 4px gradient accent rail. Optional title + description.
Emoji picker
Bottom-sheet selector with keyword search and 96 default emojis.
Back to top
Scroll up after a long page — appears in the bottom-right corner.
Scroll the page; once you cross 400px the up-arrow button springs in.
Achievement badges
Glass-card grid with locked/unlocked states, glow, and tier dots.
Birthday countdown
Three states: future, today, past. Animated gradient on the live count.
Birthday today!
A very special day.Celebration overlay
Heavy glass-strong backdrop, big bouncy emoji, animated-gradient title, confetti burst.
Pill
Tags / chips / status pills. Six variants × three sizes. Optional icons + remove button.
Variants × sizes
With leading icon
Removable
Tooltip
Hover or focus to reveal. Spring entrance, glass-strong surface, 300ms default delay.
Skeleton
Loading placeholders. Subtle glass background plus a moving shimmer overlay.
rect
circle
text · 3 lines
Sheet
Generic iOS-style overlay. Docks against any edge with a spring slide-in.
Slider
Apple-style range. Glass track, gradient fill, glowing thumb. Three variants.
Avatar
One avatar primitive — image, initials, or emoji. Optional progress ring, status dot, vibrant aurora surface, and overlapping AvatarStack.
Sizes & statuses (initials)
Emoji avatars · ring · vibrant
Stack of 6 (max=4)
Command palette
The signature feature. Cmd+K (or Ctrl+K) anywhere to open. Arrow keys, Enter to select, Esc to close.
Modal
Generic centered modal. Glass-strong panel, spring entrance, optional title + description + close button.
Keyboard
Tiny keyboard chips for shortcut hints. Mono font, glass background, inset shadow so they read like physical keys.
Marquee
Infinite horizontal scroll. Children duplicated for a seamless loop. Pause on hover, fade-edge mask, configurable speed.
Spotlight
Mouse-following radial highlight. Hover the card and a soft glow tracks the cursor — premium feel, pure CSS gradient.
Hover anywhere on this card
The cursor lights it up.
Use Spotlight on hero sections, pricing cards, or anywhere you want a little extra polish. It works great over glass surfaces.