shadcn/ui Visual Editor — Onlook
Your shadcn setup is already the design system
shadcn/ui is unusual in a good way: the components live in your repo as real, editable code. That makes it the ideal substrate for an AI-powered visual editor — no abstraction layer, no proprietary format, no second copy of the design system to keep in sync.
Onlook reads your shadcn components and your Tailwind theme. Designers compose with what your team already has. Engineers review the resulting diffs in your usual workflow. The design system stays consistent because there is only one of it.
How it works
1
Connect your repo
Onlook authenticates with GitHub and reads your shadcn components and tailwind.config.
2
Open the canvas
Your real components appear on an infinite canvas. Compose new screens with AI as the editor.
3
Edit with AI
Select any component on the canvas. Use the chat to ask AI to restyle, restructure, or add new behavior. Every change is real code.
4
Ship through your usual workflow
Your edits are real code in your repo. Commit, push, review, and ship in the git workflow your team already uses.
Frequently asked questions
When should I use Onlook with shadcn/ui?
Use Onlook when your project uses shadcn/ui (or any code-first component library) and you want a visual editor that respects your existing components, theme tokens, and Tailwind config. Designers compose with the components your engineers already maintain; changes are written back to your real code.
How much does Onlook cost?
See onlook.com/pricing for current plan details and to join the waitlist.
How does Onlook work with shadcn/ui?
Onlook reads the shadcn/ui components in your repo as-is. The Button, Card, Dialog, and other components you have installed via the shadcn CLI become the building blocks on the canvas. Your Tailwind theme tokens, your variants, and your customizations all carry over.
Do I need to use shadcn/ui to use Onlook?
No. Onlook works with any React component library — shadcn/ui, Radix primitives, your own internal design system, or any combination. shadcn/ui happens to fit Onlook particularly well because it lives in your repo as real, editable code rather than in a separate package.
Will Onlook modify my shadcn components?
Onlook reads your shadcn components and uses them as the building blocks on the canvas. The canvas reflects your real component code as the source of truth — your existing components are not modified unless you intentionally make changes during a session.
What about Tailwind tokens and theming?
Onlook reads your tailwind.config and your CSS variables. The color palette, typography scale, spacing system, and any custom theme tokens you have defined are all available on the canvas. Designers compose within your real design tokens, not a parallel set.