From a file in your editor to a live component your whole team can use.
No hosting to run, no screenshots to keep current. You write a small entry file, run one command, and Zephr does the rest.
Push from your editor
One command sends a component — source, variants, and prop types — straight from your project to your catalog.
Zephr bundles it live
Each component is bundled self-contained and deployed in seconds. It runs for real, isolated from everything else.
Your team explores it
Anyone opens the catalog, switches variants, and tweaks props live — the actual component, always current.
Describe a component in one small file.
A .zephr.ts entry points at your component and lists its variants — the states worth showing. That's the whole contract. Everything else, Zephr reads from your code.
- The component's name and description
- Each variant, with its props
- Prop types, pulled straight from TypeScript
One command, and Zephr takes it from there.
When you run zephr push, your component goes through a pipeline that turns a source file into a live, interactive preview — in seconds.
Reads your component
Zephr parses the entry to pull the component's name, description, variants, and — using the Vue type system — every prop and its type.
Bundles it self-contained
Your component and its dependencies compile into a single bundle. Nothing is shared with the host, so it renders identically for everyone.
Runs it in isolation
Each preview mounts in a sandboxed frame. Styles, scripts, and state stay contained — one component can never affect another, or the app around it.
Builds the controls
From the prop types, Zephr generates live controls automatically. A string becomes a text field, a union becomes a dropdown — no config required.
Your team gets the real thing — not a picture of it.
The component mounts and runs in the catalog. Switch between variants, drag the prop controls, and watch it update instantly. Designers and PMs explore it hands-on; engineers see the exact code behind it.
Because it renders from your pushed source, it's always in step with the codebase — the catalog can't go stale.
This is a live Zephr component — try editing the command.
Four commands to your first live component.
Your first component is one command away.
Install the CLI, grab your key, and push. Your team is looking at a live component in under a minute.
$zephrpush