Components
Every primitive in @kidcash/ui grouped by category. Click any to see its API, an example, and where it sits in the kit's design language.
Foundations
GlassCard
Multi-layer translucent React card with backdrop saturation, theme-aware glow, and an opt-in hover bloom. Built on Tailwind v4 + framer-motion.
Button
Four variants (primary, secondary, ghost, destructive) with framer-motion spring physics, a rotating conic-gradient hover trace, and per-theme primary gradients.
Pill
Six color variants (default, primary, success, warning, danger, gradient) × three sizes. Optional leading icon and removable close button.
Avatar
Single Avatar component handles image, initials, and emoji avatars. Optional progress ring, status dot, vibrant aurora surface, and AvatarStack for groups.
Skeleton
Three shapes (rect, circle, text). Subtle glass background plus a moving shimmer overlay that uses the active theme's shimmer color so it reads in light AND dark modes.
Keyboard
Tiny mono-font chip styled to read like a physical key. Pair them in shortcut hints — `⌘` `K`, `Esc`, etc.
Typography & motion
GradientText
Five preset palettes — aurora, sunset, forest, flame, animated — rendered via background-clip:text. Polymorphic via the `as` prop.
AnimatedNumber
Drives any displayed number with a requestAnimationFrame tween. Format-agnostic — pass `formatValue` to display currency, percentages, plain ints, anything.
Marquee
Children duplicated for a seamless loop, fade-edge mask, configurable speed, pause-on-hover. Drop-in for "as featured on" and brand strips.
Spotlight
Pure-CSS radial gradient that tracks the cursor across a card. Premium hover feel for hero sections, pricing cards, and key call-to-actions.
Confetti
Three intensities (subtle, normal, wild). Fires once on a key change, no persistent canvas, easy retrigger via key counter.
FloatingCoins
Three motion variants: rain, float, rise. 3D-ish flip, sway, depth-driven shadow per coin. Built on framer-motion.
FlyingMascot
Absolutely-positioned image that drifts across the viewport on a 10-second loop. Pair with KidCash mascots or your own brand character.
Inputs & feedback
Slider
Glass track, gradient fill, glowing thumb. Three variants: primary (aurora), success (green), flame (red/orange). Drop-in for `<input type=range>` controls.
ProgressBar
Apple-style fill on a glass track. Spring physics. Primary variant gets a flowing aurora gradient when `animate=true`.
EmojiPicker
Slide-up sheet with keyword search and 96 default emojis. Built on framer-motion, fully theme-aware.
Tooltip
Hover or focus to reveal. Glass-strong surface, configurable delay, four positions. Renders through `createPortal(document.body)` to escape any backdrop-filter ancestor.
Toast
ToastProvider + useToast hook. Glass-strong cards with a 4px gradient accent rail. Optional title, description, icon. Auto-dismiss with progress.
Overlays
Modal
Centered modal with spring entrance, optional title + description + close button. Renders through a body portal to escape backdrop-filter ancestors.
Sheet
Generic sheet that docks to any edge (top, right, bottom, left) with a spring slide-in. Drag-to-dismiss handle on bottom-docked sheets.
CommandPalette
The signature feature. Arrow-key navigation, Enter to select, Esc to close. Generic across actions, navigation, and search.
BackToTop
Floating up-arrow button that springs into the bottom-right corner once the user has scrolled past a threshold.
Family-finance specials
BirthdayCountdown
Three states (future, today, past) with an animated gradient on the live count and a celebratory state for "today". Built for birthdays, but works for any date.
AchievementBadge
Glass-card badge with locked/unlocked states, tier dots, and an aurora glow on unlock. AchievementBadgeGrid renders a responsive layout of many.
CelebrationOverlay
Heavy glass-strong backdrop, big bouncy emoji, animated-gradient title, confetti burst. The "you reached your savings goal" surface.