Installation

Start a Tessera project, then add the components you want. Each one is copied into your project.

1. Create a project

   Skip this if you already have one.

   npmpnpmyarnbun

   npm create @pixelscriptio/tessera@latest

   pnpm create @pixelscriptio/tessera@latest

   yarn create @pixelscriptio/tessera

   bun create @pixelscriptio/tessera@latest

   Choose the tailwind preset for Tailwind's colors and spacing, or unstyled for a blank page to design on.

2. Add a component

   npmpnpmyarnbun

   npx @pixelscriptio/tessera add Button

   pnpm exec tessera add Button

   yarn tessera add Button

   bunx @pixelscriptio/tessera add Button

   It goes in system/components with its docs file, and brings the components it uses. What it installed is recorded in tessera.lock.json. If the name is taken it asks whether to replace yours or add the new one under another name (--replace, --as). --diff shows what would change, and --list shows what is here.

3. Make the tokens fit

   Before it writes a component, add compares the tokens the component uses with each design system in your project, and reports the ones that are missing or of the wrong type. Three ways to fix it:

   • --fit add writes the missing tokens, with values to start from, in a file of their own.
   • --map color.action.primary.bg=color.brand.bg rewrites the component to use a token you already have.
   • --fit set installs a whole token set (tokens:tailwind) as another design system.

4. Check it

   npmpnpmyarnbun

   npx @pixelscriptio/tessera check

   pnpm exec tessera check

   yarn tessera check

   bunx @pixelscriptio/tessera check

   Afterwards add runs this on what it wrote. tessera a11y --system all sets up the generated accessibility tests, which cover the components in every design system.