O que é shadcn ui
Não é uma biblioteca tradicional
A maior distinção do shadcn/ui é que não se trata de uma biblioteca tradicional all-in-one. Em vez de instalar toda a biblioteca, você copia componentes individuais para seus projetos.
Essa abordagem permite total personalização e remove dependências desnecessárias e elementos que você não precisa.
Controle Completo
Como você está copiando um código bruto, tem controle total sobre os estilos e a funcionalidade. Modificar ou estender a funcionalidade dos componentes para atender a necessidades específicas não vem com os problemas tradicionais que surgem ao usar bibliotecas tradicionais.
Projetado para React & Next.js
shadcn/ui é construído para uso com React, Next.js, Astro, Remix, e Gatsby. Ele também suporta renderização do lado do servidor (SSR) e geração de sites estáticos (SSG).
Qualidade dos Componentes
A coleção oferece uma ampla gama de componentes bem projetados. Desde formulários e botões até modelos mais complexos e dropdowns.
Cada componente é construído com as melhores práticas de design em mente, incluindo gestão de estado e atributos de acessibilidade.
Como usar shadcn/ui
Aqui está um exemplo de como usar shadcn com Next.js.
1. Criar projeto
Execute o comando init para criar um novo projeto Next.js ou configurar um existente:
npx shadcn@latest init
Você pode usar a flag -d para padrões, ou seja, new-york, zinc e yes para variáveis CSS.
npx shadcn@latest init -d
2. Configurar components.json
Serão feitas algumas perguntas para configurar o components.json:
Qual estilo você gostaria de usar? › New YorkQual cor você gostaria de usar como cor base? › ZincDeseja usar variáveis CSS para cores? › não / sim
3. Encontrar os componentes que você precisa
Agora você pode adicionar componentes ao seu projeto. Vá para a documentação dos componentes shadcn para encontrar os componentes de que precisa.
Adicionar um componente é simples, basta usar o comando de adicionar, por exemplo, o componente de botão:
npx shadcn@latest add button
Outra maneira de usar os componentes shadcn ui é usar o v0 da Vercel. É uma AI generativa que utiliza componentes shadcn para criar páginas web.
Vantagens do shadcn/ui
1. Leveza
Ao copiar apenas os componentes que você precisa, seu projeto permanece leve e livre de inchaço desnecessário em sua base de código.
2. Personalizável
shadcn/ui oferece controle completo sobre cada componente. Essa liberdade é especialmente valiosa para projetos com requisitos específicos de marca ou design.
3. Código Aberto e Gratuito
shadcn/ui é completamente open-source. Os desenvolvedores podem contribuir para o projeto ou adaptá-lo conforme necessário para seus casos de uso únicos. É gratuito para uso sem restrições de licenciamento, tornando-se uma ótima ferramenta para projetos profissionais e pessoais.
Casos de uso do shadcn ui
1. UIs Altamente Personalizadas
Se você está construindo um projeto que requer controle detalhado sobre a aparência e a sensação da sua interface, shadcn/ui permite ajustar os componentes às suas especificações exatas.
2. Projetos Next.js
Os desenvolvedores que trabalham em aplicativos Next.js encontrarão no shadcn/ui uma ótima combinação, especialmente com sua compatibilidade com SSR e Tailwind CSS.
3. Prototipagem de Sistema de Design
Para equipes que construíram seus próprios sistemas de design, shadcn/ui oferece um ótimo ponto de partida. A flexibilidade de personalizar componentes torna fácil prototipar e refinar um conjunto de componentes reutilizáveis.
Kit Figma de shadcn ui
Há um excelente UI Kit para Figma feito por Pietro Schirano. Ele contém todos os componentes com propriedades personalizáveis, tipografia, etc. Copie aqui.
Conclusão
shadcn/ui é uma ótima escolha para desenvolvedores que buscam componentes front-end leves e prontos para uso. Embora não seja uma biblioteca de UI no sentido tradicional, possui todos os componentes que você pode precisar para um projeto web típico.
Em vez de confundir com ajustes de bibliotecas de UI médias, você obtém o código fonte completo de cada componente que pode estilizar e modificar conforme suas necessidades.
Para mais informações, visite shadcn/ui no GitHub.
