AI Tools Hub
Implementation· 6 min

Using v0 with an existing design system

v0's strength is that it produces shadcn/ui components, which drop into the many projects built on that foundation. If your design system is something else, the output needs work — and there is a point where the work exceeds the benefit.

AI Tools Hub Editorial · published · updated

If you already use shadcn/ui

You are in the intended case. Generated components use your existing primitives, your Tailwind configuration applies, and `npx v0 add` pulls the result into the repository. Expect to adjust spacing and copy rather than restructure.

If you have a different Tailwind-based system

  • Paste your token definitions into the prompt — colours, spacing scale, radii, type scale
  • Give it one existing component as an example of the conventions you want followed
  • Ask for structure and semantics rather than visual polish, then restyle against your tokens
  • Accept that imports will need rewriting; that part is mechanical

If your system is not Tailwind

CSS Modules, styled-components, vanilla-extract — v0 can be asked for them, but the output quality drops noticeably and the conversion work grows. At that point v0 is useful for structure and layout ideas, not for code you ship. Use it to get unstuck, not to generate the component.

A practical loop

  • Generate in v0 with your tokens in the prompt
  • Review for structure and accessibility before looking at the styling
  • Bring it in, swap imports to your own primitives
  • Restyle against tokens
  • Keep the prompt that worked — it is reusable for the next component

Can v0 learn our design system?

Not persistently in the way a fine-tuned model would. What works is a reusable prompt preamble containing your tokens and one reference component.

Is the generated code accessible?

Reasonably, because shadcn/ui is built on accessible primitives. Still check focus order and labels — generated markup is competent, not audited.

Related

More articles