@brgs/react

Componentes React para o design system Unisty. Tailwind CSS v4 first.

npm install @brgs/react @brgs/tokens tailwindcss@^4

Setup

/* app.css */
@import "tailwindcss";
@import "@brgs/tokens/theme.css";
@import "@brgs/tokens/base.css";

Componentes

Todos os componentes aceitam className e expõem atributos data-slot, data-variant e data-size.

Button

import { Button, buttonVariants } from '@brgs/react'

<Button variant="destructive" size="sm">Deletar</Button>
<Button variant="outline">Cancelar</Button>
<Button variant="ghost" size="icon"><SettingsIcon /></Button>
<Button asChild><a href="/login">Link como Botão</a></Button>

// Variantes fora do componente
<a href="/login" className={buttonVariants({ variant: 'outline' })}>Login</a>

| Prop | Valores | |------|---------| | variant | default, destructive, outline, secondary, ghost, link | | size | xs, sm, default, lg, icon, icon-xs, icon-sm, icon-lg | | asChild | boolean (usa Slot do radix-ui) |

Card

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction } from '@brgs/react'

<Card size="sm">
  <CardHeader>
    <CardTitle>Título</CardTitle>
    <CardDescription>Descrição</CardDescription>
    <CardAction><Button size="sm">Ação</Button></CardAction>
  </CardHeader>
  <CardContent>Conteúdo</CardContent>
  <CardFooter><Button>Salvar</Button></CardFooter>
</Card>

Dialog

import { Dialog, DialogTrigger, DialogPortal, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from '@brgs/react'

<Dialog open={open} onOpenChange={setOpen}>
  <DialogTrigger>Abrir</DialogTrigger>
  <DialogPortal>
    <DialogContent showCloseButton>
      <DialogHeader>
        <DialogTitle>Confirmação</DialogTitle>
        <DialogDescription>Tem certeza?</DialogDescription>
      </DialogHeader>
      <DialogFooter>
        <Button variant="outline" onClick={() => setOpen(false)}>Cancelar</Button>
        <Button onClick={confirmar}>Confirmar</Button>
      </DialogFooter>
    </DialogContent>
  </DialogPortal>
</Dialog>

Tabs

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@brgs/react'

<Tabs defaultValue="aba1" variant="line" orientation="horizontal">
  <TabsList><TabsTrigger value="aba1">Aba 1</TabsTrigger></TabsList>
  <TabsContent value="aba1">Conteúdo</TabsContent>
</Tabs>

Accordion

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@brgs/react'

<Accordion type="single" collapsible>
  <AccordionItem>
    <AccordionTrigger value="item-1">Seção 1</AccordionTrigger>
    <AccordionContent value="item-1">Conteúdo</AccordionContent>
  </AccordionItem>
</Accordion>

Badge

import { Badge, badgeVariants } from '@brgs/react'

<Badge variant="destructive">Erro</Badge>
<Badge variant="outline">Rascunho</Badge>
<Badge asChild><a href="/tags">Link</a></Badge>

| variant | default, secondary, destructive, outline, ghost, link |

Avatar

import { Avatar, AvatarImage, AvatarFallback, AvatarBadge } from '@brgs/react'

<Avatar size="lg">
  <AvatarImage src="/photo.jpg" alt="Nome" />
  <AvatarFallback>FB</AvatarFallback>
  <AvatarBadge />
</Avatar>

Checkbox

import { Checkbox } from '@brgs/react'

<Checkbox checked={true} onCheckedChange={setChecked} />

Outros componentes

Input, Label, Select, Separator, Switch, Textarea, Skeleton — todos com API nativa estendida e data-slot.

Utilitário

import { cn } from '@brgs/react'
cn('base', condition && 'extra', className)

Licença

MIT