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-app
cd 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.