BeaUI — componentes prontos

Componentes React+Tailwind prontos pra usar no seu app. Disponíveis em BeaUI.*.

Layout

<BeaUI.Card>
  <BeaUI.CardHeader>
    <BeaUI.CardTitle>Título</BeaUI.CardTitle>
  </BeaUI.CardHeader>
  <BeaUI.CardContent>Conteúdo</BeaUI.CardContent>
</BeaUI.Card>

Form

<BeaUI.Input
  value={nome}
  onChange={(e) => setNome(e.target.value)}
  placeholder="Nome"
/>

<BeaUI.Textarea rows={4} />

<BeaUI.Select value={cat} onChange={setCat}>
  <option value="a">A</option>
  <option value="b">B</option>
</BeaUI.Select>

<BeaUI.Checkbox checked={ok} onChange={setOk} />
<BeaUI.Switch checked={on} onChange={setOn} />

Botões

<BeaUI.Button>Salvar</BeaUI.Button>
<BeaUI.Button variant="outline">Cancelar</BeaUI.Button>
<BeaUI.Button variant="destructive">Deletar</BeaUI.Button>
<BeaUI.Button size="sm">Pequeno</BeaUI.Button>

Tabela

<BeaUI.Table>
  <BeaUI.TableHeader>
    <BeaUI.TableRow>
      <BeaUI.TableHead>Nome</BeaUI.TableHead>
      <BeaUI.TableHead>Email</BeaUI.TableHead>
    </BeaUI.TableRow>
  </BeaUI.TableHeader>
  <BeaUI.TableBody>
    {clientes.map(c => (
      <BeaUI.TableRow key={c.id}>
        <BeaUI.TableCell>{c.nome}</BeaUI.TableCell>
        <BeaUI.TableCell>{c.email}</BeaUI.TableCell>
      </BeaUI.TableRow>
    ))}
  </BeaUI.TableBody>
</BeaUI.Table>

Modal / Dialog

<BeaUI.Dialog open={open} onOpenChange={setOpen}>
  <BeaUI.DialogContent>
    <BeaUI.DialogTitle>Confirmar</BeaUI.DialogTitle>
    <BeaUI.DialogDescription>
      Tem certeza que quer deletar?
    </BeaUI.DialogDescription>
    <BeaUI.Button onClick={() => setOpen(false)}>Cancelar</BeaUI.Button>
    <BeaUI.Button variant="destructive" onClick={handleDelete}>
      Deletar
    </BeaUI.Button>
  </BeaUI.DialogContent>
</BeaUI.Dialog>

Toast (notificação)

BeaUI.toast.success("Salvo!");
BeaUI.toast.error("Erro ao salvar");
BeaUI.toast.info("Processando...");

Badge / Tag

<BeaUI.Badge>Pendente</BeaUI.Badge>
<BeaUI.Badge variant="success">Pago</BeaUI.Badge>
<BeaUI.Badge variant="destructive">Atrasado</BeaUI.Badge>

Lucide icons

Todos os 1500+ ícones do Lucide disponíveis:

<BeaUI.icons.Plus className="w-4 h-4" />
<BeaUI.icons.Trash2 className="w-4 h-4 text-destructive" />
<BeaUI.icons.Search />