VoltarShadcn UI com Next.js - Simplificando o Design de Interfaces Modernas

Shadcn UI com Next.js - Simplificando o Design de Interfaces Modernas imagem

Se você está buscando uma maneira de criar aplicações web modernas, estilosas e acessíveis com Next.js, o Shadcn UI é uma excelente opção. Neste artigo, vou explicar o que é o Shadcn e como ele pode te ajudar.

O que é o Shadcn?

O Shadcn UI não é especificamente uma biblioteca de componentes ou um framework de interface de usuário. Ele é descrito na documentação como “uma compilação de componentes reutilizáveis que podem ser facilmente copiados e colados em nossas aplicações”. O Shadcn utiliza o Tailwind CSS e o Radix UI como base. Atualmente, ele oferece compatibilidade com várias tecnologias, incluindo Next.js, Gatsby, Remix, Astro, Laravel e Vite. Além disso, há um guia de integração manual que pode ajudá-lo a incorporá-lo a outras tecnologias.

Imagine-os como peças de Lego que podem ser montadas para criar interfaces incríveis. O que torna esses componentes poderosos é que eles são construídos sobre o Radix UI, uma biblioteca de UI “headless” que fornece recursos de acessibilidade prontos para uso.

Por “headless UI”, queremos dizer que o Radix UI nos oferece componentes que são como blocos funcionais que lidam com comportamento e interação, permitindo que apliquemos nosso próprio estilo. O ShadCn aplica o estilo para nós, mas também o torna altamente personalizável e reutilizável com a ajuda de variantes de classe e até mesmo o TailwindCSS.

Como instalar?

Para instalar o Shadcn, siga estas etapas:

  1. Navegue até o diretório do seu projeto (por exemplo, my-app) no terminal: cd my-app
  2. Inicialize o Shadcn usando um dos seguintes comandos, dependendo da ferramenta de gerenciamento de pacotes que você está usando:
    • Com npm: npx shadcn-ui@latest init
    • Com yarn: npx shadcn-ui@latest init
    • Com pnpm: pnpm dlx shadcn-ui@latest init
    • Com bun: bunx --bun shadcn-ui@latest init
  3. Após executar um desses comandos, você verá algumas perguntas de configuração relacionadas ao Shadcn:
    • Qual estilo você gostaria de usar?
      • Opções: “default” ou “New York”.
    • Qual cor você gostaria de usar como cor base?
      • Opções: “Slate”, “Gray”, “Zinc”, “Neutral” ou “Stone”.
    • Você gostaria de usar variáveis CSS para cores?
      • Opções: “yes” ou “no”.
  4. Com isso, você configurou um novo projeto Next.js 14 com o Shadcn.
  5. Agora você verá dois novos diretórios adicionados ao seu projeto: components e lib.
    • Observe que o diretório components está atualmente vazio, o que significa que o Shadcn não carrega componentes desnecessários em seu projeto. Isso oferece flexibilidade e mantém seu projeto leve (você pode adicionar apenas os componentes que precisa).

Como usar os componentes?

Para incorporar um componente do Shadcn ao seu projeto, siga estas etapas:

  1. Acesse a documentação do Shadcn.
  2. Escolha o componente que deseja usar.
  3. Você verá o comando que deve ser executado para adicionar esse componente ao seu projeto.
  4. Por fim, importe o componente no seu projeto e comece a usá-lo.

Vamos adicionar o componente Button do Shadcn como exemplo:

  1. Acesse a página do componente Button.
  2. Execute o seguinte comando no seu terminal: npx shadcn-ui@latest add button. Observação: Este comando é para o npm – se você estiver usando um gerenciador de pacotes diferente, ajuste o comando conforme necessário.
  3. Importe o componente do botão no arquivo onde deseja utilizá-lo.

Como customizar?

O Shadcn oferece flexibilidade quando se trata de personalização. Você pode escolher entre duas abordagens:

  1. Padrões do Shadcn:
    • O Shadcn já vem com estilos predefinidos que você pode usar diretamente. Esses estilos são baseados no Tailwind CSS e no Radix UI.
    • Se você deseja uma solução rápida e eficiente, pode simplesmente aplicar os estilos padrão do Shadcn aos seus componentes. Isso é ótimo para projetos que precisam de uma aparência consistente e moderna sem muito esforço.
    • Os componentes do Shadcn são altamente personalizáveis por meio de variantes de classe e outras opções, permitindo que você ajuste detalhes como cores, tamanhos e espaçamentos.
  2. TailwindCSS:
    • Se você preferir usar o Tailwind ou deseja ter controle total sobre o estilo dos componentes, pode combinar o Shadcn com o TailwindCSS.
    • Use classes do TailwindCSS diretamente nos componentes do Shadcn para personalizar cada detalhe. Isso permite que você crie interfaces únicas e alinhadas com a identidade visual do seu projeto.
    • Lembre-se de que, ao usar o TailwindCSS, você pode aproveitar todas as classes e utilitários oferecidos por essa poderosa ferramenta de estilização.

Conclusão

O ShadCn é uma ferramenta poderosa para estilizar suas interfaces web. Combinando-o com o Radix UI, você pode criar aplicativos amigáveis e modernos sem muito esforço. Experimente e divirta-se construindo interfaces.