Themes
React Theme Components
Theme controls, color-mode toggles, and design-token surfaces for React apps. Each component is a self-contained TypeScript file styled with Tailwind that installs by copy-paste or CLI. They ship accessible controls and stay motion-free where motion would distract.
A self-contained neo-brutalist theme preset — a flat white card with hard 3px black borders, a solid blur-free offset drop-shadow, chunky mono type, a loud accent block, a stat, a rotated corner sticker, and two buttons. Interactive blocks do the classic brutalist nudge toward their shadow on hover and press. A keyboard-operable radiogroup of accent swatches re-tokens the whole panel live; the palette is fully exposed via presets and colors. Pure CSS — reduced motion pins every block to its raised resting pose.
A self-contained glossy-magazine theme preset — a single-column feature with a small-caps kicker and issue rule, a high-contrast serif display headline, an italic standfirst, a small-caps byline, a drop-cap opening, a hairline-barred pull-quote, and a pair of buttons, all breathing in generous whitespace with one disciplined ink accent. A keyboard-operable radiogroup of surface chips re-tokens the whole page live (warm Ivory, cool Slate, dim night-reading Ink); the only motion is a soft CSS color crossfade on switch, and reduced motion makes every swap instant and fully static.
A print / newspaper theme preset: a warm-newsprint editorial panel with a serif masthead, a red section kicker, folio rules, a spanning headline with an italic deck, a small-caps byline, justified body columns with column rules and a drop-cap, and a genuine halftone-dot photo. The switcher cycles editions, swapping content and paper tone (cream / gray / sepia) with a soft page crossfade. ARIA tablist over a tabpanel; reduced motion swaps instantly.
A self-contained glassmorphism theme preset — a frosted, translucent panel with a white top-edge highlight, soft inner glow, and 1px light border floating over a soft, vibrant blurred gradient ground that shows through, with nested glass chips for layered depth. A keyboard-operable radiogroup of mood chips re-tints the ground and accents live (Aqua / Violet / Peach) while the frost stays; reduced motion pins the drifting orbs to a calm static frosted frame.
A day/night theme switch built as a miniature diorama: the sun sets and the moon rises along a shallow arc, the sky crossfades through dusk, clouds drift out, and stars ignite staggered once the moon seats. A real role=switch with keyboard toggle; controlled or uncontrolled.
A self-contained Swiss-minimal theme preset — a stark black-and-white (or paper-and-ink) panel on a strict grid: tight neo-grotesque heading, numbered hairline spec rows, generous negative space, and exactly one restrained accent. A keyboard-operable radiogroup of accent swatches re-tokens the panel live and a role=switch flips light/dark; the palette is fully exposed via accents and colors. The only motion is an accent rule that draws across the top, pinned to its full frame under reduced motion.
A self-contained cyberpunk theme preset: electric accents on near-black, thin CRT scanlines, condensed monospace type, and hard-edged HUD chrome with corner brackets. A seeded, subtle glitch tears the heading into a chromatic split, and a built-in radio switcher swaps the accent between yellow, cyan, and magenta. Reduced motion drops the glitch for a clean static HUD.
A self-contained soft-pastel theme preset — a generously rounded card with heading, body, stat, tag, and buttons in a low-contrast candy palette over a dreamy tinted gradient, with soft shadows, drifting color orbs, and optional grain. A keyboard-operable radiogroup of hue chips (Mint / Peach / Lavender / Sky) re-tokens the whole panel live; the orbs pin to a calm static pose under reduced motion.
A themed panel styled as a monochrome CRT monitor: a dark vignetted screen with glowing selectable monospace text, fine scanlines, a slow refresh-bar roll, and a blinking block caret. The built-in switcher recoats the tube between amber, green, and paper-white phosphor. Pure CSS; reduced motion holds a steady glow.
A self-contained synthwave theme preset — card, buttons, stat, and tag in hot-magenta → cyan neon on deep indigo, with a sunset gradient, a scanlined sun rising over a perspective grid, and a chrome-italic display heading. A keyboard-operable radiogroup of vibe chips re-tokens the whole panel live; every glow pins to a bold static frame under reduced motion.