Examples

Reference integrations for zudo-design-token-panel across five popular stacks. Each example wires the panel against a host-supplied tabs: TabConfig[] array, plus the companion bin server for applying tweaks back to source. Every example ships a /prose page that exercises the full range of markdown-generated HTML elements against the demo's token namespace.

Try it

• Astro — Live demo · GitHub source — Drop the panel into an Astro site. Demonstrates host-config wiring with an Astro dev server and the bin apply pipeline. Prose page exercises all prose elements against the --astro-* token namespace.

• Vite + React — Live demo · GitHub source — Use the panel from a Vite + React app. Shows how the Preact runtime coexists with React via the compat shim. Prose page exercises all prose elements against the --vr-* token namespace.

• Next.js — Live demo · GitHub source — Wire the panel into a Next.js app router project, including the bin server side-by-side with the Next dev server. Prose page exercises all prose elements against the --nx-* token namespace.

• zfb — Live demo · GitHub source — Integrate the panel into a zfb project. Uses the devMiddleware plugin hook for the apply proxy (instead of Vite's built-in proxy mechanism). The apply-endpoint URL is fully base-prefixed — see PROBE-REPORT.md for context. Prose page exercises all prose elements against the --zfb-* token namespace.

• zfb + Tailwind v4 — Live demo · GitHub source — Extends the zfb example with Tailwind v4. Tokens are registered via an @theme block into Tailwind's design-system namespaces so utility classes like text-body and p-hsp-md resolve to the panel's custom properties at build time. Prose page exercises all prose elements against the --zfbtw-* token namespace, with utility classes applied via @layer components.