Atomic UI Kit v2.2
organism · nível 3 de 3

Organisms

Seções completas prontas para usar em páginas reais. Cada organismo combina múltiplas moléculas numa unidade autossuficiente com responsabilidade de interface clara.

Seções completas Copy-paste ready Responsivo
O03

Data Table

Tabela com cabeçalho de ação, colunas ordenáveis, checkboxes via peer/sr-only e ações no hover. Fix v2.2: checkboxes agora usam o padrão peer/sr-only (consistente com A07).

Usuários

3 registros

Lista de usuários
Status Plano Criado em Ações
AB

Ana Barros

ana@empresa.com

 Ativo Pro 12 jan 2025
CS

Carlos Silva

carlos@empresa.com

 Pendente Free 03 fev 2025
MF

Maria Ferreira

maria@empresa.com

 Inativo Enterprise 17 mar 2024

Exibindo 3 de 3 registros

1 / 1 
<!-- FIX v2.2: checkboxes = peer/sr-only, não accent-zinc-900 -->
<label class="flex items-center justify-center cursor-pointer">
  <input type="checkbox" class="peer sr-only" />
  <span class="w-[18px] h-[18px]
              flex items-center justify-center
              border border-zinc-300 bg-white
              peer-checked:bg-zinc-900
              peer-checked:border-zinc-900
              peer-focus-visible:ring-2
              peer-focus-visible:ring-zinc-900
              peer-focus-visible:ring-offset-2
              transition-all">
    <!-- SVG checkmark —
      opacity-0 / peer-checked:opacity-100 -->
  </span>
</label>

<!-- Coluna ordenável -->
<th aria-sort="ascending">
  <button class="flex items-center gap-1
                 mono text-[10px] font-semibold
                 uppercase tracking-widest
                 text-zinc-400 hover:text-zinc-700">
    Nome <!-- SVG sort -->
  </button>
</th>

<!-- Ações hover -->
<tr class="hover:bg-zinc-50 group">
  <td class="px-5 py-3.5 text-right">
    <div class="flex items-center justify-end gap-1
                opacity-0 group-hover:opacity-100
                transition-opacity">
      <!-- btn editar + btn excluir -->
    </div>
  </td>
</tr>
O05

Auth Form — Login

Formulário de autenticação completo. Logo + campos + CTA + link de registro.

Entrar

Acesse sua conta para continuar

Esqueceu a senha?
ou

Não tem conta? Criar conta

<div class="min-h-screen bg-zinc-50
           flex items-center justify-center p-4">
  <div class="w-full max-w-sm">
    <!-- Logo + título (text-center mb-8) -->
    <form class="space-y-4"
          method="post" action="/auth/login">
      <!-- Field e-mail -->
      <!-- Field senha + link "Esqueceu?" -->
      <!-- Checkbox lembrar (peer trick) -->
      <!-- Submit: w-full py-2.5 -->
      <!-- Divider "ou" -->
      <!-- Botão OAuth: border border-zinc-300 -->
    </form>
    <p class="text-center text-sm text-zinc-500 mt-6">
      Não tem conta?
      <a href="/registro"
         class="text-zinc-900 font-medium
                underline underline-offset-2
                hover:text-zinc-700">
        Criar conta
      </a>
    </p>
  </div>
</div>
O06

Settings Section

Padrão de configurações: título à esquerda, campos à direita. Responsivo: empilha em mobile.

Informações pessoais

Nome, e-mail e foto que aparecem no seu perfil público.

Usado para login e comunicações.

Notificações

Controle quais avisos você quer receber.

<div class="grid grid-cols-1 md:grid-cols-3
           gap-8 p-6 border-b border-zinc-100">
  <!-- Esquerda: título + desc -->
  <div>
    <h3 class="text-sm font-semibold text-zinc-900 mb-1">
      Seção
    </h3>
    <p class="text-xs text-zinc-500 leading-relaxed">
      Descrição.
    </p>
  </div>
  <!-- Direita: formulário -->
  <div class="md:col-span-2 space-y-4">
    <!-- campos -->
  </div>
</div>

<!-- Footer de ações -->
<div class="flex items-center justify-end gap-2
            px-6 py-4 bg-zinc-50">
  <!-- Cancelar + Salvar -->
</div>
O07

Pricing Block

Grid de planos com destaque no plano recomendado. Estrutura: nome + preço + features + CTA.

Free

R$ 0/mês

Para começar sem custo.

  • Até 3 projetos
  • 1 GB de armazenamento
  • Exportação PDF
  • Suporte prioritário
Recomendado

Pro

R$ 49/mês

Para profissionais e times pequenos.

  • Projetos ilimitados
  • 50 GB de armazenamento
  • Exportação PDF
  • Suporte prioritário

Enterprise

Sob consulta

Para times com necessidades avançadas.

  • Tudo do Pro
  • SSO / SAML
  • Armazenamento ilimitado
  • Suporte 24/7
<div class="grid grid-cols-1 md:grid-cols-3
           gap-px bg-zinc-200">

  <!-- Plano padrão: bg-white -->
  <div class="bg-white p-6 flex flex-col">
    <!-- Feature inclusa: SVG check text-zinc-400 -->
    <!-- Feature ausente: SVG × text-zinc-300 + text-zinc-400 -->
    <!-- CTA: border border-zinc-300 -->
  </div>

  <!-- Plano destacado: bg-zinc-900 -->
  <div class="bg-zinc-900 p-6 flex flex-col relative">
    <!-- Badge "Recomendado" -->
    <div class="absolute top-0 left-1/2
                -translate-x-1/2 -translate-y-1/2">
      <span class="inline-flex items-center px-2.5 py-0.5
                   text-[10px] font-semibold
                   bg-green-500 text-white
                   uppercase tracking-widest mono">
        Recomendado
      </span>
    </div>
    <!-- Texto: text-white / text-zinc-400
      Checks: text-green-400
      CTA: bg-white text-zinc-900 -->
  </div>
</div>
O08

Notification Panel

Painel de notificações com indicador de leitura (dot azul + bg tonal), agrupamento temporal e ações.

Notificações

3

Hoje

Carlos Silva comentou no projeto Refactor API.

14 min atrás

Deploy v2.4.1 concluído com sucesso em produção.

1 hora atrás

Uso do armazenamento acima de 85%.

3 horas atrás

Ontem

Ana Barros adicionou você ao projeto Design System.

ontem às 14:32

Ver todas as notificações → 
<div class="border border-zinc-200 bg-white">
  <!-- Header: título + badge + "Marcar todas" -->
  <div class="flex items-center justify-between
              px-4 py-3 border-b border-zinc-100"></div>

  <!-- Grupo temporal -->
  <p class="px-4 py-2 text-[10px] font-semibold
           uppercase tracking-widest text-zinc-400
           mono bg-zinc-50 border-b border-zinc-100">
    Hoje
  </p>

  <!-- Item não lido -->
  <div class="flex items-start gap-3 px-4 py-3.5
           bg-blue-50/40 border-b border-zinc-100
           hover:bg-zinc-50 transition-colors relative">
    <!-- Dot indicador -->
    <div class="absolute left-1.5 top-1/2
                -translate-y-1/2
                w-1.5 h-1.5 rounded-full bg-blue-500"></div>
    <!-- Avatar -->
    <div class="flex-1 min-w-0">
      <p class="text-sm text-zinc-900 leading-snug">
        Mensagem.
      </p>
      <p class="mono text-[10px] text-zinc-400 mt-1">
        14 min atrás
      </p>
    </div>
  </div>

  <!-- Item lido: sem bg azul, sem dot -->
  <!-- Ícone sistema: bg-green-50 border-green-200
    SVG text-green-600 (sucesso)
    bg-yellow-50 border-yellow-200
    SVG text-yellow-600 (warning) -->

  <!-- Footer -->
  <div class="px-4 py-2.5 border-t border-zinc-100 bg-zinc-50">
    <a href="#"
       class="text-xs text-zinc-500
              hover:text-zinc-900 font-medium">
      Ver todas →
    </a>
  </div>
</div>
O09

Calendar Picker

Seletor de data. Use aria-current="date" no dia atual e aria-pressed="true" no dia selecionado.

Março 2026

D
S
T
Q
Q
S
S
hoje selecionado evento 
<div class="border border-zinc-200 bg-white">

  <!-- Header: nav + mês -->
  <div class="flex items-center justify-between
              px-4 py-3 border-b border-zinc-200">
    <button aria-label="Mês anterior"
            class="w-8 h-8 flex items-center
                   justify-center text-zinc-500
                   hover:bg-zinc-100 hover:text-zinc-900
                   transition-colors">
      <!-- SVG chevron-left -->
    </button>
    <p class="text-sm font-semibold text-zinc-900"
       aria-live="polite">Março 2026</p>
    <!-- botão próximo mês -->
  </div>

  <div class="p-3">
    <!-- Dias da semana: grid-cols-7 -->

    <!-- Grid de dias -->
    <div class="grid grid-cols-7">

      <!-- Dia de outro mês: text-zinc-300 tabindex="-1" -->

      <!-- Dia normal -->
      <button type="button"
              class="h-8 w-8 mx-auto flex items-center
                     justify-center text-xs text-zinc-700
                     hover:bg-zinc-100
                     focus:outline-none focus:ring-2
                     focus:ring-zinc-900 transition-colors">
        15
      </button>

      <!-- Hoje -->
      <button type="button"
              aria-current="date"
              class="h-8 w-8 mx-auto flex items-center
                     justify-center text-xs font-bold
                     bg-zinc-900 text-white
                     focus:outline-none focus:ring-2
                     focus:ring-zinc-900 focus:ring-offset-2">
        25
      </button>

      <!-- Selecionado -->
      <button type="button"
              aria-pressed="true"
              class="h-8 w-8 mx-auto flex items-center
                     justify-center text-xs font-semibold
                     bg-zinc-200 text-zinc-900
                     focus:outline-none focus:ring-2
                     focus:ring-zinc-900">
        26
      </button>

      <!-- Com evento (dot) -->
      <button type="button"
              class="h-8 w-8 mx-auto flex flex-col
                     items-center justify-center
                     hover:bg-zinc-100 relative
                     transition-colors">
        <span class="text-xs text-zinc-700">15</span>
        <span class="absolute bottom-1 w-1 h-1
                   bg-blue-500 rounded-full"></span>
      </button>

    </div>
  </div>

  <!-- Footer: botão "Hoje" + legenda -->
  <div class="border-t border-zinc-100 px-4 py-2.5
              flex items-center justify-between">
    <button type="button"
            class="text-xs font-medium text-zinc-700
                   hover:text-zinc-900
                   underline underline-offset-2">
      Hoje
    </button>
  </div>
</div>
O10

Hero Section

Seção de entrada de produto/landing page. Headline + subline + CTAs + eyebrow opcional.

v2.3 disponível

Construa interfaces
sem fricção.

Kit de componentes HTML + Tailwind. Copie, cole, customize. Sem dependências, sem configuração.

Começar agora Ver componentes
Zero JS WCAG 2.1 AA Copy-paste 
<section class="bg-white border-b border-zinc-200">
  <div class="max-w-4xl mx-auto px-8 py-20 text-center">

    <!-- Eyebrow -->
    <div class="inline-flex items-center gap-2
                px-3 py-1 border border-zinc-200
                bg-zinc-50 mb-8">
      <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
      <span class="mono text-[10px] font-semibold
                 uppercase tracking-widest text-zinc-600">
        novidade
      </span>
    </div>

    <!-- Headline -->
    <h1 class="text-5xl md:text-6xl font-bold
             tracking-tight text-zinc-900
             leading-none mb-6">
      Headline principal<br/>
      <span class="text-zinc-400">Complemento muted.</span>
    </h1>

    <p class="text-lg text-zinc-500 leading-relaxed
           max-w-xl mx-auto mb-10">Subline.</p>

    <!-- CTAs: flex gap-3, primary + secondary -->
    <!-- Social proof: flex gap-6 mt-12 text-xs -->
  </div>
</section>
O12

Onboarding Wizard

Fluxo de configuração inicial em múltiplos passos. Stepped progress + conteúdo de etapa + navegação linear.

Etapa 2 de 4

Configure seu espaço

Personalize como seu workspace aparece para a equipe.

Você pode alterar essas informações a qualquer momento em Configurações → Workspace.

<div class="border border-zinc-200 bg-white overflow-hidden">

  <!-- Header: progresso + título -->
  <div class="px-8 pt-8 pb-6 border-b border-zinc-100">
    <div class="flex items-center gap-1 mb-6"
         role="progressbar"
         aria-valuenow="2"
         aria-valuemin="0"
         aria-valuemax="4">
      <!-- Concluído → flex-1 h-1 bg-zinc-900 -->
      <!-- Pendente → flex-1 h-1 bg-zinc-200 -->
    </div>
    <p class="mono text-[10px] font-semibold
             uppercase tracking-widest text-zinc-400 mb-2">
      Etapa 2 de 4
    </p>
    <h2 class="text-xl font-bold text-zinc-900 mb-1">Título</h2>
    <p class="text-sm text-zinc-500">Subtítulo.</p>
  </div>

  <!-- Body: px-8 py-6 space-y-4 -->

  <!-- Footer: prev + next -->
  <div class="px-8 pb-8
              flex items-center justify-between">
    <!-- Ghost "Anterior" com chevron -->
    <!-- Primary "Continuar" / "Concluir" -->
  </div>
</div>
O13

Kanban Board

Board de tarefas em colunas. Estrutura estática — drag-and-drop via biblioteca da sua stack. Cards com meta-info compacta.

A fazer

3

Revisar documentação da API

Backend
CS

Criar testes E2E para login

Alta
AB

Atualizar dependências npm

29 mar
MF

Em progresso

2

Redesign tela de configurações

60%
AB
CS

Integração com Stripe

Infra
MF

Revisão

1

PR #142 — Refactor auth module

2
AB

Concluído

1

Setup CI/CD pipeline

25 mar
CS
<!-- Board: scroll horizontal -->
<div class="flex gap-4 overflow-x-auto min-w-max">

  <!-- Coluna -->
  <div class="w-64 flex-shrink-0">
    <!-- Header: dot + label + count + btn+ -->
    <div class="flex items-center justify-between mb-3">
      <div class="flex items-center gap-2">
        <!-- Dot: w-2 h-2 rounded-full bg-{color} -->
        <p class="text-xs font-semibold text-zinc-600">
          A fazer
        </p>
        <span class="mono text-[10px] text-zinc-400
                   bg-zinc-100 px-1.5 py-0.5">3</span>
      </div>
    </div>

    <!-- Cards: space-y-2 -->
    <div class="space-y-2">
      <!-- Card padrão -->
      <div class="bg-white border border-zinc-200
               p-3 hover:border-zinc-400
               transition-colors cursor-grab">
        <p class="text-xs font-medium text-zinc-900
                 mb-2 leading-snug">Título</p>
        <!-- Meta: badge + avatar -->
      </div>
      <!-- Card ativo: border-zinc-900 -->
      <!-- Card concluído:
        bg-zinc-50 opacity-75 line-through -->
    </div>
  </div>
</div>

<!-- Dots de coluna:
  A fazer     → bg-zinc-300
  Em progresso → bg-yellow-400
  Revisão     → bg-blue-400
  Concluído   → bg-green-400
  Bloqueado   → bg-red-400
-->