# swatchbook A tiny (`~2.5 kB` min+gzip, zero-dependency) `` web component that presents design variants **one at a time as a carousel**, instead of stacking them down the page. Drop in one script, wrap your candidate designs, and flip between them with arrows, dots, or the keyboard. It's built for **reviewing block/section design options** — put two or three candidate heroes (or pricing tables, or CTAs) side-by-side-in-time and click through them. Because it's a plain custom element, it works in **any** stack: Astro, React, Vue, Svelte, or hand-written HTML. ```html

…candidate A…

…candidate B…

…candidate C…

``` The whole idea in one line: **the script's presence is the switch.** Include it and you get a carousel to review options; omit it (e.g. in production) and the book collapses to your chosen default — no trace of the tool. ## With a coding agent Generating the candidates is the slow part, so the shortest path is to let your agent write them and wire up the book in one go: > Give me three candidate designs for the pricing section, and wrap them in a > swatchbook so I can flip between them. For something more deliberate, this template spells out the constraints that otherwise fail silently (see [Gotchas](https://github.com/omaroubari/swatchbook#gotchas)): ```text Use swatchbook to show me N candidate designs for [section]. Don't install it — it's throwaway scaffolding. Load it from the CDN instead, by adding both tags to whichever page or layout renders [section]: - Wrap the candidates in one . - Each candidate is a DIRECT child with data-swatch="[Name]" — no wrapper element in between, or the book silently renders them stacked. - Mark the one we'd ship with data-default. - Keep the candidates' markup static; the component moves its own children. ``` Working in a repo where you'll do this often? Drop swatchbook's constraints into your agent's always-on context: ```sh curl -fL https://unpkg.com/swatchbook/AGENTS.md >> AGENTS.md ``` ## Install **Script** — no build step, no install, nothing left in `package.json`: ```html ``` This is the recommended way in, because swatchbook is scaffolding: you add it to choose a design and delete it once you have. A `