Blocks
Composições completas, com comportamento real. Cada bloco abaixo é uma rota da aplicação — não uma maquete dentro do showroom.
Blocos disponíveis
Sidebar responsiva, topbar com busca e conta, navegação inferior no mobile, KPIs, gráficos, atividade e os estados de loading/vazio/erro.
AppShellResponsiveSidebarKpiCardChartCardActivityFeed
Busca com debounce, filtros em painel lateral, ordenação, visibilidade de colunas, paginação, seleção e ação em massa — contra um data source substituível.
DataTableDataTableToolbarFilterSheetSearchFieldConfirmAction
Seis seções com o mesmo padrão: perfil, workspace, aparência, notificações, segurança e cobrança. Formulários com validação e submit assíncrono.
SettingsSectionFormActionsFormStatusField
Plano atual, medidores de uso, comparação de planos e histórico de faturas. Somente interface, sem gateway.
CardProgressMetricTable
Entrar, criar conta, recuperar e redefinir senha, convite e verificação por código. Sem provider de autenticação.
AuthLayoutFieldInputOTPSuccessState
Fluxo em três etapas com Stepper, transição direcional entre passos e conclusão.
StepperMotionSuccessState
Área, barras e linha em grade responsiva, com cores vindas dos tokens de chart.
ChartCardRecharts
Padrão de lista com Item — alternativa a card para conteúdo curto.
ItemItemGroup
Onde o código vive
A separação é o que permite apagar o showroom sem afetar a aplicação.
src/components/uiPrimitives do shadcn (61 componentes)src/components/msdrComponentes MSDR: layout, dados, feedback, fluxos, formssrc/components/blocksComposições SaaS consumidas pelas rotassrc/app/(app)Aplicação: dashboard, clientes, settings, billingsrc/app/(auth)Telas de autenticaçãosrc/app/(showroom)Este showroom — removívelOs blocos recebem dados por props e callbacks. Os mocks ficam em src/lib/mocks com o prefixo mock- e simulam latência, erro e resultado vazio — trocar por um backend real não exige mudar os componentes.