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

# v0 Integration

> Generate beautiful UI components with v0 and connect them to Backdrift.

[v0](https://v0.dev) by Vercel generates React components from text descriptions. Combined with Backdrift, you can create stunning interfaces connected to real APIs.

## The Workflow

```mermaid theme={null}
graph LR
    A[Backdrift] --> B[Design Doc]
    B --> C[v0]
    C --> D[React Components]
    D --> E[Your App]
```

1. Build your backend with Backdrift
2. Export the Design Doc
3. Generate components with v0
4. Integrate into your React app

## How to Use

### 1. Get Your Design Doc

From your Backdrift project's **Artifacts** tab, copy the Design Doc.

### 2. Generate in v0

Go to [v0.dev](https://v0.dev) and describe what you want:

```
Create a task management dashboard.

The API returns tasks like this:
{
  "id": "task-123",
  "title": "Ship the feature",
  "priority": "high",
  "status": "active",
  "assignee": {
    "id": "user-1",
    "name": "Alice"
  },
  "due_date": "2024-01-20"
}

Include:
- A table view with sortable columns
- Status badges (pending=gray, active=blue, done=green)
- Priority badges (low=gray, medium=yellow, high=red)
- Assignee avatar and name
- Due date with overdue highlighting
- Actions column with edit and delete buttons
```

### 3. Copy the Code

v0 generates React + Tailwind + shadcn/ui code. Copy it to your project.

### 4. Connect to Your API

Replace mock data with API calls:

```tsx theme={null}
// Generated by v0
const tasks = [
  { id: '1', title: 'Example', status: 'active' }
];

// Replace with:
const { data: tasks } = useQuery({
  queryKey: ['tasks'],
  queryFn: () => fetch('/api/tasks').then(r => r.json())
});
```

## Example: Task Board

### v0 Prompt

```
Create a Kanban board for tasks.

Columns: "To Do", "In Progress", "Done"

Each task card shows:
- Title (bold)
- Priority badge (high=red, medium=yellow, low=gray)
- Assignee avatar (small circle with initials)
- Due date in relative format ("Due in 3 days")

Cards should be draggable between columns.
Use shadcn/ui Card component with hover effects.
Include a "+ Add Task" button at the bottom of each column.
```

### Result

v0 generates a complete Kanban component with:

* Drag-and-drop (using @dnd-kit)
* Styled cards with badges
* Add task buttons
* Responsive layout

## Example: Dashboard Charts

### v0 Prompt

```
Create an analytics dashboard for a task management app.

Show:
1. Card with "Tasks Completed" count and +12% trend arrow
2. Card with "Active Tasks" count
3. Card with "Overdue Tasks" count (red if > 0)
4. Line chart showing tasks completed per day (last 7 days)
5. Pie chart showing task distribution by status

Use shadcn/ui cards and Recharts for charts.
Include loading skeletons.
```

## Best Practices

<AccordionGroup>
  <Accordion title="Include Data Shape">
    Show v0 what your API returns. Include example JSON.
  </Accordion>

  <Accordion title="Reference Types">
    Include TypeScript types from your Design Doc:

    ```
    type Task = {
      id: string;
      title: string;
      priority: 'low' | 'medium' | 'high';
    }
    ```
  </Accordion>

  <Accordion title="Specify Components">
    Reference shadcn/ui components by name:
    "Use shadcn/ui Select for the status filter"
  </Accordion>

  <Accordion title="Request Responsiveness">
    "Make it responsive—single column on mobile, grid on desktop"
  </Accordion>
</AccordionGroup>

## Integrating v0 Components

### 1. Install Dependencies

v0 components often need:

```bash theme={null}
npm install @radix-ui/react-* # for shadcn/ui
npm install recharts # for charts
npm install @dnd-kit/core # for drag-and-drop
```

### 2. Copy Component Code

v0 provides copy-ready code. Paste into your project.

### 3. Add Data Fetching

Replace static data with hooks:

```tsx theme={null}
// From v0 (static):
const tasks = [{ id: '1', title: 'Example' }];

// Your version (dynamic):
const { data: tasks, isLoading } = useTasks();

if (isLoading) return <TasksSkeleton />;
```

### 4. Add Mutations

Connect actions to your API:

```tsx theme={null}
const updateTask = useMutation({
  mutationFn: (update) =>
    fetch(`/api/tasks/${update.id}`, {
      method: 'PUT',
      body: JSON.stringify(update)
    }),
  onSuccess: () => queryClient.invalidateQueries(['tasks'])
});

// In drag handler:
onDragEnd={(result) => {
  updateTask.mutate({
    id: result.draggableId,
    status: result.destination.droppableId
  });
}}
```

## v0 + Lovable/Bolt

You can combine tools:

1. Generate **individual components** with v0
2. Build the **full application** with Lovable or Bolt
3. Copy v0 components into your Lovable/Bolt project

```
// In Lovable:
"Here's a Kanban component I generated with v0:
[paste component code]

Integrate this into the dashboard, connected to the tasks API."
```

<Card title="Admin Dashboard" icon="gauge" href="/operations/admin-dashboard">
  Learn about the built-in admin interface.
</Card>