Instructing V0 to use specific UI frameworks or design systems

Why V0 defaults to shadcn/ui and how to override it

V0 is built by Vercel and uses shadcn/ui as its default component system because shadcn/ui provides direct source code ownership, Tailwind CSS integration, and Radix accessibility primitives. When you send a prompt without specifying a UI library, V0 automatically uses shadcn/ui components like Button, Card, Dialog, and Table. However, you may need to use a different library because your existing project uses Material UI, your company has a custom design system, or you prefer a different aesthetic. V0 can generate code with any React-compatible UI library, but you must explicitly name the library and its components in your prompt. For shadcn-compatible design systems, V0 supports custom registries that pass design tokens and components directly to the AI.

• V0 defaults to shadcn/ui when no specific library is mentioned in the prompt
• Prompts using generic terms like 'button' or 'modal' are interpreted as shadcn/ui components
• Custom design system tokens and components are not available to V0 without a registry configuration
• V0 may mix shadcn/ui components with the requested library if the prompt is not specific enough
• Some UI libraries have components that V0's training data has not fully indexed, causing incomplete implementations

Error messages you might see

Before you start

• A V0 project where you want to use a specific UI framework
• Knowledge of the component names in your target UI library
• Optional: a custom shadcn registry URL for your design system

How to fix it

// Vague prompt — V0 uses shadcn/ui
// "Create a modal with a form inside"

// Specific prompt — V0 uses Material UI
// "Create a dialog using Material UI's Dialog, DialogTitle,
// DialogContent, and DialogActions components from @mui/material.
// Inside the dialog, add a form with TextField components for
// name and email, and a Button to submit."
// Or for Chakra UI:
// "Create a modal using Chakra UI's Modal, ModalOverlay,
// ModalContent, ModalHeader, ModalBody, and ModalFooter
// from @chakra-ui/react."

// V0 uses default shadcn/ui tokens
// Colors: default slate palette
// Font: Inter from next/font/google

// After configuring custom registry in Design panel:
// V0 uses YOUR design system tokens:
// Colors: your brand palette from tokens.css
// Font: your brand font from layout.tsx
// Components: your custom components from registry.json
// Registry URL format:
// https://your-registry.vercel.app/r/registry.json

// Manually copying component code from documentation

// Click 'Open in v0' on the component's registry page
// V0 imports the component with:
// - Full source code
// - CSS tokens and styles
// - TypeScript types
// - All dependencies

// Prompt 1: "Use MUI for the data table"
// Prompt 2: "Add a sidebar" (V0 uses shadcn/ui — inconsistent)

// Consistent prompts:
// Prompt 1: "This project uses Material UI (@mui/material) for ALL
// components. Do NOT use shadcn/ui. Create a data table using
// MUI DataGrid."
// Prompt 2: "Using Material UI — add a Drawer sidebar with
// List and ListItem navigation."

Complete code example

1"use client";
2
3import {
4  Table,
5  TableBody,
6  TableCell,
7  TableContainer,
8  TableHead,
9  TableRow,
10  Paper,
11  Chip,
12  IconButton,
13  Typography,
14} from "@mui/material";
15import EditIcon from "@mui/icons-material/Edit";
16import DeleteIcon from "@mui/icons-material/Delete";
17
18interface Product {
19  id: string;
20  name: string;
21  price: number;
22  category: string;
23  status: "active" | "draft" | "archived";
24}
25
26const statusColor: Record<string, "success" | "warning" | "default"> = {
27  active: "success",
28  draft: "warning",
29  archived: "default",
30};
31
32export function ProductTable({ products }: { products: Product[] }) {
33  return (
34    <TableContainer component={Paper}>
35      <Typography variant="h6" sx={{ p: 2 }}>
36        Products
37      </Typography>
38      <Table>
39        <TableHead>
40          <TableRow>
41            <TableCell>Name</TableCell>
42            <TableCell>Price</TableCell>
43            <TableCell>Category</TableCell>
44            <TableCell>Status</TableCell>
45            <TableCell align="right">Actions</TableCell>
46          </TableRow>
47        </TableHead>
48        <TableBody>
49          {products.map((product) => (
50            <TableRow key={product.id}>
51              <TableCell>{product.name}</TableCell>
52              <TableCell>${product.price}</TableCell>
53              <TableCell>{product.category}</TableCell>
54              <TableCell>
55                <Chip
56                  label={product.status}
57                  color={statusColor[product.status]}
58                  size="small"
59                />
60              </TableCell>
61              <TableCell align="right">
62                <IconButton size="small">
63                  <EditIcon fontSize="small" />
64                </IconButton>
65                <IconButton size="small" color="error">
66                  <DeleteIcon fontSize="small" />
67                </IconButton>
68              </TableCell>
69            </TableRow>
70          ))}
71        </TableBody>
72      </Table>
73    </TableContainer>
74  );
75}

Best practices to prevent this

• Always name the UI library explicitly in every prompt — never assume V0 will remember from a previous prompt
• Reference specific component names from the library's API documentation to avoid V0 using shadcn/ui fallbacks
• Use a custom shadcn registry for your design system to pass tokens and components directly to V0
• Add 'Do NOT use shadcn/ui' to prompts when you need V0 to strictly use another library
• Verify generated imports match the correct package name — V0 sometimes generates incorrect import paths for non-default libraries
• For projects requiring strict adherence to a corporate design system, RapidDev can implement components with exact spec compliance

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns

Explore related guides

Guides from other topics that help with this issue