Componentes
Primitivos do @bacdmy/ui. Use a sidebar ou âncoras (#button, #logo…) para ir direto a uma seção.
Estados
Com imagem vs. só fallback (iniciais).
Com imagem
AvatarImage + AvatarFallback
Só fallback
Quando a imagem falha ou não existe
Badge
Etiquetas de status e destaque.
Variantes
Escolha pela semântica, não pela cor isolada.
default
Destaque principal
secondary
Neutro / secundário
outline
Contorno, baixo contraste
destructive
Erro / perigo
Breadcrumb
Navegação hierárquica.
Variantes
default = CTA; secondary/outline/ghost = hierarquia menor; destructive = perigo; link = texto.
default
secondary
outline
ghost
destructive
link
Tamanhos
xs → lg para texto; icon* para botões só com ícone.
xs
sm
default
lg
icon
Card
Container para agrupar conteúdo.
Acesso a todos os cursos e ao clube de benefícios.
Cropper
Primitivo de recorte com proporção fixa (@origin-space/image-cropper). Fluxos de upload ficam no app consumidor.
Uso básico
Zoom/pan + área de recorte fixa. Props principais: image, aspectRatio, onCropChange.
import {
Cropper,
CropperCropArea,
CropperDescription,
CropperImage
} from '@bacdmy/ui/cropper'
<Cropper image={src} aspectRatio={16 / 9} onCropChange={setCrop}>
<CropperDescription />
<CropperImage />
<CropperCropArea />
</Cropper>Empty
Estado vazio de listas e painéis.
Composição
EmptyMedia (icon|…) + EmptyTitle + EmptyDescription.
Field
Layout de campos de formulário.
Usamos só para contato.
Input
Campo de texto.
Input Group
Input com addons.
Logo
Marca brainstorm.academy — três formas via props booleanas.
Variantes
Completo (default), reduced (wordmark curto) e iconOnly (só o símbolo).
Completo
Logo + wordmark — headers e footers
reduced
Wordmark reduzido — espaços apertados
iconOnly
Só o ícone — sidebar, favicon-like
import { Logo } from '@bacdmy/ui/logo'
<Logo width={140} />
<Logo reduced width={120} />
<Logo iconOnly width={40} />Composição
Lista + trigger + content + link — só @bacdmy/ui.
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger
} from '@bacdmy/ui/navigation-menu'
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Produtos</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink href="#">Cursos</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>Pagination
Navegação entre páginas.
Phone Input
Telefone internacional (react-phone-number-input).
Básico
Valor em E.164; defaultCountry define o país inicial.
import { PhoneInput } from '@bacdmy/ui/phone-input'
<PhoneInput
value={value}
onChange={setValue}
defaultCountry="BR"
/>Orientações
default = horizontal; orientation="vertical" em flex rows.
horizontal
Acima
Abaixo
vertical
ABSidebar
Shell de navegação (SidebarProvider + partes). Este site de docs usa o mesmo primitivo.
Layout
Provider + Sidebar + Inset. Use h-svh no provider; SidebarContent com overflow-auto e min-h-0.
import {
SidebarProvider,
Sidebar,
SidebarHeader,
SidebarContent,
SidebarFooter,
SidebarInset,
SidebarTrigger
} from '@bacdmy/ui/sidebar'
<SidebarProvider className="h-svh">
<Sidebar>
<SidebarHeader>{/* marca */}</SidebarHeader>
<SidebarContent>{/* menus */}</SidebarContent>
<SidebarFooter>{/* rodapé */}</SidebarFooter>
</Sidebar>
<SidebarInset>
<header>
<SidebarTrigger />
</header>
{children}
</SidebarInset>
</SidebarProvider>Skeleton
Placeholder de carregamento.
Tipos
success / error — toast() vem de sonner; Toaster de @bacdmy/ui.
success
error
import { Toaster } from '@bacdmy/ui/sonner'
import { toast } from 'sonner'
// no layout / providers:
<Toaster />
toast.success('Salvo com sucesso')
toast.error('Algo falhou')Table
Tabela de dados.
| Curso | Nível |
|---|---|
| After Effects | Intermediário |
| Premiere | Iniciante |
Textarea
Campo multilinha.