25k

shadcn/ui integration

A visual editor
for shadcn/ui.

Onlook reads your existing shadcn/ui components and makes them the canvas. Designers compose with the real Button, Card, Dialog, and Form components your engineers maintain. AI helps. Every change is real code in your repo.

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. 1

    Connect your repo

    Onlook authenticates with GitHub and reads your shadcn components and tailwind.config.

  2. 2

    Open the canvas

    Your real components appear on an infinite canvas. Compose new screens with AI as the editor.

  3. 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. 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

Read our FAQs

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.

See onlook.com/pricing for current plan details and to join the waitlist.

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.

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.

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.

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.

Bring your team
to Onlook today

Join Waitlist