Introducao ao shadcn/ui - Componentes de UI Reutilizaveis

O que voce vai aprender neste tutorial

✓ Configuracao do shadcn/ui
✓ Adicionar componentes
✓ Customizacao de tema
✓ Construcao de formularios
✓ Modo escuro

Step 1: Configuracao

npx create-next-app@latest my-app --typescript --tailwind
cd my-app
npx shadcn-ui@latest init

Selecione as seguintes opcoes na configuracao inicial:

• TypeScript: yes
• Style: Default
• Base color: Slate
• CSS variables: yes

Step 2: Adicionar Componentes

# Adicionar individualmente
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add input
npx shadcn-ui@latest add form

# Adicionar multiplos
npx shadcn-ui@latest add button card input dialog

Step 3: Uso Basico

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';

export default function HomePage() {
  return (
    <div className="p-8">
      <Card className="max-w-md">
        <CardHeader>
          <CardTitle>Login</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <Input placeholder="Endereco de e-mail" />
          <Input type="password" placeholder="Senha" />
          <Button className="w-full">Login</Button>
        </CardContent>
      </Card>
    </div>
  );
}

Step 4: Variantes

<Button variant="default">Default</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>

Step 5: Construcao de Formularios

npx shadcn-ui@latest add form
npm install zod react-hook-form @hookform/resolvers

'use client';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { Button } from '@/components/ui/button';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Input } from '@/components/ui/input';

const schema = z.object({
  email: z.string().email('Insira um endereco de e-mail valido'),
  password: z.string().min(8, 'Minimo de 8 caracteres'),
});

export function LoginForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { email: '', password: '' },
  });

  const onSubmit = (data: z.infer<typeof schema>) => {
    console.log(data);
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>E-mail</FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="password"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Senha</FormLabel>
              <FormControl>
                <Input type="password" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit" className="w-full">Login</Button>
      </form>
    </Form>
  );
}

Step 6: Dialogo

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';

export function ConfirmDialog() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="destructive">Excluir</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Tem certeza que deseja excluir?</DialogTitle>
          <DialogDescription>
            Esta acao nao pode ser desfeita.
          </DialogDescription>
        </DialogHeader>
        <div className="flex justify-end gap-2">
          <Button variant="outline">Cancelar</Button>
          <Button variant="destructive">Excluir</Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}

Step 7: Customizacao de Tema

/* globals.css */
@layer base {
  :root {
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    /* Cores customizadas */
  }

  .dark {
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
  }
}

Resumo

shadcn/ui e uma biblioteca de UI baseada em copiar e colar, com customizacao total. E construida sobre Radix UI e Tailwind CSS.