A search bar that opens into a ⌘K palette: groups, keyboard, and one highlight that travels.
The prompt30,384 characters
Add the "Command" component from notboring to my project.
It is licensed for use in my projects — notboring.dev/license. Please:
1. Create the component at a sensible path for this
project, named Command, from the source below.
2. Install what it needs: npm i lucide-react
3. Add the CSS to the project's stylesheet.
4. THE PART THAT NEEDS YOUR JUDGMENT. The CSS reads
these custom properties and does not define them:
--card
--font-ui
--ink
--ink-2
--ink-3
--ink-4
--ink-rgb
They are notboring's design tokens. Map each one to
whatever this project already uses for the same
job — its own ink, ground, surface and UI font —
rather than defining them as new globals. If the
project has no equivalent, define it locally on
the component's own root so nothing leaks out.
Anything ending -rgb wants three bare numbers,
because the CSS builds rgba() from it.
Keep the comments. They say why the numbers are what
they are, and they are most of what makes this worth
copying rather than rewriting.
--- Command.tsx ---
import { useEffect, useId, useRef, useState } from "react";
import { FileText, Home, Moon, Plus, Settings, Users, type LucideIcon } from "lucide-react";
/* ══ Command ══════════════════════════════════════════════
A search bar first, and a ⌘K palette second.
IT IS SHUT UNTIL YOU ASK. At rest this is the field a site
keeps in its header: one pill, a lens, "Search…", and the
shortcut at the far end. It was open the whole time — six
rows under a field on a wall of blocks — which is a picture
of a palette rather than a palette. Press it, or ⌘K, and it
OPENS: the list unfolds beneath the field, the pill's corner
tightens to a card's, and the rule between them appears —
all read off one number, so the shape is one shape at
every frame of the way.
ONE HIGHLIGHT, NOT A HOVER STATE PER ROW. Six rows each
with a background that fades in under the pointer are six
events, and a list whose highlight blinks from row to row
reads as six buttons stacked. One element that SLIDES —
across group boundaries, past the labels, wrapping from the
bottom back to the top — reads as a single cursor with six
positions, which is what a palette's selection is. The
keyboard and the pointer both move the same element, so
The rest — the source and its comments — is what you are buying.