v0.dev: Crie um Design System Completo com Tailwind e shadcn

Um design system consistente é o que separa um produto profissional de um conjunto de componentes disparatados. O v0 pode acelerar drasticamente a criação e manutenção de um design system baseado em Tailwind CSS e shadcn/ui.

O que é um design system?

Um design system é um conjunto de decisões de design documentadas e implementadas:

• Tokens de design: cores, tipografia, espaçamentos, sombras
• Componentes base: Button, Input, Card, Modal
• Padrões de composição: como combinar componentes
• Variantes: diferentes versões do mesmo componente (primary, secondary, danger)

Configurando o tema no tailwind.config.ts

Primeiro, peça ao v0 para criar a configuração base:

Crie um tailwind.config.ts com design tokens para um SaaS B2B:

Cores primárias: azul escuro (#1e3a5f) com variantes 50-900
Cores de acento: verde (#22c55e) para sucesso, vermelho (#ef4444) para erro, amarelo (#f59e0b) para warning
Tipografia: Inter como fonte principal, JetBrains Mono para código
Espaçamentos: escala 4px (4, 8, 12, 16, 20, 24, 32, 48, 64, 96)
Bordas: raios 4, 8, 12, 16, 24, full
Sombras: 4 níveis (xs, sm, md, lg)

Componentes base com variantes

Crie um componente Button com as variantes:
- variant: primary | secondary | ghost | danger | link
- size: xs | sm | md | lg
- state: default | loading | disabled
- leadingIcon e trailingIcon opcionais (lucide-react)
- fullWidth boolean

Use cva (class-variance-authority) para gerenciar as variantes.
Documente as props com comentários JSDoc.

Input com todos os estados

Crie um componente Input com:
- label acima (com asterisco se required)
- placeholder
- helper text abaixo (description ou error)
- states: default, focused, error, disabled, success
- leadingIcon e trailingIcon opcionais
- clearable (botão X para limpar)
- senha com toggle de visibilidade
Base no Input do shadcn/ui.

Documentação com Storybook stories

Para o componente Button criado, gere um arquivo Button.stories.tsx com:
- Story para cada combinação de variant e size
- Story para estado loading
- Story para disabled
- Story com ícone leading e trailing
Use Storybook CSF3 format com args.

Criando um componente de navegação

Crie um sistema de navegação completo:
- Sidebar de 240px com logo, menu items e seção de usuário no rodapé
- Menu items: icon + label, com estado ativo e hover
- Grupos colapsáveis (seções do menu)
- Responsivo: colapsa para 60px em telas médias, drawer em mobile
- Props: items (array), currentPath, onNavigate, user (name, email, avatar)

Mantendo consistência

Quando adicionar novos componentes:

Preciso de um componente de Tag/Badge.
Considere o design system existente:
- Use as mesmas cores definidas no tailwind.config
- Siga o padrão de variantes do componente Button (variant + size)
- Importe ícones do lucide-react como os outros componentes
- Adicione o componente ao barrel export em src/components/ui/index.ts

Com o v0 como acelerador e shadcn/ui como base, você constrói um design system profissional em dias, não meses.