> ## Documentation Index
> Fetch the complete documentation index at: https://vlyai-1c28d863.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Migrating from v0

> Bring v0-generated frontend code into a vly project as a starting design system.

[v0](https://v0.dev) generates frontend-only React components. vly is a full-stack platform. The migration path is mostly about **using v0 components inside vly** rather than literally moving a project.

## When to combine

* You have v0-generated UI you love.
* You want to add a real backend, auth, and database.
* vly is the host for the integrated app.

## Steps

<Steps>
  <Step title="Start a new vly project">
    With the same overall product spec.
  </Step>

  <Step title="Port v0 components one by one">
    Open Code mode in vly. Paste the v0 component into `components/{name}.tsx`. Adjust imports.
  </Step>

  <Step title="Replace mock data with Convex queries">
    v0's mock arrays become `useQuery(api.something.list)`.
  </Step>

  <Step title="Wire up forms to mutations">
    v0's onClick handlers become `useMutation(api.something.create)`.
  </Step>
</Steps>

## Tips

<Tip>
  **v0 uses shadcn/ui too.** Most components drop in cleanly. Adjust imports to vly's path conventions.
</Tip>

<Tip>
  **For brand-consistent design, port v0's Tailwind config too.** The brand colors and spacing tokens.
</Tip>

## Related

<CardGroup cols={3}>
  <Card title="shadcn/ui components" icon="boxes" href="/features/design/shadcn-components">
    The shared component library.
  </Card>

  <Card title="Components panel" icon="puzzle" href="/building/components-panel">
    Browse existing components.
  </Card>

  <Card title="Compare" icon="scale" href="/getting-started/compare">
    vly vs v0.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.