v0 Integration

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

v0 by Vercel generates React components from text descriptions. Combined with Backdrift, you can create stunning interfaces connected to real APIs.

The Workflow

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 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:

// 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

Include Data Shape

Show v0 what your API returns. Include example JSON.

Reference Types

Include TypeScript types from your Design Doc:

type Task = {
  id: string;
  title: string;
  priority: 'low' | 'medium' | 'high';
}

Specify Components

Reference shadcn/ui components by name: “Use shadcn/ui Select for the status filter”

Request Responsiveness

“Make it responsive—single column on mobile, grid on desktop”

Integrating v0 Components

1. Install Dependencies

v0 components often need:

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:

// 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:

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

Admin Dashboard

Learn about the built-in admin interface.