# showcase/

The kit's gallery — one page per component, plus the tokens, icons and Figma-parity
pages. It is a plain Vite + React + TypeScript app, the same shape
`npm create vite@latest` produces, and it builds to a static site you can host
anywhere.

## Why there is no `package.json` here

Because there is nothing for it to hold. The showcase has no dependency of its
own — it runs on the kit's `node_modules`, and its scripts live in the kit's
`package.json` so that one `install` at the kit root sets up everything.

That is also what keeps it correct. The showcase imports the kit from **source**
(`@` → `../src`, see `vite.config.ts`), so a second `node_modules` here would
mean two copies of React in one tree: the kit's components would use one, the
pages rendering them the other, and every hook would throw. One install, one
React.

## Commands — all run from the kit root, not from here

| | |
| --- | --- |
| `pnpm dev` / `pnpm showcase` | dev server on <http://localhost:5175> |
| `pnpm showcase:build` | static site → `showcase/dist` |
| `pnpm showcase:preview` | serve that build on <http://localhost:5176> |
| `pnpm typecheck` | includes `tsc -p showcase/tsconfig.json` |
| `pnpm lint` | `eslint .` covers `showcase/**` too |

`pnpm build` is the *library* build (`dist/`, what you publish to npm) and has
nothing to do with this folder. Deploying the site — GitHub Pages, Vercel,
Netlify, a sub-path via `SHOWCASE_BASE` — is §4c of the kit's `README.md`; a
ready-made Pages workflow ships at `.github/workflows/showcase-pages.yml`.

## Two things that look misplaced and are not

**`src/showcase.css` declares the showcase's Tailwind `@source`, not
`../../src/styles/globals.css`.** `scripts/build-css.mjs` feeds globals.css to
the Tailwind CLI to produce the published `dist/styles.css`, so a glob added
there would ship showcase-only utilities to every consumer of the kit.

**`src/registry/props.generated.json` and `src/registry/figma-spec.json` are
generated** — by `pnpm props:gen` (asserted fresh by `pnpm verify`) and
`pnpm figma:spec` respectively. Edit the generators, not these files.