Como Utilizar a Biblioteca UI ShadCN

A biblioteca UI ShadCN é uma ferramenta poderosa para criar interfaces de usuário modernas e responsivas. Neste artigo, vamos explorar como utilizar essa biblioteca com Next.js e Tailwind CSS para desenvolver uma aplicação web eficiente e estilosa.

Introdução

A UI ShadCN oferece componentes prontos que podem ser facilmente integrados em suas aplicações. Combinando-a com o Next.js, um framework popular para React, e Tailwind CSS, um utilitário de CSS, você pode acelerar o desenvolvimento de interfaces de alta qualidade.

Configuração do Ambiente

Passo 1: Configuração do Next.js

Primeiro, certifique-se de ter o Node.js instalado. Em seguida, crie um novo projeto Next.js:

npx create-next-app@latest my-shadcn-appcd my-shadcn-app

Passo 2: Instalação do Tailwind CSS

Instale o Tailwind CSS e suas dependências:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure o tailwind.config.js e o arquivo CSS principal:

// tailwind.config.js
module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Passo 3: Instalação da UI ShadCN

Instale a biblioteca ShadCN:

npm install @shadcn/ui

Uso de Componentes ShadCN

Passo 4: Importando Componentes

Implemente os componentes ShadCN na sua aplicação Next.js. Por exemplo, para utilizar um botão, você pode fazer da seguinte forma:

// pages/index.js
import { Button } from '@shadcn/ui';

export default function Home() {
  return (
    <div className="container mx-auto p-4">
      <Button variant="primary">Clique Aqui</Button>
    </div>
  )
}

Passo 5: Customizando com Tailwind CSS

Os componentes ShadCN podem ser customizados utilizando Tailwind CSS. Adicione classes utilitárias para estilizar conforme sua necessidade:

<Button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Clique Aqui
</Button>

Exemplo Prático

Vamos criar uma página simples utilizando diversos componentes da ShadCN, como botões, cards e navegação.

// pages/index.js
import { Button, Card, Navbar } from '@shadcn/ui';

export default function Home() {
  return (
    <div>
      <Navbar>
        <Navbar.Brand>MyApp</Navbar.Brand>
        <Navbar.Menu>
          <Navbar.Item href="#">Home</Navbar.Item>
          <Navbar.Item href="#">About</Navbar.Item>
        </Navbar.Menu>
      </Navbar>
      <div className="container mx-auto p-4">
        <Card className="mb-4">
          <Card.Header>Card Title</Card.Header>
          <Card.Body>
            This is an example card using ShadCN components.
          </Card.Body>
          <Card.Footer>
            <Button variant="primary">Learn More</Button>
          </Card.Footer>
        </Card>
      </div>
    </div>
  );
}

Conclusão

Utilizando a biblioteca UI ShadCN com Next.js e Tailwind CSS, você pode construir aplicações web com design moderno e funcionalidade avançada de maneira rápida e eficiente. Siga os passos fornecidos e explore a documentação para descobrir mais componentes e possibilidades de customização.

Links Úteis

• Documentação do ShadCN
• Documentação do Next.js
• Documentação do Tailwind CSS