Dashboard-style sidebar that smoothly collapses from a 240px expanded state to a 64px icon rail. Active item glow, hover highlight, group separators.
1function App() {
2 const [open, setOpen] = React.useState(true);
3 const [active, setActive] = React.useState("inbox");
4
5 const groups = [
6 {
7 title: "Workspace",
8 items: [
9 { id: "overview", label: "Overview", icon: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" },
10 { id: "inbox", label: "Inbox", icon: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z", badge: 12 },
11 { id: "calendar", label: "Calendar", icon: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" },
12 { id: "files", label: "Files", icon: "M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" },
13 ],
14 },
15 {
16 title: "Team",
17 items: [
18 { id: "people", label: "People", icon: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" },
19 { id: "channels", label: "Channels", icon: "M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z", badge: 3 },
20 { id: "settings", label: "Settings", icon: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065zM15 12a3 3 0 11-6 0 3 3 0 016 0z" },
21 ],
22 },
23 ];
24
25 return (
26 <section className="side-stage min-h-screen flex relative overflow-hidden">
27 <span className="side-orb orb-a" />
28 <aside className={`side-rail ${open ? "is-open" : ""}`}>
29 <div className="side-brand">
30 <span className="side-logo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg></span>
31 <span className="side-brand-name">Atlas</span>
32 <button type="button" onClick={() => setOpen((v) => !v)} className="side-toggle" aria-label="Toggle sidebar">
33 <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d={open ? "M11 19l-7-7 7-7m8 14l-7-7 7-7" : "M13 5l7 7-7 7M5 5l7 7-7 7"} /></svg>
34 </button>
35 </div>
36 <nav className="flex-1 overflow-hidden mt-2">
37 {groups.map((g, gi) => (
38 <div key={g.title} className={gi === 0 ? "" : "mt-5"}>
39 <p className="side-group-title">{g.title}</p>
40 {g.items.map((it) => (
41 <button key={it.id} type="button" onClick={() => setActive(it.id)} className={`side-link ${active === it.id ? "is-active" : ""}`}>
42 <span className="side-link-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d={it.icon} /></svg></span>
43 <span className="side-link-label">{it.label}</span>
44 {it.badge && <span className="side-link-badge">{it.badge}</span>}
45 </button>
46 ))}
47 </div>
48 ))}
49 </nav>
50 <div className="side-user">
51 <span className="side-avatar">RD</span>
52 <div className="side-user-meta">
53 <p className="text-white text-[12.5px] font-semibold leading-tight">Riya D.</p>
54 <p className="text-slate-400 text-[10.5px]">Owner</p>
55 </div>
56 </div>
57 </aside>
58
59 <main className="flex-1 p-8 sm:p-10 relative">
60 <p className="text-[11px] uppercase tracking-[0.18em] font-bold text-cyan-300/85 mb-2">Inbox</p>
61 <h1 className="text-white font-bold leading-tight tracking-tight mb-4" style={{ fontSize: "clamp(1.75rem, 4vw, 2.25rem)" }}>Good morning, Riya</h1>
62 <p className="text-slate-300/70 text-sm max-w-lg mb-7">12 unread conversations, 3 mentions, 1 task due today. The sidebar collapses with a smooth 280ms transition — try the arrow button.</p>
63 <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
64 {["Replies", "Mentions", "Followed"].map((t) => (
65 <div key={t} className="side-tile rounded-2xl p-4">
66 <p className="text-[10.5px] uppercase tracking-[0.14em] font-bold text-slate-400 mb-2">{t}</p>
67 <p className="text-white font-black text-3xl">{t === "Replies" ? 24 : t === "Mentions" ? 7 : 13}</p>
68 <p className="text-emerald-300/85 text-[11px] font-semibold mt-1">+{(t === "Replies" ? 12 : 8)}% this week</p>
69 </div>
70 ))}
71 </div>
72 </main>
73 </section>
74 );
75}
Bold 404 page with a giant gradient numeral, floating planets, twinkling starfield and a primary CTA back to safety. Pure CSS animation.
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.
Three-step onboarding wizard with an animated progress bar, slide-fade panel transitions and contextual hints. Forward / back nav and completion celebration.
macOS-style terminal mockup with auto-playing typewriter lines, syntax-coloured tokens, and a blinking caret. Pure CSS animation timing.
Three iridescent stat cards with a slowly rotating conic-gradient sheen, sparkline preview and a delta badge. Drop-in for any dashboard hero.
Three-plan pricing layout with a monthly/yearly toggle. Price values cross-fade with a slide animation, popular plan glows, yearly savings banner.
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.
517
Snippets
2629.2k
Views
86.2k
Downloads
Card Grid Layout
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.