Blocos
Blocos
Layouts compostos construídos a partir dos primitivos do core.
Blocos vivem em @uranus-workspace/blocks e são composições opinativas dos primitivos do @uranus-workspace/design-system. Eles existem para que times de produto não reimplementem o mesmo PageHeader ou SignInForm em cinco apps com cinco espaçamentos diferentes.
Um bloco é a abstração certa quando:
- Múltiplos produtos precisam do mesmo formato de layout.
- O layout tem um contrato de acessibilidade que vale a pena centralizar (landmarks, ordem de headings).
- Ele compõe apenas primitivos existentes — um bloco nunca redefine um botão ou um input.
Princípios
- Apresentacionais por padrão. Blocos de autenticação não conhecem NextAuth, Clerk ou Supabase. Eles aceitam
onSubmit,loadingeerrorcomo props. - Roteamento agnóstico. Blocos com links aceitam
linkComponentou se vinculam aoLinkProviderno topo da árvore. O default é<a>. - Tokens, não cores cruas. Toda cor passa pelos tokens semânticos do
@uranus-workspace/tailwind-config.
Catálogo
Chrome
Estrutura global de uma aplicação dashboard.
- AppShell — Wrapper que combina sidebar + header + main.
- AppSidebar — Navegação lateral opinada com grupos, ícones e footer.
- AppHeader — Top bar com trigger, busca, notificações e user menu.
- AuthLayout — Wrapper split-screen para fluxos de autenticação.
- PageHeader — Cabeçalho por tela com
<h1>e ações.