VATSE UI • Sistema de interface

Hero • Intro 6 modelos (variações de layout e ênfase)

Modelo 1 • Minimal (intro)

Smart UI

Framework component-first com temas e modo claro/escuro. Selecione um item no menu para ver preview + snippet.

<div class="sc-card">
  <h3>Smart UI</h3>
  <p class="doc-muted">Framework component-first...</p>
  <div style="display:flex; gap:10px; flex-wrap:wrap;">
    <button class="sc-btn sc-btn-primary">Começar</button>
    <button class="sc-btn sc-btn-glass">Theming</button>
  </div>
</div>

Modelo 2 • Split com mídia

<div class="sc-banner">
  <div class="sc-banner-inner">
    <div class="sc-banner-grid">
      <div>
        <span class="sc-badge">Hero</span>
        <h2 class="sc-banner-title">Crie interfaces bonitas...</h2>
        <p class="sc-banner-subtitle">Tokens + componentes...</p>
        <div class="sc-banner-actions">
          <button class="sc-btn sc-btn-primary">Ver Grid</button>
          <button class="sc-btn sc-btn-outline">Ver Banners</button>
        </div>
      </div>
      <div class="sc-banner-media sc-banner-media--ratio"></div>
    </div>
  </div>
</div>

Modelo 3 • Centered (chamada)

<div class="sc-banner sc-banner--center">
  <div class="sc-banner-inner">
    <h2 class="sc-banner-title">Documentação focada</h2>
    <p class="sc-banner-subtitle">A sidebar mostra só o componente...</p>
    <div class="sc-banner-actions">
      <button class="sc-btn sc-btn-primary">Botões</button>
      <button class="sc-btn sc-btn-glass">Forms</button>
    </div>
  </div>
</div>

Modelo 4 • Glass (destaque)

Glass

Exemplo

Smart UI

Card dentro do hero para validar superfícies.

<div class="sc-banner sc-banner--glass">
  <div class="sc-banner-inner">
    <div class="sc-banner-grid">
      <div>
        <span class="sc-badge sc-badge-info">Glass</span>
        <h2 class="sc-banner-title">Perfeito para temas...</h2>
        <p class="sc-banner-subtitle">Valide contraste e blur...</p>
        <div class="sc-banner-actions">...</div>
      </div>
      <div class="sc-card sc-card-hover">...</div>
    </div>
  </div>
</div>

Modelo 5 • Announcement (barra)

<div class="sc-banner sc-banner--announce">
  <div class="sc-banner-inner">
    <div class="sc-banner-grid">
      <div>
        <span class="sc-badge">NOVO</span>
        <span class="doc-muted">13 temas + light/dark...</span>
      </div>
      <div class="sc-banner-actions">
        <button class="sc-btn sc-btn-primary sc-btn-sm">Ver temas</button>
      </div>
    </div>
  </div>
</div>

Modelo 6 • Hero com métricas (cards)

Pronto

Temas

13

Modo

Light/Dark

JS

Vanilla

A11y

ARIA

<div class="sc-banner sc-banner--compact">
  <div class="sc-banner-inner">
    <div class="sc-banner-grid">
      <div>...</div>
      <div class="sc-grid sc-cols-2 sc-gap-2">
        <div class="sc-card sc-card-compact sc-card-hover">...</div>
        <div class="sc-card sc-card-compact sc-card-hover">...</div>
        <div class="sc-card sc-card-compact sc-card-hover">...</div>
        <div class="sc-card sc-card-compact sc-card-hover">...</div>
      </div>
    </div>
  </div>
</div>

Tipografia 8 modelos (hierarquia, tamanhos, pesos, texto longo, listas, links, código)

Modelo 1 • Headings + display

Título (Display)

Subtítulo H2

Seção H3

Parágrafo de apoio para validar hierarquia, contraste e ritmo.

<div class="sc-card">
  <div class="sc-display-2">Título (Display)</div>
  <h2>Subtítulo H2</h2>
  <h3>Seção H3</h3>
  <p class="doc-muted">Parágrafo de apoio...</p>
</div>

Modelo 2 • Tamanhos + pesos + espaçamento

XS • medium • tracking-wide

SM • normal

LG • semibold • leading-tight

2XL • black

Use as utilitárias de tipografia para consistência sem “inline hacks”.

<div class="sc-card">
  <div class="sc-text-xs sc-font-medium sc-tracking-wide">...</div>
  <div class="sc-text-sm sc-font-normal">...</div>
  <div class="sc-text-lg sc-font-semibold sc-leading-tight">...</div>
  <div class="sc-text-2xl sc-font-black">...</div>
</div>

Modelo 3 • Lead + destaque + muted

Texto lead para abrir uma seção com bom ritmo.

Texto normal com highlight e leitura confortável.

Use doc-muted para metadados e texto de apoio.

<div class="sc-card">
  <p class="sc-text-lead">Texto lead...</p>
  <p>Texto normal com <span class="sc-text-highlight">highlight</span>...</p>
  <p class="doc-muted">Use <code>doc-muted</code>...</p>
</div>

Modelo 4 • Branding (gradiente)

VATSE UI em movimento

Gradiente de marca com contraste preservado em cada tema.

<div class="sc-card">
  <div class="sc-display-2 sc-text-gradient">Smart UI Gradient</div>
  <p class="doc-muted">atil em heros/brandings...</p>
</div>

Modelo 5 • Links + ênfases (inline)

Link padrão: ir para tipografia • strong • em • inline code

Valide estados de hover/focus e contraste em light/dark.

<div class="sc-card">
  <p>
    Link padrão: <a href="#doc-typography">ir para tipografia</a> •
    <strong>strong</strong> • <em>em</em> • <code>inline code</code>
  </p>
  <p class="doc-muted">Valide estados de hover/focus...</p>
</div>

Modelo 6 • Listas (UL/OL)

Lista (UL)

Item 1
Item 2
Item 3

Lista (OL)

Passo 1
Passo 2
Passo 3

<div class="sc-card">
  <div class="sc-grid sc-cols-2 sc-gap-3">
    <div>
      <div class="doc-muted">Lista (UL)</div>
      <ul><li>Item 1</li></ul>
    </div>
    <div>
      <div class="doc-muted">Lista (OL)</div>
      <ol><li>Passo 1</li></ol>
    </div>
  </div>
</div>

Modelo 7 • Texto longo (prose) + citação

Título de artigo

Um parágrafo com texto mais longo para validar leitura, espaçamento e contraste. Use tokens para manter consistência entre temas.

“Uma citação curta para validar estilo e hierarquia visual.”

<div class="sc-card">
  <h3>Título de artigo</h3>
  <p>Um parágrafo com texto mais longo... <a href="#doc-tokens">tokens</a>...</p>
  <blockquote>“Uma citação curta...”</blockquote>
</div>

Modelo 8 • Código (bloco) + snippet

Use <pre><code> para trechos longos (ex.: docs).

                      const root = document.documentElement;
                    

<pre><code>const root = document.documentElement;</code></pre>

Botões 7 modelos (variantes, grupos, ícones, loading, FX)

Modelo 1 • Variantes

Efeitos • Animações (opt-in)

<button class="sc-btn sc-btn-primary">Primary</button>
<button class="sc-btn sc-btn-secondary">Secondary</button>
<button class="sc-btn sc-btn-success">Success</button>
<button class="sc-btn sc-btn-danger">Danger</button>
<button class="sc-btn sc-btn-outline">Outline</button>
<button class="sc-btn sc-btn-glass">Glass</button>

<!-- Efeitos (opt-in) -->
<button class="sc-btn sc-btn-primary sc-btn-shine" data-spotlight="true">...</button>
<button class="sc-btn sc-btn-outline sc-btn-pop">Pop</button>
<button class="sc-btn sc-btn-primary sc-btn-float">Float</button>
<button class="sc-btn sc-btn-glass sc-btn-pulse">Pulse</button>
<button class="sc-btn sc-btn-cutframe">
  Apply for access <i class="sc-icon" data-smart-icon="arrow-right"></i>
</button>
<button class="sc-btn sc-btn-secondary sc-btn-swap">
  <span class="sc-btn-swap-text">Comprar</span>
  <span class="sc-btn-swap-icon"><i class="sc-icon" data-smart-icon="cart"></i></span>
</button>
<button class="sc-btn sc-btn-soft">Soft</button>
<button class="sc-btn sc-btn-ghost">Ghost</button>
<button class="sc-btn sc-btn-gradient">Gradient</button>

Modelo 2 • Tamanhos

<button class="sc-btn sc-btn-primary sc-btn-sm">Small</button>
<button class="sc-btn sc-btn-primary">Default</button>
<button class="sc-btn sc-btn-primary sc-btn-lg">Large</button>

Modelo 3 • Pill

<button class="sc-btn sc-btn-primary sc-btn-pill">Assinar</button>
<button class="sc-btn sc-btn-outline sc-btn-pill">Ver preços</button>
<button class="sc-btn sc-btn-glass sc-btn-pill">Compartilhar</button>

Modelo 4 • Icon buttons

<button class="sc-btn sc-btn-outline sc-btn-icon" aria-label="Favoritar">
  <i class="sc-icon" data-smart-icon="star"></i>
</button>
<button class="sc-btn sc-btn-primary sc-btn-icon" aria-label="Adicionar">
  <i class="sc-icon" data-smart-icon="plus"></i>
</button>
<button class="sc-btn sc-btn-glass sc-btn-icon" aria-label="Configurações">
  <i class="sc-icon" data-smart-icon="settings"></i>
</button>

Modelo 5 • Grupo

<div class="sc-btn-group" role="group" aria-label="Grupo">
  <button class="sc-btn sc-btn-glass">Dia</button>
  <button class="sc-btn sc-btn-glass">Semana</button>
  <button class="sc-btn sc-btn-glass">Mês</button>
</div>

Modelo 6 • Estados (disabled/loading)

<button class="sc-btn sc-btn-primary" disabled>Disabled</button>
<button class="sc-btn sc-btn-primary is-loading" aria-disabled="true">Carregando</button>

Modelo 7 • FX (box-shadow) estavam em “Efeitos”

<!-- FX (opt-in) -->
<button class="sc-btn sc-btn-ghost sc-btn-fx-fill">Fill</button>
<button class="sc-btn sc-btn-ghost sc-btn-fx-pulse">Pulse</button>
<button class="sc-btn sc-btn-ghost sc-btn-fx-slide">Slide</button>
<button class="sc-btn sc-btn-ghost sc-btn-fx-up">Up</button>
<button class="sc-btn sc-btn-ghost sc-btn-fx-raise">Raise</button>
<button class="sc-btn sc-btn-ghost sc-btn-fx-offset">Offset</button>
<button class="sc-btn sc-btn-ghost sc-btn-fx-close">Close</button>

Ícones SmartIcons (data-smart-icon) + copiar snippet

Consumo recomendado: use <i data-smart-icon="nome"></i>. A lib expõe smartIcons.createIcons() e smartIcons.renderIcon().

<!-- 1) Inclua o bundle -->
<script src="smart-icons-lib/dist/smarticons.js"></script>

<!-- 2) Use em qualquer lugar -->
<i class="sc-icon" data-smart-icon="home"></i>
<i class="sc-icon" data-smart-icon="calendar-check"></i>

<!-- 3) Se você injetar HTML dinamicamente, re-scan: -->
<script>smartIcons.createIcons(document);</script>

Cards 8 modelos + extras (grid real, media, gradient, reveal, notify, 3D, animações)

Modelo 1 Cards em grid (não “banner”)

Plano Pro -20%

Base sólida para qualquer layout.

Plano Team

Feito para times e dashboards.

Plano Lite NEW

Perfeito para landing pages.

<div class="sc-grid sc-cols-3 sc-gap-3">
  <div class="sc-card sc-card-outline sc-card-compact sc-card-hover">...</div>
  <div class="sc-card sc-card-outline sc-card-compact sc-card-hover">...</div>
  <div class="sc-card sc-card-outline sc-card-compact sc-card-hover">...</div>
</div>

Modelo 2 Media cards (altura consistente)

Blog/Portfolio

Imagem + texto em card compacto.

Case Study

Shine no hover (optin).

Galeria

Use com grid responsivo.

<div class="sc-card sc-card-media sc-card-outline sc-card-shine">
  <img src="..." alt="..." />
  <div class="sc-card-body">...</div>
</div>

Modelo 3 Gradient border + glow

Popular do mês

Borda viva + glow.

Smart UI

Upgrade

Destaque para planos/CTAs.

Beta

Use como feature card.

Acesso

<div class="sc-card sc-card-outline sc-card-gradient sc-card-glow">...</div>

Modelo 4 Reveal CTA (animação)

Card com CTA

No hover, o botão sobe e fica clicável.

Assinatura

timo para pricing/upsell.

<div class="sc-card sc-card-outline sc-card-reveal sc-card-hover sc-card-float" style="position:relative;">
  ...
  <div class="sc-card-cta"><button class="sc-btn sc-btn-primary sc-btn-sm">Saiba mais</button></div>
</div>

Modelo 5 Notification / info

Novo Bem-vindo ao Smart UI

Card de aviso com barra gradiente lateral.

OK Integração pronta

Perfeito para alertas em dashboards.

<div class="sc-card sc-card-notify sc-card-outline">...</div>

Modelo 6 3D + Glow

3D + Glow

Com smart-ui.js (tilt).

Interativo

Bom para “feature cards”.

Premium

Glow sem JS + tilt via JS.

<div class="sc-card sc-card-3d sc-card-outline sc-card-glow">...</div>

Modelo 7 Animações (optin)

Float

Hover/focus levanta o card.

Flip (frente)

Passe o mouse ou foque.

Flip (verso)

Conteúdo alternativo.

Breathe

Animação suave contínua.

<div class="sc-card sc-card-outline sc-card-float">...</div>
<div class="sc-card sc-card-outline sc-card-breathe">...</div>

<div class="sc-card-flip">
  <div class="sc-card-flip-inner">
    <div class="sc-card sc-card-outline sc-card-flip-front">...</div>
    <div class="sc-card sc-card-outline sc-card-flip-back">...</div>
  </div>
</div>

Extra App Icon Glow (pointer)

VATSE OS

<div class="sc-card-app" data-card-fx="icon-glow">
  <button class="sc-card-app-menu" type="button" aria-label="Mais opções">
    <i class="sc-icon" data-smart-icon="more-horizontal"></i>
  </button>

  <div class="sc-card-app-visual" aria-hidden="true">
    <img class="sc-card-app-icon" src="icon.png" alt="" />
  </div>

  <div class="sc-card-app-inner">
    <img class="sc-card-app-icon" src="icon.png" alt="App" />
    <h3 class="sc-card-app-title">Beeper</h3>
  </div>
</div>
<!-- Requer smart-ui.js (initCardPointerFX) -->

Extra Product Cards (grid)

VATSE OS

Operação

Gestão de ponta a ponta

Comercial, projetos, contratos, financeiro e equipe em uma operação conectada.

Projetos
Financeiro

Smart UI

Biblioteca

Interface proprietária

Componentes reutilizáveis para produtos VATSE com estados, acessibilidade e identidade consistente.

Tokens
Acessível

API CRUD

Integração

Base para aplicações

Estrutura documentada para operações que precisam de dados, permissões e integrações confiáveis.

Endpoints
Permissões
Auditoria

Ecossistema

Conectado

Tecnologia aplicada

Recursos de produto, automação e operação organizados em torno do trabalho real da VATSE.

Pessoas
Dados
Entrega
Qualidade

<div class="sc-product-grid">
  <article class="sc-product-card" style="--sc-product-accent:#ff8066;">
    <div class="sc-product-head">
      <h3 class="sc-product-title">Product</h3>
      <div class="sc-product-price">¥2,000</div>
    </div>
    <div class="sc-product-thumb"><img src="..." alt="..." /></div>
    <p class="sc-product-category">Category</p>
    <p class="sc-product-desc">Descrição...</p>
    <ul class="sc-product-tags"><li class="sc-product-tag">Tag</li></ul>
    <button class="sc-btn sc-product-cta">Add to cart <i class="sc-icon" data-smart-icon="cart"></i></button>
  </article>
</div>

Inputs 10 modelos (tipos reais, estados, addons, file, textarea, ranges)

Inputs são component-first: combine .sc-input com wrappers optin quando quiser efeitos.

Modelo 1 Text / Email / Password

<input class="sc-input" placeholder="Nome" />
<div class="sc-input-group">
  <span class="sc-input-icon"><i class="sc-icon" data-smart-icon="search"></i></span>
  <input class="sc-input" placeholder="Buscar..." />
</div>

Modelo 2 Search (pill)

<div class="sc-input-group" style="border-radius:999px;">
  <span class="sc-input-icon">...</span>
  <input class="sc-input" placeholder="Pesquisar..." />
  <button class="sc-btn sc-btn-primary sc-btn-sm">Buscar</button>
</div>

Modelo 3 Floating label

Primeiro nome

Email

<div class="sc-field sc-field-float">
  <input class="sc-input" placeholder=" " />
  <label class="sc-label">Email</label>
</div>

Modelo 4 Glow shell (conic border)

<div class="sc-input-shell sc-input-shell-glow">
  <div class="sc-input-shell-inner">
    <span class="sc-input-icon">...</span>
    <input class="sc-input" placeholder="Explore..." />
  </div>
</div>

Modelo 5 Tipos reais (number / date / time)

Quantidade

Use type="number" para stepper nativo.

Data

Theme-aware + tabular nums.

Horário

DateTime

Boa para agendamentos.

<input class="sc-input" type="number" value="2" />
<input class="sc-input" type="date" />
<input class="sc-input" type="time" />
<input class="sc-input" type="datetime-local" />

Modelo 6 Textarea (mensagens)

Mensagem

Textarea com resize vertical + focus ring.

<div class="sc-field">
  <label class="sc-label">Mensagem</label>
  <textarea class="sc-textarea" placeholder="Escreva uma mensagem⬦"></textarea>
  <div class="sc-help">...</div>
</div>

Modelo 7 File input (nativo, estilizado)

Anexar arquivo

O botão do arquivo é estilizado via ::file-selector-button.

<input class="sc-input" type="file" />

Modelo 8 Addons (prefix/sufix) + ação

R$ BRL

<div class="sc-input-group">
  <span class="sc-input-addon">R$</span>
  <input class="sc-input" type="number" />
  <span class="sc-input-addon">BRL</span>
</div>

<div class="sc-input-group">
  <span class="sc-input-icon">...</span>
  <input class="sc-input" type="search" />
  <button class="sc-btn sc-btn-ghost sc-input-action">...</button>
</div>

Modelo 9 Estados (disabled / readonly / valid / invalid)

Disabled

Use disabled sempre que possível (A11y).

Readonly

Bom para inputs “copyable”.

Valid

Classe .is-valid.

Invalid

Classe .is-invalid.

<input class="sc-input" disabled />
<input class="sc-input" readonly />
<input class="sc-input is-valid" />
<input class="sc-input is-invalid" />

Modelo 10 Range (fill automático + steps)

Volume Progresso (steps)

<input class="sc-range" type="range" min="0" max="100" value="35" />
<input class="sc-range sc-range-steps" type="range" value="60" />
<!-- Requer smart-ui.js (initRangeSliders) -->

Extra Range expressivo (theme-aware)

<input class="sc-range sc-range-kawaii" type="range" min="1" max="20" value="7" />
<input class="sc-range sc-range-kawaii" style="--sc-range-base:#8cc8e4;" type="range" value="4" />

Formulários 6 modelos (login, inline, subscribe, textarea, checks/radio, otp/upload)

Modelo 1 • Login

Email

Nunca compartilharemos seu email.

Senha

<div class="sc-card sc-card-outline">
  <div class="sc-field">
    <label class="sc-label">Email</label>
    <input class="sc-input" type="email" />
  </div>
  <div class="sc-field">
    <label class="sc-label">Senha</label>
    <input class="sc-input" type="password" />
  </div>
  <button class="sc-btn sc-btn-primary sc-btn-pill">Entrar</button>
</div>

Modelo 2 • Inline

<div class="sc-card sc-card-outline">
  <div style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
    <input class="sc-input" placeholder="Buscar⬦" />
    <div class="sc-select-menu" data-value="all">...</div>
    <button class="sc-btn sc-btn-primary">Filtrar</button>
  </div>
</div>

Modelo 3 • Subscribe

<div class="sc-card sc-card-outline sc-subscribe-card">
  <div class="sc-subscribe-title">SUBSCRIBE</div>
  <div class="sc-field">
    <label class="sc-label">Seu e-mail</label>
    <input class="sc-input" type="email" />
  </div>
  <button class="sc-btn sc-btn-primary sc-subscribe-submit sc-btn-pop">SUBMIT</button>
</div>

Modelo 3 • Textarea

<textarea class="sc-textarea" placeholder="Escreva uma mensagem⬦"></textarea>

Modelo 4 • Checkbox / Radio

<!-- Checkbox (custom) -->
<label class="sc-checkbox">
  <input type="checkbox" />
  <span class="sc-checkbox-box"></span>
  <span class="sc-checkbox-label">Padrão</span>
</label>

<label class="sc-checkbox sc-checkbox-draw">
  <input type="checkbox" checked />
  <span class="sc-checkbox-box">
    <svg viewBox="0 0 64 64"><path d="..." /></svg>
  </span>
  <span class="sc-checkbox-label">Draw</span>
</label>

<label class="sc-checkbox sc-checkbox-swap">
  <input type="checkbox" checked />
  <span class="sc-checkbox-box">
    <span class="sc-cbx-off"><i class="sc-icon" data-smart-icon="volume-x"></i></span>
    <span class="sc-cbx-on"><i class="sc-icon" data-smart-icon="volume-2"></i></span>
  </span>
  <span class="sc-checkbox-label">Swap</span>
</label>

<!-- Radio (custom) -->
<label class="sc-radio">
  <input type="radio" name="plan" checked />
  <span class="sc-radio-dot"></span>
  <span class="sc-radio-label">Plano básico</span>
</label>

<!-- Segmented (glider) -->
<div class="sc-radio-seg sc-radio-seg-glass">
  <input type="radio" id="seg-a" name="seg" checked data-glider-bg="..." />
  <label class="sc-radio-seg-btn" for="seg-a">Silver</label>
  <input type="radio" id="seg-b" name="seg" data-glider-bg="..." />
  <label class="sc-radio-seg-btn" for="seg-b">Gold</label>
  <span class="sc-radio-seg-glider"></span>
</div>
<!-- Requer smart-ui.js (initRadioSegments) -->

<!-- Rating -->
<div class="sc-rating">
  <input type="radio" id="rate-5" name="rate" value="5" />
  <label for="rate-5"><i class="sc-icon" data-smart-icon="star"></i></label>
  ...
</div>

Modelo 5 • OTP (verificação)

Digite o código OTP

Enviamos um código para seu número.

<div class="sc-otp">
  <input class="sc-input sc-otp-input" inputmode="numeric" />
  <input class="sc-input sc-otp-input" inputmode="numeric" />
  <input class="sc-input sc-otp-input" inputmode="numeric" />
  <input class="sc-input sc-otp-input" inputmode="numeric" />
</div>
<!-- Requer smart-ui.js (initOtpInputs) -->

Modelo 6 • Upload (dropzone)

Arraste e solte

ou clique para selecionar um arquivo

Nenhum arquivo selecionado

<div class="sc-file-drop" data-file-name=".sc-file-drop-out">
  <label class="sc-file-drop-label" for="file">...</label>
  <input id="file" type="file" />
  <div class="sc-file-drop-file">
    <span class="sc-file-drop-out">Nenhum arquivo selecionado</span>
  </div>
</div>
<!-- Requer smart-ui.js (initFileDrops) -->

Toggle / Switch (6 modelos)

Padrão Small Large Sun/Moon Wobble Cyber/Tech Disabled (Glass)

<label class="sc-toggle">
  <input type="checkbox" />
  <span class="sc-toggle-track">
    <span class="sc-toggle-thumb"></span>
  </span>
  <span class="sc-toggle-label">Padrão</span>
</label>

<label class="sc-toggle sc-toggle-sunmoon">...</label>
<label class="sc-toggle sc-toggle-wobble">...</label>
<label class="sc-toggle sc-toggle-cyber">...</label>
<label class="sc-toggle sc-toggle-glass">...</label>

Modelo 5 • Validação

Modelo 6 • Select custom

Tabelas 10 modelos + snippets (ações, badges, sticky header, seleção, scroll)

Extra • Como aplicar

Use .sc-table-container para scroll horizontal e .sc-table para a tabela. Combine modificadores como .sc-table-striped, .sc-table-bordered, .sc-table-hover, .sc-table-compact, .sc-table-sticky.

<div class="sc-table-container">
  <table class="sc-table sc-table-striped sc-table-hover">
    <thead><tr><th>Nome</th><th>Status</th></tr></thead>
    <tbody><tr><td>Ana</td><td>Ativo</td></tr></tbody>
  </table>
</div>

Modelo 1 • Basic

Nome	Status	Plano
Ana	Ativo	Pro
João	Pendente	Free

<div class="sc-table-container">
  <table class="sc-table">
    <thead><tr><th>Nome</th><th>Status</th><th>Plano</th></tr></thead>
    <tbody>...</tbody>
  </table>
</div>

Modelo 2 • Striped

Produto	Qtd	Total
Assinatura	1	R$ 49
Créditos	5	R$ 25
Suporte	1	R$ 19

<table class="sc-table sc-table-striped">...</table>

Modelo 3 • Bordered

Chave	Valor
Theme	Glass
Mode	Dark

<table class="sc-table sc-table-bordered">...</table>

Modelo 4 • Compact

ID	Evento	Hora
#12	Login	09:12
#13	Upload	09:20

<table class="sc-table sc-table-compact">...</table>

Modelo 5 • Hover

Arquivo	Tamanho	Data
relatorio.pdf	2.1MB	Hoje
foto.png	640KB	Ontem

<table class="sc-table sc-table-hover">...</table>

Modelo 6 • Responsivo

Col A	Col B	Col C	Col D	Col E
A	B	C	D	E

<div class="sc-table-container">
  <table class="sc-table sc-table-striped sc-table-compact">...muitas colunas...</table>
</div>

Modelo 7 • Badges + status (dashboard)

Ticket	Assunto	Prioridade	Status
#1042	Erro no checkout	Alta	Em análise
#1043	Pedido duplicado	Média	Resolvido
#1044	Atualização de plano	Baixa	Aberto

<table class="sc-table sc-table-hover sc-table-striped">
  <tbody>
    <tr><td>#1042</td><td>...</td><td><span class="sc-badge sc-badge-danger">Alta</span></td></tr>
  </tbody>
</table>

Modelo 8 • Coluna de ações (botões)

Arquivo	Atualizado	Ações
briefing.pdf	Hoje
logo.png	Ontem

<td style="text-align:right;">
  <div class="sc-table-actions">
    <button class="sc-btn sc-btn-outline sc-btn-sm">Ver</button>
    <button class="sc-btn sc-btn-glass sc-btn-sm">Baixar</button>
  </div>
</td>

Modelo 9 • Sticky header (scroll vertical)

ID	Evento	Detalhe
#01	Login	IP 10.0.0.1
#02	Upload	2 arquivos
#03	Export	CSV
#04	Login	IP 10.0.0.2
#05	Update	Perfil
#06	Login	IP 10.0.0.3
#07	Upload	imagem.png
#08	Export	PDF

<div class="sc-table-container sc-table-container--y">
  <table class="sc-table sc-table-sticky">...</table>
</div>

Modelo 10 • Selecionável (row select)

Nome	E-mail	Status
Ana	ana@email.com	Ativo
João	joao@email.com	Pendente
Maria	maria@email.com	Convidado

<table class="sc-table sc-table-selectable">
  <tr aria-selected="true">...</tr>
</table>

Nav 10 modelos prontos + modo claro/escuro com ícone (SmartIcons)

Dica: para menu mobile, use .is-collapsible + botão .sc-nav-toggle (JS: initNavToggles).

Extra • Como aplicar

Estrutura base: .sc-nav com .sc-nav-logo, .sc-nav-links e .sc-nav-auth. Para menu mobile, adicione .is-collapsible + .sc-nav-toggle e carregue smart-ui.js.

<nav class="sc-nav is-collapsible">
  <a class="sc-nav-logo" href="/examples/">Smart UI</a>
  <button class="sc-nav-toggle" type="button" aria-label="Abrir menu">Menu</button>
  <ul class="sc-nav-links">
    <li><a class="sc-nav-link" href="#doc-grid">Grid</a></li>
    <li><a class="sc-nav-link" href="#doc-cards">Cards</a></li>
  </ul>
  <div class="sc-nav-auth">
    <button class="sc-btn sc-btn-ghost sc-btn-icon" type="button" data-mode-toggle aria-label="Alternar modo">
      <span class="sc-mode-ico" aria-hidden="true">
        <i class="sc-icon ico-moon" data-smart-icon="moon"></i>
        <i class="sc-icon ico-sun" data-smart-icon="sun"></i>
      </span>
    </button>
    <button class="sc-btn sc-btn-primary" type="button">CTA</button>
  </div>
</nav>

<!-- Requer smart-ui.js (initNavToggles) -->

Modelo 1 • Clássico (logo + links + ações)

<nav class="sc-nav sc-nav--demo">
  <a class="sc-nav-logo" href="/examples/">Smart UI</a>
  <ul class="sc-nav-links">
    <li><a class="sc-nav-link" href="#doc-buttons">Botões</a></li>
    <li><a class="sc-nav-link" href="#doc-grid">Grid</a></li>
    <li><a class="sc-nav-link" href="#doc-theme">Theming</a></li>
  </ul>
  <div class="sc-nav-auth">
    <button class="sc-btn sc-btn-ghost sc-btn-icon" type="button" data-mode-toggle aria-label="Alternar modo">...</button>
    <button class="sc-btn sc-btn-glass" type="button">Login</button>
    <button class="sc-btn sc-btn-primary" type="button">Começar</button>
  </div>
</nav>

Modelo 2 • Mobile Collapsible

<nav class="sc-nav sc-nav--demo is-collapsible">
  <a class="sc-nav-logo" href="/examples/">Smart UI</a>
  <button class="sc-nav-toggle" type="button">Menu</button>
  <ul class="sc-nav-links">...</ul>
  <div class="sc-nav-auth">...</div>
</nav>

<!-- Requer smart-ui.js (initNavToggles) -->

Modelo 3 • Com Search

<nav class="sc-nav sc-nav--demo">
  <a class="sc-nav-logo" href="/examples/">Smart UI</a>
  <input class="sc-input sc-nav-search" placeholder="Buscar⬦" />
  <div class="sc-nav-auth">...</div>
</nav>

Modelo 4 • Centered / Minimal

<nav class="sc-nav sc-nav--demo sc-nav--center">
  <a class="sc-nav-logo" href="/examples/">Smart UI</a>
  <ul class="sc-nav-links">...</ul>
</nav>

Modelo 5 • Com Dropdown (usuário)

<nav class="sc-nav sc-nav--demo">
  <a class="sc-nav-logo" href="/examples/">Smart UI</a>
  <ul class="sc-nav-links">...</ul>
  <div class="sc-nav-auth">
    <div class="sc-menu">
      <button class="sc-btn sc-btn-glass" type="button" data-menu-trigger>Conta</button>
      <div class="sc-menu-popover">...</div>
    </div>
  </div>
</nav>

<!-- Requer smart-ui.js (initMenus) -->

Modelo 6 • Pill / Compact (tipo “doc pill”)

<nav class="sc-nav sc-nav--demo sc-nav--pill sc-nav--compact">
  <a class="sc-nav-logo" href="/examples/">Smart UI</a>
  <ul class="sc-nav-links">...</ul>
  <div class="sc-nav-auth">...</div>
</nav>

Modelo 7 • App bar (ícones + modo)

<nav class="sc-nav sc-nav--demo">
  <a class="sc-nav-logo" href="/examples/"><i class="sc-icon" data-smart-icon="layout"></i> Smart UI</a>
  <ul class="sc-nav-links">
    <li><a class="sc-nav-link" href="#doc-start"><i class="sc-icon" data-smart-icon="home"></i> Início</a></li>
  </ul>
  <div class="sc-nav-auth">
    <button class="sc-btn sc-btn-ghost sc-btn-icon" type="button"><i class="sc-icon" data-smart-icon="bell"></i></button>
    <button class="sc-btn sc-btn-ghost sc-btn-icon" type="button" data-mode-toggle>...</button>
  </div>
</nav>

Modelo 8 • Nav “SaaS” (badge + modo)

<nav class="sc-nav sc-nav--demo">
  <a class="sc-nav-logo" href="/examples/">Smart UI <span class="sc-badge sc-badge-info">BETA</span></a>
  <ul class="sc-nav-links">...</ul>
  <div class="sc-nav-auth">...</div>
</nav>

Modelo 9 • Nav com submenu (menu + modo)

<nav class="sc-nav sc-nav--demo">
  <a class="sc-nav-logo" href="/examples/">Smart UI</a>
  <ul class="sc-nav-links">...</ul>
  <div class="sc-menu">
    <button class="sc-btn sc-btn-glass" type="button" data-menu-trigger>Recursos</button>
    <div class="sc-menu-popover">...</div>
  </div>
</nav>

Modelo 10 • Mobile + search + modo (tudo junto)

<nav class="sc-nav sc-nav--demo is-collapsible">
  <a class="sc-nav-logo" href="/examples/">Smart UI</a>
  <button class="sc-nav-toggle" type="button">Menu</button>
  <ul class="sc-nav-links">...</ul>
  <div class="sc-nav-auth">
    <button class="sc-btn sc-btn-ghost sc-btn-icon" type="button" data-mode-toggle>...</button>
    <button class="sc-btn sc-btn-primary sc-btn-sm" type="button">Entrar</button>
  </div>
</nav>

Footer 6 modelos novos (modernos, social, newsletter, legal)

Extra • Como aplicar

Use .sc-footer como wrapper, .sc-container para limitar largura, e opcionalmente .sc-footer--modern/.sc-footer--glass para o visual novo.

<footer class="sc-footer sc-footer--modern sc-footer--glass">
  <div class="sc-container sc-footer-inner">
    <!-- seu grid/colunas/cards -->
  </div>
  <div class="sc-footer-bottom">
    <div class="sc-container sc-footer-legal">
      <div>© 2026</div>
      <ul class="sc-footer-legal-links">...</ul>
    </div>
  </div>
</footer>

Modelo 1 • Modern (brand + social + colunas)

<footer class="sc-footer sc-footer--modern sc-footer--glass">
  <div class="sc-container sc-footer-inner">
    <div class="sc-footer-grid">
      <div class="sc-footer-brand">...</div>
      <div>...links...</div>
      <div>...docs...</div>
      <div>...contato...</div>
    </div>
  </div>
  <div class="sc-footer-bottom">
    <div class="sc-container sc-footer-legal">...</div>
  </div>
</footer>

Modelo 2 • Newsletter premium (card + input group)

<footer class="sc-footer sc-footer--modern">
  <div class="sc-container sc-footer-inner">
    <div class="sc-grid sc-cols-2 sc-gap-4">
      <div class="sc-card sc-card-outline sc-card-gradient sc-card-glow sc-card-compact">
        <div class="sc-footer-kicker">...</div>
        <div class="sc-footer-form">
          <div class="sc-input-group">...</div>
        </div>
      </div>
      <div class="sc-grid sc-cols-2 sc-gap-3">...</div>
    </div>
  </div>
</footer>

Modelo 3 • Minimal clean (linha única, elegante)

<footer class="sc-footer sc-footer--modern sc-footer--glass">
  <div class="sc-container">
    <div class="sc-footer-legal">
      <div class="sc-footer-brandline">...</div>
      <ul class="sc-footer-legal-links">...</ul>
      <div class="doc-muted">© 2026</div>
    </div>
  </div>
</footer>

Modelo 4 • Centered + social (brand)

<footer class="sc-footer sc-footer--modern">
  <div class="sc-container sc-footer-inner" style="text-align:center;">
    <div class="sc-footer-brandline">...</div>
    <p class="sc-footer-text">...</p>
    <div class="sc-footer-social">...</div>
  </div>
  <div class="sc-footer-bottom">
    <div class="sc-container sc-footer-legal">...</div>
  </div>
</footer>

Modelo 5 • Split (links + CTA + contato)

<footer class="sc-footer sc-footer--modern">
  <div class="sc-container sc-footer-inner">
    <div class="sc-grid sc-cols-3 sc-gap-4">
      <div class="sc-footer-brand">...CTA...</div>
      <div class="sc-grid sc-cols-2 sc-gap-3">...links...</div>
      <div>...contato + social...</div>
    </div>
  </div>
  <div class="sc-footer-bottom">...</div>
</footer>

Modelo 6 • Grid “links cards” (visual forte)

<footer class="sc-footer sc-footer--modern sc-footer--glass">
  <div class="sc-container sc-footer-inner">
    <div class="sc-grid sc-cols-3 sc-gap-3">
      <div class="sc-card sc-card-outline sc-card-compact">...</div>
      <div class="sc-card sc-card-outline sc-card-compact">...</div>
      <div class="sc-card sc-card-outline sc-card-compact">...</div>
    </div>
  </div>
  <div class="sc-footer-bottom">...</div>
</footer>

Modal / Dialog a11y + focus trap básico

Extra • Como aplicar (passo a passo)

Você precisa de 3 coisas: um botão com data-modal-open, um container .sc-modal com id, e o smart-ui.js carregado (ele faz initModals()).

<!-- 1) CSS/JS do Smart UI -->
<link rel="stylesheet" href="smart-ui/smart-ui.css" />
<script src="smart-ui/smart-ui.js" defer></script>

<!-- 2) Trigger -->
<button class="sc-btn sc-btn-primary" type="button" data-modal-open="meuModal">Abrir</button>

<!-- 3) Modal (id = data-modal-open) -->
<div class="sc-modal" id="meuModal">
  <div class="sc-modal-backdrop"></div>
  <div class="sc-modal-panel" role="document">
    <div class="sc-modal-header">
      <h3 class="sc-modal-title">Título</h3>
      <button class="sc-modal-close" type="button" data-modal-close aria-label="Fechar"></button>
    </div>
    <div class="sc-modal-body">Conteúdo</div>
    <div class="sc-modal-footer">
      <button class="sc-btn sc-btn-glass" type="button" data-modal-close>Cancelar</button>
      <button class="sc-btn sc-btn-primary" type="button">Confirmar</button>
    </div>
  </div>
</div>

Modelo 1 • Básico (default)

<button class="sc-btn sc-btn-primary" type="button" data-modal-open="demoModal">Abrir</button>

<div class="sc-modal" id="demoModal">
  <div class="sc-modal-backdrop"></div>
  <div class="sc-modal-panel" role="document">
    <div class="sc-modal-header">
      <h3 class="sc-modal-title">Modal Smart UI</h3>
      <button class="sc-modal-close" type="button" data-modal-close aria-label="Fechar"></button>
    </div>
    <div class="sc-modal-body">...</div>
    <div class="sc-modal-footer">
      <button class="sc-btn sc-btn-glass" type="button" data-modal-close>Cancelar</button>
      <button class="sc-btn sc-btn-primary" type="button" data-modal-close>OK</button>
    </div>
  </div>
</div>

Modelo 2 • Confirmação

<button class="sc-btn sc-btn-glass" type="button" data-modal-open="demoModal2">Abrir confirmação</button>

<div class="sc-modal" id="demoModal2">
  <div class="sc-modal-backdrop"></div>
  <div class="sc-modal-panel" role="document">
    <div class="sc-modal-header">
      <h3 class="sc-modal-title">Confirmação</h3>
      <button class="sc-modal-close" type="button" data-modal-close></button>
    </div>
    <div class="sc-modal-body">Modelo rápido para confirmação.</div>
    <div class="sc-modal-footer">
      <button class="sc-btn sc-btn-outline" type="button" data-modal-close>Voltar</button>
      <button class="sc-btn sc-btn-primary" type="button" data-modal-close>Confirmar</button>
    </div>
  </div>
</div>

Modelo 3 • Small

<button class="sc-btn sc-btn-outline" type="button" data-modal-open="demoModalSm">Abrir small</button>

<div class="sc-modal" id="demoModalSm">
  <div class="sc-modal-backdrop"></div>
  <div class="sc-modal-panel sc-modal-panel--sm" role="document">
    ...
  </div>
</div>

Modelo 4 • Large (grid)

<button class="sc-btn sc-btn-outline" type="button" data-modal-open="demoModalLg">Abrir large</button>

<div class="sc-modal" id="demoModalLg">
  <div class="sc-modal-backdrop"></div>
  <div class="sc-modal-panel sc-modal-panel--lg" role="document">
    <div class="sc-modal-body">
      <div class="sc-grid sc-cols-2 sc-gap-4">...</div>
    </div>
  </div>
</div>

Modelo 5 • Fullscreen

<button class="sc-btn sc-btn-outline" type="button" data-modal-open="demoModalFull">Abrir fullscreen</button>

<div class="sc-modal" id="demoModalFull">
  <div class="sc-modal-backdrop"></div>
  <div class="sc-modal-panel sc-modal-panel--fullscreen" role="document">...</div>
</div>

Modelo 6 • Side sheet

<button class="sc-btn sc-btn-outline" type="button" data-modal-open="demoModalSide">Abrir side sheet</button>

<div class="sc-modal" id="demoModalSide">
  <div class="sc-modal-backdrop"></div>
  <div class="sc-modal-panel sc-modal-panel--side" role="document">...</div>
</div>

Modelo 7 • Form (cadastro rápido)

<button class="sc-btn sc-btn-primary" type="button" data-modal-open="demoModalForm">Abrir form</button>

<div class="sc-modal" id="demoModalForm">
  <div class="sc-modal-backdrop"></div>
  <div class="sc-modal-panel" role="document">
    <div class="sc-modal-header">...</div>
    <div class="sc-modal-body">
      <div class="sc-grid sc-cols-2 sc-gap-3">...</div>
      <div class="sc-field">...</div>
    </div>
    <div class="sc-modal-footer">...</div>
  </div>
</div>

Modelo 8 • Conteúdo longo (scroll)

<button class="sc-btn sc-btn-glass" type="button" data-modal-open="demoModalScroll">Abrir conteúdo longo</button>

<div class="sc-modal" id="demoModalScroll">
  <div class="sc-modal-backdrop"></div>
  <div class="sc-modal-panel" role="document">
    <div class="sc-modal-body">...conteúdo longo...</div>
  </div>
</div>

Dropdown / Menu 10 modelos (ícones SmartIcons, estados, perfil, checklist) + snippets

Extra • Como aplicar

Use .sc-menu + botão [data-menu-trigger]. O popover abre/fecha via smart-ui.js (initMenus).

<div class="sc-menu">
  <button class="sc-btn sc-btn-glass" type="button" data-menu-trigger>Menu</button>
  <div class="sc-menu-popover">
    <button class="sc-menu-item" type="button">Item</button>
  </div>
</div>

<!-- Requer smart-ui.js (initMenus) -->

Modelo 1 • Menu simples

<div class="sc-menu">
  <button class="sc-btn sc-btn-glass" type="button" data-menu-trigger>Menu</button>
  <div class="sc-menu-popover">
    <button class="sc-menu-item" type="button">Perfil</button>
    <button class="sc-menu-item" type="button">Configurações</button>
    <div class="sc-menu-sep"></div>
    <button class="sc-menu-item" type="button">Sair</button>
  </div>
</div>

Modelo 2 • Ações rápidas

<div style="display:flex; gap:12px; flex-wrap:wrap;">
  <div class="sc-menu">
    <button class="sc-btn sc-btn-outline" type="button" data-menu-trigger>Ações</button>
    <div class="sc-menu-popover">...</div>
  </div>
  <div class="sc-menu">
    <button class="sc-btn sc-btn-primary" type="button" data-menu-trigger>Novo</button>
    <div class="sc-menu-popover">...</div>
  </div>
</div>

Modelo 3 • Ícones

<div class="sc-menu">
  <button class="sc-btn sc-btn-glass" type="button" data-menu-trigger>Mais</button>
  <div class="sc-menu-popover">
    <button class="sc-menu-item" type="button">
      <span style="display:inline-flex; gap:10px; align-items:center;">
        <i class="sc-icon" data-smart-icon="paperclip"></i> Anexar
      </span>
      <span class="doc-muted">Ctrl+U</span>
    </button>
    ...
  </div>
</div>

Modelo 4 • Alinhado à esquerda

<div class="sc-menu">
  <button class="sc-btn sc-btn-outline" type="button" data-menu-trigger>Filtro</button>
  <div class="sc-menu-popover sc-menu-popover--left">...</div>
</div>

Modelo 5 • Wide

<div class="sc-menu">
  <button class="sc-btn sc-btn-primary" type="button" data-menu-trigger>Criar</button>
  <div class="sc-menu-popover sc-menu-popover--wide">
    <button class="sc-menu-item" type="button">
      <span style="display:inline-flex; gap:10px; align-items:center;">
        <i class="sc-icon" data-smart-icon="file-text"></i> Documento
      </span>
    </button>
    ...
  </div>
</div>

Modelo 6 • Header + grupos

<div class="sc-menu">
  <button class="sc-btn sc-btn-glass" type="button" data-menu-trigger>Config</button>
  <div class="sc-menu-popover sc-menu-popover--wide">
    <div class="doc-muted" style="padding: 8px 10px;">Preferências</div>
    <button class="sc-menu-item" type="button">Tema</button>
    <div class="sc-menu-sep"></div>
    ...
  </div>
</div>

Modelo 7 • Trigger ícone (compact)

<div class="sc-menu">
  <button class="sc-btn sc-btn-ghost sc-btn-icon" type="button" data-menu-trigger>
    <i class="sc-icon" data-smart-icon="more-horizontal"></i>
  </button>
  <div class="sc-menu-popover">
    <button class="sc-menu-item" type="button">...</button>
    <button class="sc-menu-item is-danger" type="button">Excluir</button>
  </div>
</div>

Modelo 8 • Itens com badge (status)

<div class="sc-menu">
  <button class="sc-btn sc-btn-outline" type="button" data-menu-trigger>Status</button>
  <div class="sc-menu-popover">
    <button class="sc-menu-item" type="button"><span>Ativos</span><span class="sc-badge sc-badge-success">38</span></button>
  </div>
</div>

Modelo 9 • Perfil (header + ações)

<div class="sc-menu">
  <button class="sc-btn sc-btn-glass" type="button" data-menu-trigger>Conta</button>
  <div class="sc-menu-popover sc-menu-popover--wide">
    <div class="doc-muted" style="padding: 8px 10px;">logado como <strong>usuário</strong></div>
    <button class="sc-menu-item" type="button">Perfil</button>
    <button class="sc-menu-item is-danger" type="button">Sair</button>
  </div>
</div>

Modelo 10 • Checklist (menuitemcheckbox)

<button class="sc-btn sc-btn-outline" type="button" data-menu-trigger>Colunas</button>
<div class="sc-menu-popover">
  <button class="sc-menu-item" role="menuitemcheckbox" aria-checked="true">
    <span class="sc-menu-check"><i class="sc-icon" data-smart-icon="check"></i></span> Nome
  </button>
</div>

Tabs 10 modelos (SmartIcons, indicator animado, scroll) + snippets

Extra • Como aplicar

Use .sc-tabs, uma .sc-tablist e painéis .sc-tabpanel. O JS cuida de ARIA, teclado e trocar painéis. Para o indicator animado, adicione .sc-tabs--indicator.

<div class="sc-tabs sc-tabs--indicator">
  <div class="sc-tablist">
    <button class="sc-tab" type="button" aria-selected="true">Tab 1</button>
    <button class="sc-tab" type="button" aria-selected="false">Tab 2</button>
  </div>
  <div class="sc-tabpanel">Conteúdo 1</div>
  <div class="sc-tabpanel" hidden>Conteúdo 2</div>
</div>

<!-- Requer smart-ui.js (initTabs) -->

Modelo 1 • Indicator animado (padrão)

Conteúdo da visão geral.

<div class="sc-tabs sc-tabs--indicator">...</div>

Modelo 2 • SmartIcons (sem emojis)

Conteúdo Home.

<button class="sc-tab"><i class="sc-icon" data-smart-icon="home"></i> Home</button>

Modelo 3 • Pills + contadores

Conteúdo Inbox.

<div class="sc-tabs sc-tabs--pills sc-tabs--indicator">...</div>

Modelo 4 • Underline + indicator (linha animada)

Conteúdo visão.

<div class="sc-tabs sc-tabs--underline sc-tabs--indicator">...</div>

Modelo 5 • Segmented (switcher)

Dados de hoje.

<div class="sc-tabs sc-tabs--segmented">...</div>

Modelo 6 • Vertical + SmartIcons

Configurações gerais.

<div class="sc-tabs sc-tabs--vertical">...</div>

Modelo 7 • Scroll (muitos tabs)

Tablist com scroll horizontal automático.

<div class="sc-tabs sc-tabs--scroll sc-tabs--indicator">...</div>

Modelo 8 • Tabs dentro de Card

Conteúdo no card.

<div class="sc-card">
  <div class="sc-tabs sc-tabs--underline sc-tabs--indicator">...</div>
</div>

Modelo 9 • Tablist + ações (header)

Tabs com ações no header.

<div class="sc-tabs sc-tabs--underline sc-tabs--indicator">
  <div class="sc-tabs-head">
    <div class="sc-tablist">...</div>
    <div class="sc-tabs-actions">...</div>
  </div>
  <div class="sc-tabpanel">...</div>
</div>

Modelo 10 • Header + menu (overflow)

Tabs com menu no header.

<div class="sc-tabs-head">
  <div class="sc-tablist">...</div>
  <div class="sc-tabs-actions">
    <div class="sc-menu">...</div>
  </div>
</div>

Toast 6 modelos (tipos, persistente, ações)

Extra • Como aplicar

Toast é disparado por data-toast (sem dependências). Ele aparece no canto superior direito por padrão. Para demonstrar no preview, usamos um container em fluxo (.sc-toast-container--demo).

// data-attributes (mais simples)
<button class="sc-btn sc-btn-outline" type="button"
  data-toast="success"
  data-toast-title="Sucesso"
  data-toast-text="Salvo!"
  data-toast-duration="3500"
  data-toast-actions="Desfazer|Ver">
  Mostrar toast
</button>

// via API
SmartUI.toast({ type: "success", title: "Sucesso", text: "Salvo!", actions: ["Desfazer"] });

Modelo 1 • Info (básico)

Saída: canto superior direito

Info

Uma notificação simples.

<button class="sc-btn sc-btn-outline" type="button"
  data-toast="info" data-toast-title="Info" data-toast-text="Uma notificação simples.">
  Disparar
</button>

Modelo 2 • Success (com ação)

Sucesso

Operação concluída.

<button class="sc-btn sc-btn-success" type="button"
  data-toast="success" data-toast-title="Sucesso" data-toast-text="Operação concluída."
  data-toast-actions="Ver|Desfazer">Disparar</button>

Modelo 3 • Danger (erro)

Erro

Algo deu errado.

<button class="sc-btn sc-btn-danger" type="button"
  data-toast="danger" data-toast-title="Erro" data-toast-text="Algo deu errado.">Disparar</button>

Modelo 4 • Warning (atenção)

Atenção

Revise os dados antes de continuar.

<button class="sc-btn sc-btn-outline" type="button"
  data-toast="warning" data-toast-title="Atenção" data-toast-text="Revise os dados antes de continuar.">Disparar</button>

Modelo 5 • Persistente (duration=0)

Use “” para fechar

Persistente

Este toast não fecha sozinho.

<button class="sc-btn sc-btn-glass" type="button"
  data-toast="info" data-toast-title="Persistente" data-toast-text="Este toast não fecha sozinho."
  data-toast-duration="0">Disparar</button>

Modelo 6 • Com duração custom (6s)

Enviado

Arquivo enviado.

<button class="sc-btn sc-btn-outline" type="button"
  data-toast="success" data-toast-title="Enviado" data-toast-text="Arquivo enviado."
  data-toast-actions="Ver" data-toast-duration="6000">Disparar</button>

Tooltip 8 modelos + snippets (posições, barra social, popover, card)

Use .sc-tooltip + data-tooltip para a versão simples, ou .sc-tip para um popover/card (CSS-first).

Modelo 1 Botão (top)

<span class="sc-tooltip" data-tooltip="Topo (default)">
  <button class="sc-btn sc-btn-outline" type="button">Passe o mouse</button>
</span>

Modelo 2 Posições (left/right/bottom)

<span class="sc-tooltip" data-tooltip="Left" data-tooltip-pos="left">...</span>
<span class="sc-tooltip" data-tooltip="Bottom" data-tooltip-pos="bottom">...</span>
<span class="sc-tooltip" data-tooltip="Right" data-tooltip-pos="right">...</span>

Modelo 3 Barra social (tooltips)

<span class="sc-tooltip" data-tooltip="GitHub" data-tooltip-pos="bottom">
  <button class="sc-btn sc-btn-ghost sc-btn-icon sc-social-btn" type="button">
    <i class="sc-icon" data-smart-icon="github"></i>
  </button>
</span>

Modelo 4 Tooltip longo (legibilidade)

<span class="sc-tooltip"
  data-tooltip="Texto mais longo para testar overflow e legibilidade..."
  data-tooltip-pos="bottom">
  <button class="sc-btn sc-btn-glass" type="button">Hover</button>
</span>

Modelo 5 Popover (Share)

<div class="sc-tip">
  <button class="sc-btn sc-btn-gradient sc-btn-pill" type="button">
    Share <i class="sc-icon" data-smart-icon="share-2"></i>
  </button>
  <div class="sc-tip-panel" role="dialog">...</div>
</div>

Modelo 6 Tooltip card (perfil)

<div class="sc-tip">
  <button class="sc-btn sc-btn-glass sc-btn-icon" type="button" aria-label="Perfil">
    <i class="sc-icon" data-smart-icon="user-circle"></i>
  </button>
  <div class="sc-tip-panel sc-tip-panel--top" role="dialog">...card...</div>
</div>

Modelo 7 Tooltip em ícone (ajuda)

<span class="sc-tooltip" data-tooltip="Dica rápida" data-tooltip-pos="right">
  <button class="sc-btn sc-btn-outline sc-btn-icon sc-btn-sm" type="button">
    <i class="sc-icon" data-smart-icon="info"></i>
  </button>
</span>

Modelo 8 Popover posicionado (right/left)

<div class="sc-tip">
  <button class="sc-btn sc-btn-outline" type="button">Popover right</button>
  <div class="sc-tip-panel sc-tip-panel--right" role="dialog">...</div>
</div>

Layout • Grid 10 modelos + snippets (UI/UX layouts reais)

Extra • Como aplicar

Use .sc-grid + .sc-cols-* + .sc-gap-*. Para layouts avançados, use .sc-col-span-* e .sc-grid-auto (auto-fit). Em telas menores, as colunas colapsam automaticamente.

<div class="sc-grid sc-cols-3 sc-gap-4">
  <div class="sc-card sc-card-outline">Card</div>
  <div class="sc-card sc-card-outline">Card</div>
  <div class="sc-card sc-card-outline">Card</div>
</div>

Modelo 1 • 2 colunas

A

B

<div class="sc-grid sc-cols-2 sc-gap-4">
  <div class="sc-card sc-card-outline">A</div>
  <div class="sc-card sc-card-outline">B</div>
</div>

Modelo 2 • 3 colunas

1

2

3

<div class="sc-grid sc-cols-3 sc-gap-4">...</div>

Modelo 3 • Auto-fit

Auto

<div class="sc-grid sc-grid-auto sc-gap-4">...</div>

Modelo 4 • Spans (dashboard)

Main (span 4)

Side (span 2)

KPI

<div class="sc-grid sc-cols-6 sc-gap-4">
  <div class="sc-card sc-col-span-4">Main</div>
  <div class="sc-card sc-col-span-2">Side</div>
  <div class="sc-card sc-col-span-2">KPI</div>
</div>

Modelo 5 • Sidebar layout

Sidebar

Conteúdo

<div class="sc-grid sc-cols-6 sc-gap-4">
  <aside class="sc-card sc-card-outline sc-col-span-2">Sidebar</aside>
  <main class="sc-card sc-card-outline sc-col-span-4">Conteúdo</main>
</div>

Modelo 6 • Cards + hover (opt-in)

UX

Card curto

Grid pensado para cards (não vira banner).

UI

Hierarquia

Badge + título + texto.

CTA

Ações

<div class="sc-grid sc-cols-3 sc-gap-4">
  <div class="sc-card sc-card-hover sc-card-outline">...</div>
  <div class="sc-card sc-card-hover sc-card-outline">...</div>
  <div class="sc-card sc-card-hover sc-card-outline">...</div>
</div>

Modelo 7 • Pricing (3 planos)

Free

R$ 0

Para testar e validar.

1 projeto
Comunidade
Templates básicos

Pro

R$ 49

Melhor custo-benefício.

Projetos ilimitados
Componentes premium
Suporte

Business

R$ 129

Para times.

Times
SSO
SLA

<div class="sc-grid sc-cols-3 sc-gap-4">
  <div class="sc-card sc-card-outline">...plano...</div>
  <div class="sc-card sc-card-outline">...plano...</div>
  <div class="sc-card sc-card-outline">...plano...</div>
</div>

Modelo 8 • Dashboard (cards + tabela)

Receita

R$ 12.450

+18% vs semana

Pedidos

312

Taxa 3.2%

Tickets

9

2 críticos

Atividade

Evento	Hora	Status
Login	09:12	OK
Upload	09:20	Pendente

Atalhos

<div class="sc-grid sc-cols-6 sc-gap-4">
  <div class="sc-card sc-col-span-2">KPI</div>
  <div class="sc-card sc-col-span-4">Tabela</div>
  <div class="sc-card sc-col-span-2">Atalhos</div>
</div>

Modelo 9 • Form layout (2 colunas + full)

Nome

E-mail

Mensagem

<div class="sc-grid sc-cols-2 sc-gap-4">
  <div class="sc-field">...</div>
  <div class="sc-field">...</div>
  <div class="sc-field" style="grid-column: 1 / -1;">...</div>
</div>

Modelo 10 • Lista de cards (UI feed)

Atualização do produto Notas da versão • 2 min

Novo

Um layout de feed comum em apps: header + texto curto + ações.

Card A

Conteúdo compacto.

Card B

Conteúdo compacto.

<div class="sc-grid sc-cols-2 sc-gap-4">
  <div class="sc-card sc-col-span-2">Post</div>
  <div class="sc-card">Card A</div>
  <div class="sc-card">Card B</div>
</div>

Banners 6 modelos (avisos/promo/cookie/maintenance) + snippets

Extra • Como aplicar

Banners são avisos compactos (não Hero). Use .sc-bannerbar + .sc-bannerbar-inner, e adicione variantes como --info, --warning, --danger, --glass. Para fechar, use [data-banner-close] (JS: initBanners).

<div class="sc-bannerbar sc-bannerbar--info">
  <div class="sc-bannerbar-inner">
    <div class="sc-bannerbar-left">...</div>
    <div class="sc-bannerbar-actions">...</div>
  </div>
</div>

<!-- Requer smart-ui.js (initBanners) para fechar -->

Modelo 1 • Barra de aviso (info)

Atualização disponível

Nova versão do Smart UI com melhorias em Tabs e Tooltips.

<div class="sc-bannerbar sc-bannerbar--info">...</div>

Modelo 2 • Promo (glass) + cupom

Promoção

Use o cupom SMART10 e ganhe 10% em templates.

<div class="sc-bannerbar sc-bannerbar--glass">...</div>

Modelo 3 • Warning (manutenção) dismissible

Manutenção programada

Hoje às 23:00 (BRT). Pode haver instabilidade por alguns minutos.

<button class="sc-bannerbar-close" type="button" data-banner-close></button>

Modelo 4 • Danger (erro) + ação rápida

Falha ao salvar

Verifique sua conexão e tente novamente.

<div class="sc-bannerbar sc-bannerbar--danger">...</div>

Modelo 5 • Cookie / Consent (tight)

Cookies

Usamos cookies para melhorar a experiência. Você pode recusar.

<div class="sc-bannerbar sc-bannerbar--tight">...</div>

Modelo 6 • Sucesso (concluído) compact

Tudo certo!

Configurações salvas com sucesso.

<div class="sc-bannerbar sc-bannerbar--success">...</div>

Carousel 10 modelos (clássicos + novos estilos) + snippets

Extra • Como aplicar

Use .sc-carousel com .sc-carousel-track (scroll-snap). Os botões [data-carousel-prev]/[data-carousel-next], dots e autoplay são habilitados via smart-ui.js (initCarousels).

<div class="sc-carousel" data-slides="1" data-autoplay="0">
  <div class="sc-carousel-track">
    <div class="sc-carousel-slide"><div class="sc-carousel-card">...</div></div>
    <div class="sc-carousel-slide"><div class="sc-carousel-card">...</div></div>
  </div>
  <div class="sc-carousel-controls">
    <div class="sc-carousel-buttons">
      <button class="sc-btn sc-btn-glass sc-btn-icon" data-carousel-prev><i class="sc-icon" data-smart-icon="chevrons-left"></i></button>
      <button class="sc-btn sc-btn-primary sc-btn-icon" data-carousel-next><i class="sc-icon" data-smart-icon="chevrons-right"></i></button>
    </div>
  </div>
</div>
<!-- precisa do smart-ui.js para dots/controles/autoplay -->

Modelo 1 • Slides básicos (1)

Slide 1

Conteúdo do slide (texto, card, imagem, etc).

Slide 2

Funciona com mouse, touch e scroll.

Slide 3

Dots e prev/next via Smart UI Engine.

<div class="sc-carousel" data-slides="1">...</div>

Modelo 2 • Cards (2 por view)

UX

Card A

Descrição curta.

UI

Card B

Descrição curta.

CTA

Card C

Descrição curta.

Hot

Card D

Descrição curta.

<div class="sc-carousel" data-slides="2">...</div>

Modelo 3 • Cards (3 por view)

1

Mini card

2

Mini card

3

Mini card

4

Mini card

5

Mini card

<div class="sc-carousel" data-slides="3">...</div>

Modelo 4 • Autoplay

Auto 1

Troca automática.

Auto 2

Troca automática.

Auto 3

Troca automática.

<div class="sc-carousel sc-carousel--glass" data-autoplay="3000">...</div>

Modelo 5 • Imagens

Imagem 1

Peek do próximo slide (UX melhor).

Imagem 2

Legenda + hierarquia.

Imagem 3

Design consistente no tema.

<div class="sc-carousel sc-carousel--peek" data-slides="1">...</div>

Modelo 6 • Testimonials

“Tema ficou perfeito dá pra sentir a identidade em cada componente.”

Cliente A

“Component-first com docs por modelos é o caminho.”

Cliente B

<div class="sc-carousel sc-carousel--center sc-carousel--spotlight">...</div>

Modelo 7 • Spotlight (cards com foco)

Destaque

Card 1

Slide ativo “cresce”.

UI

Card 2

Mais contraste e legibilidade.

UX

Card 3

Sem ficar “quadradão”.

<div class="sc-carousel sc-carousel--peek sc-carousel--spotlight">...</div>

Extra • Carousel 3D (Featured Cards)

Edge Visuals

Design systems que respiram

Tokens, motion e acessibilidade: base forte sem perder personalidade. Rápido de aplicar, consistente de manter.

Realtime Dashboards

Sinal acima do ruído

Destaque deltas, suavize picos e deixe o olho encontrar o que importa primeiro. UI como instrumento, não decoração.

Brand Motion

Identidade em movimento

Easing, timing e contraste com intenção. Quando a animação é parte da marca, ela vira memória.

E-commerce UX

Caminhos sem atrito

Escolha mais curta, confiança mais alta. Checkout em um sopro (com acessibilidade e estados claros).

Content Engines

Escalar sem virar sludge

Conteúdo estruturado, defaults inteligentes e visual limpo. Publique com consistência, sem “quebrar tema”.

<div class="sc-carousel-3d" data-autoplay="4500">
  <div class="sc-carousel-3d-viewport" tabindex="0">
    <div class="sc-carousel-3d-track">
      <article class="sc-carousel-3d-slide">
        <div class="sc-feature-card" style="--sc-feature-bg:url('img.jpg')">
          <header class="sc-feature-head">...</header>
          <p class="sc-feature-text">...</p>
          <footer class="sc-feature-actions">...</footer>
        </div>
      </article>
    </div>
  </div>
  <div class="sc-carousel-3d-controls">
    <button data-3d-prev>...</button>
    <button data-3d-next>...</button>
  </div>
  <div class="sc-carousel-3d-pagination"></div>
  <div class="sc-carousel-3d-progress"><span class="sc-carousel-3d-progressBar"></span></div>
</div>
<!-- Requer smart-ui.js (initCarousel3D) -->

Music Player 6 modelos (coverflow, mini, playlist, neon/glass) + snippets

Extra • Como aplicar

Qualquer modelo funciona com [data-music-player="true"]. O playlist é um JSON local (sem libs), e o coverflow sincroniza via evento sc:coverflowChange. O link do YouTube na capa abre a URL correspondente.

<div data-music-player="true">...</div>
<!-- Requer smart-ui.js (initCoverflows + initMusicPlayers) -->

Modelo 1 • Coverflow premium (card)

Título

Artista

0:00 0:00

<div data-music-player="true">
  <div class="sc-coverflow">...</div>
  <div class="sc-music-player">...</div>
</div>

Modelo 2 • Mini player (barra)

Título

Artista

<div data-music-player="true" class="sc-music-mini">
  <img data-music-cover />
  <p data-music-title>...</p>
  <p data-music-artist>...</p>
  <input class="sc-range" type="range" />
  <audio></audio>
  <script class="sc-audio-playlist" type="application/json">[...]</script>
</div>

Modelo 3 • Player + playlist clicável

Título

Artista

0:00 0:00

Symphony

Clean Bandit ft. Zara Larsson

Pawn It All

Alicia Keys

Instant Crush

Daft Punk ft. Julian Casablancas

<div data-music-player="true">...</div>
<div class="sc-music-list">
  <div class="sc-music-track" data-music-pick="0">...</div>
</div>

Modelo 4 • Neon / glass (tema-driven)

Título

Artista

0:00 0:00

<div class="sc-music-player sc-music--neon" data-music-player="true">...</div>

Modelo 5 • Card (capa + player lado a lado)

Título

Artista

0:00 0:00

<div class="sc-music-card" data-music-player="true">
  <img data-music-cover />
  <div class="sc-music-player">...</div>
</div>

Modelo 6 • Playlist (somente lista, sem capa)

Título

Artista

0:00 0:00

Symphony

Clean Bandit ft. Zara Larsson

Pawn It All

Alicia Keys

Instant Crush

Daft Punk ft. Julian Casablancas

<div data-music-player="true">
  <div class="sc-music-player">...</div>
  <div class="sc-music-list">...</div>
</div>

Gallery 10 modelos (clássicos + novos) com animações + código por modelo

Extra • Como aplicar

Use .sc-gallery e marque data-lightbox="true" para habilitar o lightbox (Smart UI Engine). Os modelos abaixo incluem transições no hover e animação na abertura do modal.

<div class="sc-gallery" data-lightbox="true">
  <div class="sc-gallery-item sc-card-hover">
    <img src="img/1.jpg" alt="Descrição">
  </div>
</div>
<!-- data-lightbox=\"true\" requer smart-ui.js (initLightboxGalleries) -->

Modelo 1Lightbox (clássico)

Preview

<div class="sc-gallery sc-gallery--lift" data-lightbox="true">...</div>

Modelo 2Square (clássico)

Preview

<div class="sc-gallery sc-gallery--square sc-gallery--lift" data-lightbox="true">...</div>

Modelo 3Caption (clássico)

Preview

Legenda 1

Legenda 2

Legenda 3

<div class="sc-gallery" data-lightbox="true">...<div class="sc-gallery-caption">...</div></div>

Modelo 4Masonry (clássico)

Preview

<div class="sc-gallery sc-gallery--masonry" data-lightbox="true">...</div>

Modelo 5Spans (grid) (clássico)

Preview

<div class="sc-grid sc-cols-6 sc-gap-4">
  <div class="sc-gallery-item sc-col-span-4">...</div>
</div>

Modelo 6Sem lightbox (clássico)

Preview

<div class="sc-gallery" data-lightbox="false">...</div>

Modelo 7Reveal captions (novo)

Preview

Projeto • Landing

Projeto • App

Projeto • Branding

Projeto • Motion

<div class="sc-gallery sc-gallery--reveal" data-lightbox="true">
  <div class="sc-gallery-item">
    <img ...>
    <div class="sc-gallery-caption">Legenda</div>
  </div>
</div>

Modelo 8Bento grid (novo)

Preview

<div class="sc-gallery sc-gallery--bento" data-lightbox="true">...</div>

Modelo 9Filmstrip (horizontal scroll) (novo)

Preview

<div class="sc-gallery sc-gallery--filmstrip" data-lightbox="true">
  <div class="sc-gallery-track">...</div>
</div>

Modelo 10Polaroid stack (novo)

Preview

<div class="sc-gallery sc-gallery--polaroid" data-lightbox="true">...</div>

Fotos 8 modelos (Photo Rail 3D) + códigos + sem vazamento

Extra • Como aplicar

O Photo Rail 3D usa data-photo-rail="true" (Smart UI Engine). Nos previews abaixo, o container já aplica doc-clip automaticamente para **não vazar** quando as fotos expandem.

<div class="sc-photo-rail" data-photo-rail="true" data-zones="9">
  <a class="sc-photo-rail-item" href="/examples/" style="--sc-pr-img:url('img/1.jpg')">
    <span class="sc-photo-rail-img"></span>
    <span class="sc-photo-rail-label">Foto 1</span>
  </a>
</div>
<!-- Requer smart-ui.js (initPhotoRails) -->

Modelo 1Rail 12 fotos (desktop)

Preview

Foto 1 Foto 2 Foto 3 Foto 4 Foto 5 Foto 6 Foto 7 Foto 8 Foto 9 Foto 10 Foto 11 Foto 12

<div class="sc-photo-rail" data-photo-rail="true" data-zones="9">...</div>

Modelo 2Compacto (6 fotos)

Preview

Foto A Foto B Foto C Foto D Foto E Foto F

<div class="sc-photo-rail" data-photo-rail="true" data-zones="7">...</div>

Modelo 3Tall (mais altura)

Preview

Campanha Produto Equipe Evento UI

<div class="sc-photo-rail sc-photo-rail--tall" data-photo-rail="true">...</div>

Modelo 4Mini (4 fotos, foco rápido)

Preview

A B C D

<div class="sc-photo-rail" data-photo-rail="true">...</div>

Modelo 5Stack (vertical, mobile/compact)

Preview

Foto 1 Foto 2 Foto 3

<div class="sc-photo-rail sc-photo-rail--stack">...</div>

Accordion 8 modelos (clássicos + novos estilos/anim) + snippet por modelo

Modelo 1 Single (FAQ clássico)

Preview

Um UI kit component-first para temas e componentes (zero dependências).

Accordion, select custom, carousel controls, lightbox, tabs, modal, etc.

Use data-mode="dark" no <html> (com persistência).

<div class="sc-accordion" data-accordion="single">
  <div class="sc-accordion-item is-open">
    <button class="sc-accordion-trigger" type="button">...<span class="sc-accordion-icon"></span></button>
    <div class="sc-accordion-panel"><div><div class="sc-accordion-content">...</div></div></div>
  </div>
</div>

Modelo 2 Multi (várias abertas)

Preview

Conteúdo A.

Conteúdo B.

Conteúdo C.

<div class="sc-accordion" data-accordion="multi">...</div>

Modelo 3 Compact (clássico)

Preview

Modelo compacto para listas e mobile.

Conteúdo adicional.

<div class="sc-accordion sc-accordion--compact" data-accordion="single">...</div>

Modelo 4 Minimal (clássico)

Preview

Sem “caixa”, só divisórias e tipografia.

Bom para docs longas.

<div class="sc-accordion sc-accordion--minimal" data-accordion="single">...</div>

Modelo 5 Plus/Minus (animação + ícone diferente)

Preview

Ícone de plus vira “minus” + fade/slide no conteúdo.

Transições mais vivas sem quebrar acessibilidade.

<div class="sc-accordion sc-accordion--plus" data-accordion="single">...</div>

Modelo 6 Cards (itens separados, visual premium)

Preview

Cada item vira um card com radius e shadow.

timo para páginas com blocos independentes.

<div class="sc-accordion sc-accordion--cards" data-accordion="single">...</div>

Modelo 7 Glass (para temas glass/aurora/noir)

Preview

Visual mais “premium”, sem perder legibilidade.

Cores vêm de variáveis do tema, não hardcode.

<div class="sc-accordion sc-accordion--glass sc-accordion--plus">...</div>

Modelo 8 Steps/Timeline (layout diferente)

Preview

Defina a estrutura: título, descrição e ações.

Use tokens e modifiers para variar o design.

Garanta responsividade e acessibilidade.

<div class="sc-accordion sc-accordion--steps" data-accordion="single">
  <div class="sc-accordion-item">
    <button class="sc-accordion-trigger" data-step="1">...</button>
    <div class="sc-accordion-panel">...</div>
  </div>
</div>

Observação: o Accordion usa button + ARIA via Smart UI Engine. Para uma alternativa nativa e acessível via <details>, veja Disclosure.

Disclosure 6 modelos (layouts diferentes + transições) + código por modelo

Extra • Como aplicar

Disclosure usa <details>/<summary> (nativo). Para “apenas um aberto” no grupo, use data-disclosure="single" (Smart UI Engine). Agora tem transição de altura + fade/slide do conteúdo.

<div class="sc-disclosure" data-disclosure="single">
  <details class="sc-disclosure-item" open>
    <summary class="sc-disclosure-summary">...</summary>
    <div class="sc-disclosure-panel"><div class="sc-disclosure-content">...</div></div>
  </details>
</div>

Modelo 1 Morph (stack) • Single

Preview

O que é design engineering?

Onde intuição de design encontra execução em código para enxergar problemas de UI e construir soluções do zero.

O que é “craft” de UI?

Construir bem: dominar a plataforma para não depender de ferramentas específicas.

Por que focar na web?

Trabalhando com a web (e não contra ela) você desbloqueia performance, acessibilidade e durabilidade.

<div class="sc-disclosure" data-disclosure="single" data-morph="true">...</div>

Modelo 2 Pills (bem diferente do accordion)

Preview

Diferente no visual

Formato pill + transição suave.

Bom para filtros

Um “mini painel” discreto por item.

<div class="sc-disclosure sc-disclosure--pills" data-disclosure="single">...</div>

Modelo 3 Accent (faixa lateral)

Preview

Destaque de seção

A faixa lateral reforça qual item está aberto.

Modo multi

Várias abertas ao mesmo tempo.

<div class="sc-disclosure sc-disclosure--accent" data-disclosure="multi">...</div>

Modelo 4 Cards (itens separados)

Preview

Configurações

Ações rápidas no painel.

Segurança

Visual de cards (não parece accordion).

<div class="sc-disclosure sc-disclosure--cards" data-disclosure="single">...</div>

Modelo 5 Badges (editorial)

Preview

Release notes NEW

Use badges para status e prioridade.

Breaking change WARN

Modelos editoriais ficam melhores em Disclosure que em Accordion.

<div class="sc-disclosure sc-disclosure--accent" data-morph="true">...</div>

Modelo 6 Conteúdo rico (form)

Preview

Inscrição

Email

<div class="sc-disclosure sc-disclosure--pills" data-disclosure="single">...</div>

Nota: data-disclosure="single" requer smart-ui.js (initDisclosures). O restante é nativo do HTML.

Select Menu (Custom) 10 modelos (clássicos + novos) + código por modelo

Extra • Como aplicar

Use .sc-select-menu (dropdown 100% estilizado). O popover agora tem z-index alto e isolation para não ficar por trás de outros elementos.

<div class="sc-select-menu" data-value="op2">
  <button class="sc-select-trigger" type="button">
    <span class="sc-select-value">Escolha...</span>
    <span class="sc-select-caret" aria-hidden="true"></span>
  </button>
  <div class="sc-select-popover" role="listbox" tabindex="-1">
    <div class="sc-select-option" role="option" tabindex="0" data-value="op1" data-label="Opção 1">Opção 1</div>
  </div>
</div>
<!-- Requer smart-ui.js (initSelectMenus) -->

Modelo 1Básico

Preview

<div class="sc-select-menu" data-value="op1">...</div>

Modelo 2Compact

Preview

<div class="sc-select-menu sc-select-sm">...</div>

Modelo 3Trigger com ícone + opções com subtítulo

Preview

<div class="sc-select-menu" data-value="plan2">...</div>

Modelo 4Grid / palette (2 colunas)

Preview

<div class="sc-select-menu"><div class="sc-select-popover sc-select-popover--grid">...</div></div>

Modelo 5Search + ícones + ripple (fancy)

Preview

<div class="sc-select-menu sc-select-fancy" data-search="true" data-ripple="true">...</div>

Modelo 6Validação (valid/invalid)

Preview

<button class="sc-select-trigger is-valid">...</button>

Modelo 7Grupos (separadores)

Preview

<div class="sc-select-sep">Grupo</div>

Modelo 8Avatar / time

Preview

<span class="sc-select-avatar">D</span>

Modelo 9Status (dot color)

Preview

<span class="sc-select-dot" style="--sc-dot: var(--sc-success);"></span>

Modelo 10Popover alto (lista grande)

Preview

<div class="sc-select-popover" role="listbox">...</div>

Animações 10 modelos + botões de replay + código por modelo

Extra • Como aplicar

As classes abaixo usam .in-view. No docs, você pode clicar em Reproduzir para reiniciar a animação sem precisar rolar a página.

<div class="sc-card sc-fade-up">...</div>
<!-- Requer smart-ui.js (initScrollObserver) -->

Modelo 1Fade up

Preview

Fade up 1

Fade up 2

Fade up 3

<div class="sc-card sc-fade-up">...</div>

Modelo 2Fade in

Preview

Fade in 1

Fade in 2

Fade in 3

<div class="sc-card sc-fade-in">...</div>

Modelo 3Zoom in

Preview

Zoom 1

Zoom 2

Zoom 3

<div class="sc-card sc-zoom-in">...</div>

Modelo 4Slide left

Preview

Left 1

Left 2

Left 3

<div class="sc-card sc-slide-left">...</div>

Modelo 5Slide right

Preview

Right 1

Right 2

Right 3

<div class="sc-card sc-slide-right">...</div>

Modelo 6Stagger (grid)

Preview

Stagger 1

Stagger 2

Stagger 3

Stagger 4

Stagger 5

Stagger 6

<div class="sc-grid sc-grid-stagger">...</div>

Modelo 7Blur in (novo)

Preview

Blur 1

Blur 2

Blur 3

<div class="sc-card sc-blur-in">...</div>

Modelo 8Pop in (novo)

Preview

Pop 1

Pop 2

Pop 3

<div class="sc-card sc-pop-in">...</div>

Modelo 9Flip in (novo)

Preview

Flip 1

Flip 2

Flip 3

<div class="sc-card sc-flip-in">...</div>

Modelo 10Bounce / Skew (novo)

Preview

Bounce

Skew

Bounce 2

<div class="sc-card sc-bounce-in">...</div>
<div class="sc-card sc-skew-in">...</div>

Efeitos 6 modelos (liquid, conic glow, sheen, scanlines, vignette/noise, galeria circular)

Estes efeitos são opt-in e pensados para serem theme-aware (sem dependências). Evitamos snippets com licença nãocomercial.

Modelo 1 Liquid / Aurora (CSS-only, corrigido)

Preview

Liquid Surface

Camadas de “mesh” animado (sem blend-mode).

FX

<div class="sc-card sc-card-outline sc-fx-liquid">...</div>

Modelo 2 Conic Glow (tipo Gemini, corrigido)

Preview

Conic Border Rotating

Borda animada + glow

<div class="sc-fx-conic">
  <div class="sc-card sc-card-outline">...</div>
</div>

Modelo 3 Sheen / Shimmer (novo)

Preview

Sheen Overlay

Brilho que “varre” o card

<div class="sc-card sc-card-outline sc-fx-sheen">...</div>

Modelo 4 Scanlines / HUD (novo)

Preview

HUD Panel

Scanlines + sweep (theme-aware)

LIVE

<div class="sc-card sc-card-outline sc-fx-scanlines">...</div>

Modelo 5 Vignette + noise (overlay)

Preview

Focus Zone

Overlay decorativo (opt-in).

FX

<div class="sc-card sc-fx-vignette sc-fx-noise">...</div>

Modelo 6 SlideWheel (galeria circular + scroll, corrigido)

Preview

Role sobre a galeria ou toque em um card para trocar o foco. O componente fica contido no próprio bloco, sem vazar sobre a documentação.

<section class="sc-slidewheel-wrap" data-snap="1">
  <div class="sc-slidewheel">
    <div class="sc-slidewheel-item" data-title="Título"><img src="img.jpg" alt="Imagem" /></div>
  </div>
</section>
<!-- Requer smart-ui.js (initSlideWheels) -->

Loaders 6 modelos (spinner, dots, bars, orbit, ring, skeleton)

Use role="status" e um aria-label (“Carregando⬦”) para acessibilidade.

Modelo 1 Spinner

<span class="sc-loader sc-loader-spin" role="status" aria-label="Carregando"></span>
<span class="sc-loader sc-loader-spin sc-loader-sm"></span>
<span class="sc-loader sc-loader-spin sc-loader-lg"></span>

Modelo 2 Dots

<span class="sc-loader sc-loader-dots" role="status" aria-label="Carregando">
  <span></span><span></span><span></span>
</span>

Modelo 3 Bars

<span class="sc-loader sc-loader-bars" role="status" aria-label="Carregando">
  <span></span><span></span><span></span>
</span>

Modelo 4 Orbit

<span class="sc-loader sc-loader-orbit" role="status" aria-label="Carregando">
  <span aria-hidden="true"></span>
</span>

Modelo 5 Ring

<span class="sc-loader sc-loader-ring" role="status" aria-label="Carregando"></span>

Modelo 6 Skeleton

<div class="sc-skeleton sc-skeleton-card"></div>
<div class="sc-skeleton sc-skeleton-lg" style="width:70%;"></div>
<div class="sc-skeleton" style="width:92%;"></div>

Começando como incluir e usar

1) Inclua o CSS e (opcional) o JS

Para testar localmente no seu projeto, a forma mais simples é referenciar os arquivos da pasta smart-ui.

<!-- Smart UI CSS (bundle) -->
<link rel="stylesheet" href="smart-ui/smart-ui.css">

<!-- Smart UI Engine (opcional: ripple, tilt, range fill, animações) -->
<script src="smart-ui/smart-ui.js" defer></script>

2) Use os componentes base

<div class="sc-container">
  <section class="sc-section">
    <h1 class="sc-display-1">Olá Smart UI</h1>
    <div class="sc-grid sc-cols-3">
      <div class="sc-card">Card</div>
      <button class="sc-btn sc-btn-primary">Botão</button>
      <input class="sc-input" placeholder="Input">
    </div>
  </section>
</div>

Observação: hover de card é opt-in via .sc-card-hover.

Theming como aplicar e trocar temas

Aplicar tema via HTML

O tema é aplicado via atributo data-theme no <html> (recomendado).

<html lang="pt-br" data-theme="glass">
  ...
</html>

Modo claro / escuro

O modo é aplicado via data-mode no <html>. Ele muda apenas tokens de base (background/text/border) e mantém as cores do tema.

<html lang="pt-br" data-mode="dark">
  ...
</html>

Trocar tema via JavaScript

const root = document.documentElement;
root.setAttribute("data-theme", "noir"); // muda o tema

// remover tema (voltar ao default)
root.removeAttribute("data-theme");

Trocar modo via JavaScript

const root = document.documentElement;
root.setAttribute("data-mode", "dark");  // dark
root.setAttribute("data-mode", "light"); // light

Persistir tema (localStorage)

const key = "smartui-theme";
const root = document.documentElement;

function setTheme(theme) {
  if (!theme) root.removeAttribute("data-theme");
  else root.setAttribute("data-theme", theme);
  localStorage.setItem(key, theme || "");
}

setTheme(localStorage.getItem(key) || "");

Temas disponíveis

Use exatamente estes valores em data-theme:

clean, soft, corporate, metal,
glass, aurora, noir, retro,
liquid, clay, tech, neon, brutal

Tokens (CSS Variables) o que cada tema altera

Cada tema redefine variáveis em :root/[data-theme="..."]. Os componentes consomem esses tokens.

Token	Uso	Exemplo
`--sc-primary`	Cor principal (botões, badges, highlights)	primary
`--sc-bg-body`	Background geral	body
`--sc-bg-surface`	Superfícies (cards/containers)	surface
`--sc-text-main`	Texto principal	Texto
`--sc-border`	Bordas	1px solid
`--sc-radius`	Raio padrão (inputs/cards/botões)	border-radius

Preview Timing / Motion (transitions)

Preview

Passe o mouse para sentir a diferença de “timing/easing”.

/* Helpers (docs/demo) */
.sc-dur-fast { transition-duration: 140ms; }
.sc-dur-slow { transition-duration: 420ms; }
.sc-ease-spring { transition-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1.2); }

/* Exemplo: usar tokens em CSS custom */
.minha-caixa {
  background: var(--sc-bg-surface);
  border: 1px solid var(--sc-border);
  color: var(--sc-text-main);
  border-radius: var(--sc-radius);
}

Usuário	Ação	Status	Quando
Equipe VATSE	Login	OK	Agora
Equipe	Export	Fila	10 min
Sistema	Deploy	Falha	1h

Interface que move negócios.

Tokens com propósito

Movimento útil

Pronto para produto

Documentação

Smart UI

Crie interfaces bonitas em minutos

Documentação focada

Perfeito para temas “Glass / Aurora”

Component-first, sem dependências

Subtítulo H2

Seção H3

Título de artigo

VATSE OS

VATSE OS

Smart UI

API CRUD

Ecossistema

Modal Smart UI

Confirmação

Modal pequeno

Modal grande

Fullscreen

Side sheet

Novo cliente

Termos (exemplo)

Card curto

Hierarquia

Ações

R$ 0

R$ 49

R$ 129

R$ 12.450

312

9

Slide 1

Slide 2

Slide 3

Card A

Card B

Card C

Card D

Card 1

Card 2

Card 3

Título

Título

Título

Título

Título

1) Inclua o CSS e (opcional) o JS

2) Use os componentes base

Aplicar tema via HTML

Modo claro / escuro

Trocar tema via JavaScript

Trocar modo via JavaScript

Persistir tema (localStorage)

Temas disponíveis

Templates

Aprender é evoluir.

Formulário rápido

Matrícula

Metodologia

Infraestrutura

Resultados

Métricas em tempo real.

Filtros

R$ 128.430

3.482

74

Atividades

Novo relatório

Produto SaaS moderno.

Velocidade

Segurança

Escala

CTA

Demo

Portal Governamental.

Serviços