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.
Eyebrow
Kicker/sobretítulo em mono, caixa alta e cor primária.
Uso
Acima de títulos de seção. Aceita ícone via children.
Texto
Com ícone
Field
Layout de campos de formulário.
Usamos só para contato.
Heading
Tipografia de título via variantes. Escala responsiva já embutida nas variantes grandes.
Variantes
display-* para hero's; title-1…6 para hierarquia de página.
Heading display-2xl
display-2xl
60→72→96px · 3.75→4.5→6rem
Heading display-xl
display-xl
48→60→72px · 3→3.75→4.5rem
Heading display
display
36→48→60px · 2.25→3→3.75rem
Heading title-1
title-1
30→36→48px · 1.875→2.25→3rem
Heading title-2
title-2
24→30→36px · 1.5→1.875→2.25rem
Heading title-3
title-3
20→24px · 1.25→1.5rem
Heading title-4
title-4
18px · 1.125rem
Heading title-5
title-5
16px · 1rem
Heading title-6
title-6
14px · 0.875rem
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"
/>Section
Wrapper de seção com padding padrão e largura máxima.
Variantes
default centraliza o conteúdo (max-w-6xl); full ocupa a largura toda.
Conteúdo da seção
default
Conteúdo limitado a max-w-6xl
Largura total
full
Sem max-width no filho
Fundo premium (utility CSS)
bg-premium
Utility de fundo premium
Section Heading
Cabeçalho de seção: ícone/eyebrow, título e descrição.
Composições
Combine icon, eyebrow e align conforme o contexto.
Parceiros exclusivos
Descontos e vantagens para assinantes.
Tudo em um só lugar
Cursos, comunidade e clube.
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.