Animated theme switch with morphing sun → moon icon and a full-page palette transition. Click anywhere on the switch to toggle the demo card's vibe.
1function App() {
2 const [dark, setDark] = React.useState(false);
3 return (
4 <section className={`theme-stage ${dark ? "is-dark" : "is-light"} min-h-screen flex items-center justify-center px-4 py-12 relative overflow-hidden transition-colors duration-700`}>
5 <span className="theme-sky theme-sky-day" />
6 <span className="theme-sky theme-sky-night" />
7 <span className="theme-stars" aria-hidden="true">
8 {Array.from({ length: 28 }).map((_, i) => (
9 <span key={i} className="theme-star" style={{ "--x": (i * 37 % 100) + "%", "--y": (i * 53 % 100) + "%", "--d": (i % 5) + "s" }} />
10 ))}
11 </span>
12
13 <div className="relative w-full max-w-md">
14 <div className="theme-card rounded-3xl p-7 shadow-2xl">
15 <div className="flex items-center justify-between mb-6">
16 <div>
17 <span className="theme-pill text-[10.5px] font-bold uppercase tracking-[0.18em]">Preferences</span>
18 <h2 className="theme-title font-bold text-xl mt-2 leading-tight">Appearance</h2>
19 </div>
20 <button type="button" role="switch" aria-checked={dark} onClick={() => setDark((v) => !v)} className={`theme-switch ${dark ? "is-on" : ""}`}>
21 <span className="theme-switch-knob">
22 <svg className="theme-icon theme-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><circle cx={12} cy={12} r={4} /><path strokeLinecap="round" strokeLinejoin="round" d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41m11.32-11.32l1.41-1.41" /></svg>
23 <svg className="theme-icon theme-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" /></svg>
24 </span>
25 </button>
26 </div>
27 <p className="theme-body text-[13.5px] leading-relaxed mb-6">Toggle between light and dark — the whole page palette transitions in 700ms. Stars fade in for night, soft clouds drift away for day.</p>
28 <div className="theme-tile rounded-2xl p-5 flex items-center gap-3">
29 <span className="theme-tile-icon"><svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg></span>
30 <div>
31 <p className="theme-tile-title font-semibold">Current mode</p>
32 <p className="theme-tile-sub text-[12px]">{dark ? "Dark · easier on the eyes after sunset." : "Light · best for daytime reading."}</p>
33 </div>
34 </div>
35 </div>
36 </div>
37 </section>
38 );
39}Compact music player with album art, animated equaliser bars, scrubber, elapsed/remaining time and play controls. Pure CSS keyframes drive the EQ pulse and the neon ring around the album art.
Three-step onboarding wizard with an animated progress bar, slide-fade panel transitions and contextual hints. Forward / back nav and completion celebration.
Floating action button that fans out four sub-actions in a radial arc on click. Tap rotates the plus icon to a close icon; each action chip eases in.
Interactive React stats panel on an aurora gradient. Click to randomise the three live counters — each animates a pulse ring driven by custom CSS keyframes, with hover glow on the card edges.
Animated drop zone with drag-over glow, queued file thumbnails, per-file progress bars that auto-fill, and a successful-state checkmark. Click "Browse" or drop files anywhere on the zone.
Bold 404 page with a giant gradient numeral, floating planets, twinkling starfield and a primary CTA back to safety. Pure CSS animation.
Hundreds of production-ready Bootstrap 5 snippets — cards, navbars, dashboards, pricing tables, modals. Live preview, one-click HTML download with the CDN pre-wired, MIT licensed.
546
Snippets
2629.8k
Views
86.3k
Downloads
Trending now
Trending Bootstrap snippets from the classic library.
Card Grid Layout
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.