Builder UI
2026 06 10 lowkey styleguide
2026 06 10 lowkey styleguide design
2026 06 10 lowkey styleguide inventory
Claude
Credits gadget manual tests
Delay wrapper
Getting Started
Plt 2251 workflow validation
Readme
Developer
FAQ
UI
Icons

Lowkey Living Styleguide

A dev-only reference page showing the lowKey UI components (buttons, inputs, selects, tables, modals, tooltips, field/rich-text views, etc.) as they actually render in this app, so we can eyeball them in one place.

Viewing it

The styleguide is a dev-only route (added only when import.meta.env.DEV, see app/src/routes.jsx). With the dev server running, open:

https://local.kualibuild.com/styleguide        # inside the container
https://local.kualibuild.com:4001/styleguide    # from the host

It is not built into production.

Structure

  • index.jsx — page entry; assembles the sections and sets the data-styleguide-ready flag once mounted.
  • section.jsx — shared section wrapper (heading + layout).
  • sections/*.jsx — one file per component section (e.g. buttons.jsx, text-input.jsx, select.jsx, table.jsx, modal.jsx, tooltip.jsx, field-label.jsx, rich-text-view.jsx, …). Add a new section by creating a file here and registering it in index.jsx.

lowkey-components.html — the static snapshot

lowkey-components.html is a generated, self-contained HTML snapshot of the rendered /styleguide page. It's committed so designers/devs can open the component reference without running the app (and to diff visual changes over time). Component styles are inlined; web fonts/images keep their origin URLs.

  • Do not hand-edit it and do not copy styles out of it — it's generated.
  • Source of truth for the styles is app/src/app.css (the .lowkey / .lowkey-forms blocks), app/src/ui/, and tailwind.config.js.
  • It is excluded from Prettier (see .prettierignore) so it isn't reformatted.

Regenerating the snapshot

With the dev server running, from the builder-ui repo root:

# inside an af container (chromium preinstalled)
node scripts/export-styleguide/index.mjs


# on a host with Google Chrome
PW_CHANNEL=chrome node scripts/export-styleguide/index.mjs https://local.kualibuild.com:4001/styleguide

By default it writes back to this file (app/src/pages-builder/styleguide/lowkey-components.html). Pass a URL and/or an output path as args to override. Login defaults to kualiadmin / admin for local dev (override with KUALI_USER / KUALI_PASS). Commit the refreshed snapshot alongside any component/style change so it stays current.