Spotlight-style command palette with live keystroke filtering, keyboard hint chips and grouped results. Backdrop blurs the page below for focus.
1function App() {
2 const [q, setQ] = React.useState("");
3 const all = [
4 { group: "Actions", icon: "M12 4v16m8-8H4", label: "New document", hint: "N" },
5 { group: "Actions", icon: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z", label: "Invite teammate", hint: "I" },
6 { group: "Actions", icon: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2", label: "Duplicate page", hint: "D" },
7 { group: "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", label: "Workspace settings", hint: "," },
8 { group: "Settings", icon: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z", label: "Toggle dark mode", hint: "T" },
9 { group: "Navigate", 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", label: "Go to dashboard", hint: "G+D" },
10 { group: "Navigate", 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", label: "Go to inbox", hint: "G+I" },
11 ];
12 const filtered = q.trim() === "" ? all : all.filter((x) => x.label.toLowerCase().includes(q.toLowerCase()));
13 const grouped = filtered.reduce((acc, it) => { (acc[it.group] = acc[it.group] || []).push(it); return acc; }, {});
14
15 return (
16 <section className="cmd-stage min-h-screen flex items-center justify-center px-4 py-12 relative overflow-hidden">
17 <span className="cmd-orb orb-a" />
18 <span className="cmd-orb orb-b" />
19 <div className="cmd-page-hint absolute inset-0 flex items-center justify-center text-white/15 font-black tracking-tight select-none" style={{ fontSize: "clamp(5rem, 14vw, 9rem)" }} aria-hidden="true">⌘K</div>
20
21 <div className="cmd-card relative w-full max-w-xl rounded-2xl overflow-hidden">
22 <div className="cmd-input-wrap flex items-center gap-3 px-4 py-3.5">
23 <svg className="w-4 h-4 text-slate-400 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
24 <input autoFocus type="text" value={q} onChange={(e) => setQ(e.target.value)} placeholder="Type a command or search…" className="flex-1 bg-transparent text-white text-[14px] outline-none placeholder-slate-500" />
25 <span className="cmd-kbd">esc</span>
26 </div>
27
28 <div className="cmd-results">
29 {Object.keys(grouped).length === 0 ? (
30 <div className="px-4 py-8 text-center text-slate-400 text-sm">No results for <span className="text-white font-semibold">"{q}"</span></div>
31 ) : (
32 Object.entries(grouped).map(([group, items]) => (
33 <div key={group} className="px-1.5 py-1.5">
34 <p className="px-3 py-1.5 text-[10px] font-bold uppercase tracking-[0.18em] text-slate-500">{group}</p>
35 {items.map((it, idx) => (
36 <button key={it.label} type="button" className={`cmd-item ${idx === 0 && group === Object.keys(grouped)[0] ? "is-active" : ""}`}>
37 <span className="cmd-item-icon"><svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d={it.icon} /></svg></span>
38 <span className="flex-1 text-left">{it.label}</span>
39 <span className="cmd-kbd">{it.hint}</span>
40 </button>
41 ))}
42 </div>
43 ))
44 )}
45 </div>
46
47 <div className="cmd-foot flex items-center justify-between gap-3 px-4 py-2.5">
48 <div className="flex items-center gap-2 text-[11px] text-slate-400">
49 <span className="cmd-kbd-mini">↑</span>
50 <span className="cmd-kbd-mini">↓</span>
51 <span>navigate</span>
52 <span className="text-slate-600">·</span>
53 <span className="cmd-kbd-mini">↵</span>
54 <span>select</span>
55 </div>
56 <span className="inline-flex items-center gap-1 text-[10.5px] font-semibold text-slate-400">
57 <span className="cmd-logo-dot" /> Powered by Atlas
58 </span>
59 </div>
60 </div>
61 </section>
62 );
63}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.
Three-plan pricing layout with a monthly/yearly toggle. Price values cross-fade with a slide animation, popular plan glows, yearly savings banner.
Click the trigger — a success modal animates in with a pure-CSS confetti burst. Modal eases up, confetti pieces fall from above the viewport.
Trending now
Trending Bootstrap snippets from the classic library.
Immerse in a modern audio experience with our neumorphic music player, featuring a dynamic waveform scrubber and interactive queue visuals.
Revolutionize your AI interactions with this stunning, neon-infused chat interface. With dynamic status indicators and orbital animations, it captivates and informs.
Craft seamless schedules with an elegant neumorphic interface where you can drag and select time ranges effortlessly in a futuristic calendar view.
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
Card Grid Layout
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.