Pavilion is the docs surface for your design system. Tokens, components, contribution rules — versioned, playable, and reviewed by the people who use them.
A clickable trigger used for actions. Supports six variants, four sizes, and optional leading or trailing icons.
import { Button } from "@brightwave/ui" export default function Example() { return ( <Button variant="solid" size="md" leadingIcon={PlusIcon}> Create project </Button> ) }
Pavilion publishes your variables as a typed package on every Figma "Publish library". Rename a color, every color.fg.subtle in your app gets the new value — and a deprecation alias for safety.
{ "color": { "fg": { "default": "oklch(0.18 0 0)", "subtle": "oklch(0.42 0 0)" }, "accent": { "solid": "oklch(0.66 0.18 27)", "contrast": "oklch(0.98 0 0)" } } }
Every release records a rendered diff for every component variant. Stakeholders sign off on the visuals, not the changelog text. Reviewers get @-mentioned in the right Slack channel for the surfaces they own.
Anyone can propose a component change. Pavilion renders the before/after, runs A11y checks, requires sign-off from a code owner and a design owner, and merges the PR — including the docs page and a migration note.
Tokens are the contract. Pavilion compiles them to every consumer format you need — and refuses to publish if a token loses its name between releases.
// Brightwave / 2026 refresh · light mode { "$schema": "https://pavilion.dev/tokens/v1", "color.fg.default": { "$value": "oklch(0.18 0 0)" }, "color.fg.subtle": { "$value": "oklch(0.42 0 0)" }, "color.bg.default": { "$value": "oklch(0.98 0 0)" }, "color.accent.solid": { "$value": "oklch(0.66 0.18 27)", "$contrast": { "AA": 7.1, "AAA": 4.6 }, "$figma": "Brightwave / Accent / Solid" }, "radius.md": { "$value": "6px", "$wasInV3_3": "3px" } }
Pavilion indexes component code, prop names, tokens, and rendered surfaces — so "destructive" finds the Button variant, the Toast color, and the empty-state illustration on the same screen.
Write prose next to a live component, drop your own React inline. <Playground>, <Tokens>, and <Diff> ship in the box.
Pavilion crawls your monorepo nightly to find rogue <button> usage. See which apps adopted the new Combobox and which are still on v3.2.
Render the same component under 4 brands or 12 locales — preview side-by-side, validate copy length, catch line-break bugs before they ship.
Turborepo, pnpm, Nx, Yarn workspaces — Pavilion reads your build graph and only re-renders the components that actually changed. Mean rebuild: 3.4s.
Your whole team gets editor access on every tier. We don't think a docs site should count designers separately.
Public component libraries, all features, "Made with Pavilion" footer.
Start free →Private libraries, Figma 2-way sync, contribution workflow.
Start 14-day trial →Multiple systems, SSO, audit, Figma Enterprise integration.
Book a call →We moved 84 components off Storybook and onto Pavilion in a week. Design-eng tickets dropped −38% vs Q3. Designers actually open the docs now.
The 2-way Figma sync is the feature I bring up in every interview now. Tokens stay in shape, even when a designer renames a collection. 412 PRs auto-migrated.
Adoption analytics changed our roadmap. We were going to deprecate Combobox v2 in Q1; turns out three teams were still on it. We pushed it to Q3 and shipped a codemod.
Free for public component libraries. Ten minutes to a docs site you'd want to use.