shadcn

Visão Geral

O que é shadcn?

shadcn é um conjunto de ferramentas para gerenciar, compor e personalizar componentes de UI React estilizados com Tailwind CSS. Ele permite que desenvolvedores e designers adicionem elementos de UI reutilizáveis e de alta qualidade diretamente em seus projetos, facilitando o desenvolvimento rápido de interfaces e sistemas de design consistentes.

Para quem é o shadcn?

shadcn foi criado para desenvolvedores frontend, engenheiros de UI e equipes que constroem aplicações React e desejam:

• Adicionar e personalizar componentes de UI rapidamente
• Manter consistência visual com Tailwind CSS
• Estender ou compor componentes para necessidades específicas do projeto
• Evitar reinventar padrões comuns de UI

Quais problemas o shadcn resolve?

• Simplifica a adição e atualização de componentes de UI como código-fonte
• Oferece um registro pesquisável de componentes e presets
• Fornece documentação clara e exemplos de uso para cada componente
• Suporta configuração específica do projeto via components.json

Como Usar

Passos para Instalação

1. Adicione o shadcn ao seu projeto:
   Use seu gerenciador de pacotes preferido. Por exemplo, com npm:

   npx shadcn@latest init
   

   Ou com pnpm:

   pnpm dlx shadcn@latest init
   

   Ou com bun:

   bunx --bun shadcn@latest init
   

2. Configure seu projeto:
   Siga as instruções do CLI para configurar seu projeto e gerar o arquivo components.json.
3. Adicione componentes:
   Pesquise e adicione componentes do registro:

   npx shadcn@latest add button
   

   Substitua button pelo nome do componente desejado.
4. Personalize e componha:
   • Use variantes e tamanhos integrados para estilização rápida.
   • Componha componentes (ex: Tabs + Card + Form) para layouts complexos.
   • Estenda ou estilize componentes usando Tailwind CSS conforme necessário.

Arquivos e Estrutura do Projeto

• components.json: Registra os componentes instalados e configurações.
• O código-fonte de cada componente é adicionado diretamente ao seu projeto, permitindo total personalização.

Documentação e Exemplos

• Obtenha documentação e exemplos de uso para qualquer componente:

  npx shadcn@latest docs <component>
  

• Consulte o repositório shadcn/ui no GitHub para mais detalhes.

Perguntas Frequentes

Quando devo usar o shadcn?

Use o shadcn quando precisar criar rapidamente, personalizar ou estender componentes de UI em um projeto React, especialmente se usar Tailwind CSS e valorizar componentes editáveis baseados em código-fonte.

Para quais projetos o shadcn não é indicado?

shadcn é menos adequado para projetos que não usam React, ou se você precisa de uma biblioteca de componentes totalmente gerenciada sem integração de código-fonte. Também não é indicado para trabalho backend ou fora da UI.

Como atualizo ou removo componentes?

• Atualizar: Execute o comando de adicionar novamente para obter a versão mais recente.
• Remover: Exclua os arquivos do componente do seu projeto e atualize o components.json conforme necessário.

Onde posso encontrar mais ajuda?

• Consulte a documentação do shadcn/ui
• Use a ajuda do CLI: npx shadcn@latest --help

Para uma árvore completa de arquivos e uso avançado, explore o repositório ou abra a aba Files no diretório de skills do seu agente.