LowkeyUI Styleguide — Component Inventory

Produced by the Task 2 discovery sweep (2026-06-10). Status meanings:

source-confirmed — real source file located during the sweep
verify-at-build — seeded from the old HTML doc; plausible but source/details confirmed at build time (recipe step 1)
suspect — no source found in the sweep; likely hallucinated in the old doc. Verified at build time and dropped if nothing real exists.
new — real component the old HTML doc missed

Sweep facts worth keeping:

The lowkey: Tailwind variant (tailwind.config.js:268) has zero usages in JSX — all lowkey styling flows through app.css selectors and flag checks (lowKeyUi / lowKeyForms from components/feature-flags).
Legacy pre-lowkey classes still exist in app.css (kp-button-brand, kp-button-solid, kp-button-danger, kp-modal, kp-modal-full, kp-button-lg); the styleguide must not present them as lowkey.
.lowkey/.lowkey-forms go on <html> via app/src/index.jsx:82-86.

Build queue

#	Section	Kind	Source(s)	Status
1	Buttons (all variants + modifiers)	atom	app.css:234-378	source-confirmed (Task 3)
2	Text input	atom	app.css:384-386, 429-431 (`kp-input`)	source-confirmed
3	Textarea	atom	app.css:380-382, 433-435 (`kp-textarea`)	source-confirmed
4	Select + select-transparent	atom	app.css:388-398, 437-441 (`kp-select`)	source-confirmed
5	Input group (icons L/R, button-right, active)	atom	app.css:400-426, 521-531 (`kp-input-group`)	source-confirmed
6	Checkbox + indeterminate	atom	app.css:506-513; ui/checkbox.jsx; ui/indeterminate-checkbox.jsx	source-confirmed
7	Radio	atom	app.css:516-518; ui/radios.jsx	source-confirmed
8	Field label + required	atom	app.css:501-503 (`kp-label`), app.css:230-232 (`kp-required`)	source-confirmed
9	Field view (read-only)	atom	app.css:444-463 (`kp-field-view`)	source-confirmed
10	Rich text view	atom	app.css:466-479 (`kp-rich-text-view`)	source-confirmed
11	Datepicker (input group + popup)	atom	components/temporal-pickers.jsx; app.css:534-539	source-confirmed
12	Toggle	atom	ui/toggle.jsx	new
13	Segmented control	atom	ui/segmented-control.jsx	source-confirmed (old doc called it "button group")
14	Link	atom	`kp-link` (app.css)	new
15	Badge	atom	`kp-badge` (app.css); status pills verify-at-build	source-confirmed
16	Chip (lookup value)	atom	`kp-chip` (app.css); ui/lookup.jsx	source-confirmed
17	Table	atom	`kp-table`, `kp-table-clickable` (app.css)	source-confirmed
18	Avatar / abbreviation icon	atom	components/abbreviation-icon.jsx	source-confirmed
19	Spinner	atom	components/spinner.jsx	source-confirmed
20	Skeleton	atom	ui/shadcn/skeleton.tsx	new
21	Separator	atom	ui/shadcn/separator.tsx	new
22	Tooltip	atom	ui/tooltip.tsx; components/tooltip (provider in root-layout)	source-confirmed
23	Tabs	atom	ui/tabs.jsx	source-confirmed
24	Alerts (types 1/2/3: modal-style, inline, toast)	molecule	ui/alerts.jsx (AlertsProvider, useAlerts)	source-confirmed
25	Banner (header notice)	molecule	components/header-layout.jsx, home-layout.jsx	verify-at-build
26	Info box / config box	molecule	ui/info-box.jsx; ui/config-box.jsx	new
27	Popover / dropdown menu	molecule	ui/popover.jsx; ui/shadcn/popover.tsx; ui/shadcn/dropdown-menu.tsx	source-confirmed
28	Pop-up (modal/dialog)	molecule	ui/pop-up.jsx	source-confirmed
29	Side panel	molecule	`kp-modal-side` + `kp-slide-right` (app.css:569-571); ui/shadcn/sheet.tsx	source-confirmed
30	Pulse badge	atom	`kp-pulse-badge-before/-after` (app.css)	source-confirmed
31	Drag handle / reorderable list	molecule	components/reorderable-list.jsx	source-confirmed
32	Search bar	molecule	components/search-bar.jsx; components/data-table/search-bar.jsx	source-confirmed
33	Data-table controls (columns button, popover button)	molecule	components/data-table/columns-button.jsx, popover-button.jsx	source-confirmed
34	Section card (odd/even depth, header, collapse)	molecule	app.css:542-566, 617-647 (`lkf-section*`); formbot section gadget	source-confirmed
35	Workflow tracker / step pill	molecule	pages-runner/action/workflow-tracker/	source-confirmed
36	Document list row	molecule	pages-builder/document-list/	verify-at-build
37	User menu	molecule	components/user-menu.jsx	source-confirmed
38	Pages nav	molecule	components/pages-nav/index.jsx	source-confirmed
39	Sidebar (dark + light maintenance variant)	organism	components/sidebar/index.jsx; app.css:574-594 (`lowkey-sidebar-light`); ui/shadcn/sidebar.tsx	source-confirmed
40	Modal with field form + footer actions	molecule (composition)	ui/pop-up.jsx + form atoms	composition — build from confirmed atoms
41	Card/section with labeled fields (view + edit)	molecule (composition)	lkf-section + kp-label/kp-input/kp-field-view	composition
42	Table with mixed gadget cells	molecule (composition)	kp-table + formbot gadget cell rules (app.css:481-498)	composition
43	Filter bar (input group + select + button)	molecule (composition)	confirmed atoms	composition
44	Layout: app shell (sidebar + main)	layout	components/app-layout.jsx	source-confirmed
45	Layout: header layout (dark top bar)	layout	components/header-layout.jsx	source-confirmed
46	Layout: form builder 3-panel	layout	pages-builder/form/index.jsx (config panel `lg:w-[350px]` + canvas + props)	verify-at-build
47	Layout: runner 1-panel (formbot container page)	layout	components/formbot-container/	source-confirmed

Dropped / reclassified from the old HTML doc

Old doc section	Disposition
Sticky header (31) / Action bar (32)	No standalone component found; these are aspects of formbot-container / form pages. Folded into layouts #45-47; verified there.
Compare-changes popup (33)	No source found in sweep — suspect. One build-time search (document compare / version diff screens); dropped if nothing real.
Button group (12)	Reclassified → segmented control (ui/segmented-control.jsx), #13.
Field spinner (in 34)	Verify within #19 spinner section; drop if not a real pattern.
All `lkf-btn-*` class names & stone-colored primary palette	Hallucinated; real names are `kp-*`, real primary is `var(--primary, #0c4a6e)` with `hover:bg-sky-950`.

Checked off as built; statuses updated at each section's build step.