Design System — Ada

Referência visual de todos os componentes disponíveis.

h1

Cabeçalho principal da página.

tag: h1variant: muted, gradient

@h1
  Título principal
@h1: variant=muted
  Título muted
@h1: variant=gradient
  Título gradient

Título principal

Título muted

Título gradient

h2

Cabeçalho de seção.

tag: h2variant: muted

@h2
  Seção principal
@h2: variant=muted
  Seção muted

Seção principal

Seção muted

h3

Cabeçalho de subseção.

tag: h3variant: muted

@h3
  Subseção
@h3: variant=muted
  Subseção muted

Subseção

Subseção muted

h4

Cabeçalho de nível 4.

tag: h4variant: muted

@h4
  Título h4
@h4: variant=muted
  Título h4 muted

Título h4

Título h4 muted

h5

Cabeçalho de nível 5.

tag: h5variant: muted

@h5
  Título h5
@h5: variant=muted
  Título h5 muted

Título h5

Título h5 muted

h6

Cabeçalho de nível 6.

tag: h6variant: muted

@h6
  Título h6
@h6: variant=muted
  Título h6 muted

Título h6

Título h6 muted

p

Parágrafo de texto padrão.

tag: pvariant: muted

@p
  Este é um parágrafo de texto padrão com conteúdo informativo.
@p: variant=muted
  Este é um parágrafo com variante muted.

Este é um parágrafo de texto padrão com conteúdo informativo.

Este é um parágrafo com variante muted.

lead

Texto de destaque, maior que o parágrafo padrão.

tag: pvariant: muted

@lead
  Texto lead de destaque para introduções.
@lead: variant=muted
  Texto lead muted.

Texto lead de destaque para introduções.

Texto lead muted.

small

Texto pequeno para notas e detalhes secundários.

tag: smallvariant: muted

@small
  Nota de rodapé ou texto secundário.
@small: variant=muted
  Nota ainda mais discreta.

Nota de rodapé ou texto secundário.Nota ainda mais discreta.

caption

Legenda ou rótulo muito pequeno.

tag: spanvariant: uppercase

@caption
  Legenda da imagem
@caption: variant=uppercase
  Categoria

Legenda da imagemCategoria

link

Link estilizado com variantes de aparência.

tag: avariant: muted, navprop: href

@link: href=#
  Saiba mais
@link: href=# variant=muted
  Link discreto
@link: href=# variant=nav
  Navegação

Saiba mais Link discreto Navegação

blockquote

Citação em destaque com borda lateral.

tag: blockquotevariant: accent, muted

@blockquote
  A simplicidade é a sofisticação máxima.
@blockquote: variant=accent
  Design com propósito.
@blockquote: variant=muted
  Texto discreto em citação.

A simplicidade é a sofisticação máxima.

Design com propósito.

Texto discreto em citação.

code

Trecho de código inline.

tag: code

Use @code para destacar variáveis ou comandos inline.

Use @code para destacar variáveis ou comandos inline, como @code npm install ou @code const x = 1.

pre

Bloco de código com formatação preservada.

tag: prevariant: numbered

@pre
  function hello() {
    console.log(&quot;Olá mundo&quot;)
  }

function hello() {
  console.log("Olá mundo")
}

kbd

Tecla de teclado estilizada.

tag: kbdsize: sm, md

@kbd: size=sm
  Ctrl
@kbd
  Shift
@kbd: size=md
  Enter

Ctrl+Shift+Enter

button

Botão de ação com diversas variantes e tamanhos.

tag: buttonvariant: primary, secondary, accent, ghost, outline, danger, darksize: sm, md, lg

@button
  Primary
@button: variant=secondary
  Secondary
@button: variant=accent
  Accent
@button: variant=ghost
  Ghost
@button: variant=outline
  Outline
@button: variant=danger
  Danger
@button: variant=dark
  Dark
@button: size=sm
  Small
@button: size=lg
  Large

input

Campo de entrada de texto.

tag: inputvariant: default, error, successsize: sm, md, lgprop: placeholder, type, name

@input: placeholder=Nome completo
@input: variant=error, placeholder=Campo inválido
@input: variant=success, placeholder=Campo válido
@input: size=sm, placeholder=Pequeno
@input: size=lg, placeholder=Grande

textarea

Campo de texto multilinha.

tag: textareavariant: default, errorsize: sm, md, lgprop: placeholder, rows

@textarea: placeholder=Escreva sua mensagem...
@textarea: variant=error, placeholder=Campo com erro

select

Campo de seleção de opções.

tag: selectvariant: default, errorsize: sm, md, lg

@select
  @option
    Selecione uma opção
  @option: value=1
    Opção 1
  @option: value=2
    Opção 2

label

Rótulo para campos de formulário.

tag: labelvariant: default, requiredprop: for

@label
  Nome
@label: variant=required
  E-mail

NomeE-mail

checkbox

Caixa de seleção.

tag: input type=checkboxvariant: default, errorsize: sm, md, lg

@checkbox
@checkbox: variant=error
@checkbox: size=sm
@checkbox: size=lg

Small

Padrão

Large

Erro

radio

Botão de seleção única.

tag: input type=radiovariant: default, errorsize: sm, md, lg

@radio: name=grupo
@radio: name=grupo
@radio: name=grupo2, variant=error

Opção A

Opção B

Erro

switch

Interruptor de alternância.

tag: buttonvariant: default, active, successsize: sm, md, lg

@switch
@switch: variant=active
@switch: variant=success
@switch: size=sm
@switch: size=lg

container

Wrapper centralizado com largura máxima.

tag: divsize: narrow, default, wide, full

@container
  Conteúdo centralizado (max-w-6xl)
@container: size=narrow
  Conteúdo estreito (max-w-3xl)

container padrão — max-w-6xl

container narrow — max-w-3xl

row

Layout horizontal com flex row.

tag: divgap: sm, md, lgalign: start, center, end, between, around

@row: gap=md, align=between
  @div
    Item A
  @div
    Item B
  @div
    Item C

Item AItem BItem C

column

Layout vertical com flex column.

tag: divgap: sm, md, lgalign: start, center, end

@column: gap=sm, align=start
  @div
    Item 1
  @div
    Item 2
  @div
    Item 3

Item 1Item 2Item 3

grid

Layout em grade responsivo.

tag: divcols: 1, 2, 3, 4, autogap: sm, md, lg

@grid: cols=3, gap=md
  @card
    Card 1
  @card
    Card 2
  @card
    Card 3

Card 1

Conteúdo do card.

Card 2

Conteúdo do card.

Card 3

Conteúdo do card.

divider

Linha separadora horizontal.

tag: hrvariant: default, accent, light, darkspacing: sm, md, lg

@divider
@divider: variant=accent
@divider: variant=dark, spacing=sm

Conteúdo acima

Divisor padrão

Divisor accent

Divisor dark, espaçamento pequeno

card

Contêiner de conteúdo com sombra e bordas arredondadas.

tag: divvariant: default, elevated, flat, outlined, primary, accent, darkpadding: none, sm, md, lg

@card
  Conteúdo padrão
@card: variant=elevated
  Elevado
@card: variant=primary
  Borda primary
@card: variant=dark
  Dark

Padrão

Variante default com sombra suave.

Elevated

Sombra mais pronunciada.

Primary

Borda lateral teal.

Accent

Borda lateral laranja.

Outlined

Borda dupla, sem sombra.

Dark

Fundo escuro.

image

Imagem responsiva com variantes de estilo.

tag: imgvariant: default, rounded, circle, shadowaspect: square, video, portraitprop: src, alt

@image: src=static/img/ada_logo.svg, alt=Logo Ada, variant=rounded
@image: src=static/img/ada_logo.svg, alt=Logo, variant=circle

tabs

Abas para organizar conteúdo em painéis independentes. Múltiplas instâncias funcionam de forma isolada.

tabs / tabs-group / tabs-item / tabs-panel

@tabs
  @tabs-group
    @tabs-item
      Aba 1
    @tabs-item
      Aba 2
  @tabs-panel
    Conteúdo da aba 1
  @tabs-panel
    Conteúdo da aba 2

Conteúdo da primeira aba.

Conteúdo da segunda aba.

Conteúdo da terceira aba.

accordion / accordion-item

Seção expansível com título e conteúdo. Usa <details>/<summary> nativos — sem JS.

accordion / accordion-itemvariant: flush, cardprop: name (exclusivo)

@accordion
  @accordion-item
    @title
      Pergunta ou título
    Conteúdo expandido aqui.
  @accordion-item
    @title
      Outro item
    Mais conteúdo.
@accordion
  @accordion-item: name=grupo
    @title
      Abre e fecha o outro
    Use name= igual em todos os itens para comportamento exclusivo.
  @accordion-item: name=grupo
    @title
      Só um aberto por vez
    O browser fecha o anterior automaticamente.

O que é o Seed?▾

Uma linguagem de markup que compila para HTML estático.

Precisa de Node.js?▾

Não. O Seed é 100% Python.

Funciona com Tailwind?▾

Sim. As classes Tailwind são aplicadas diretamente nos componentes.

Exclusivo — item 1▾

Ao abrir este, o item 2 fecha automaticamente (atributo name=).

Exclusivo — item 2▾

Comportamento nativo do HTML, sem JavaScript.

carousel / slide

Carrossel de slides com navegação por setas, indicadores (dots) e autoplay opcional.

tag: divvariant: containedprop: autoplay

@carousel
  @slide
    Slide 1
  @slide
    Slide 2
  @slide
    Slide 3
  @slide
    Auto slide 1
  @slide
    Auto slide 2
@carousel: autoplay=3000

Slide 1

Primeiro slide do carrossel.

Slide 2

Segundo slide do carrossel.

Slide 3

Terceiro slide do carrossel.

pill

Etiqueta arredondada de destaque, maior que o badge.

tag: spanvariant: default, accent, dark, gradient, glass, success, newsize: sm, md, lg

@pill
  Padrão
@pill: variant=accent
  Novidade
@pill: variant=gradient
  Destaque
@pill: variant=success
  Ativo
@pill: variant=new
  New
@pill: size=sm
  Pequeno
@pill: size=lg
  Grande

PadrãoNovidadeDestaqueAtivoNewGlassDarkPequenoGrande

badge

Etiqueta compacta para status e categorias.

tag: spanvariant: primary, secondary, accent, success, warning, danger, darksize: sm, md, lg

@badge
  Primary
@badge: variant=secondary
  Secondary
@badge: variant=accent
  Accent
@badge: variant=success
  Success
@badge: variant=warning
  Warning
@badge: variant=danger
  Danger
@badge: variant=dark
  Dark

PrimarySecondaryAccentSuccessWarningDangerDarkSmallLarge

avatar

Foto de perfil circular ou arredondada.

tag: imgvariant: circle, rounded, squaresize: sm, md, lg, xlborder: none, white, primaryprop: src, alt

@avatar: src=static/img/ada_face.svg, alt=Ada
@avatar: src=static/img/ada_face.svg, alt=Ada, variant=rounded, size=lg
@avatar: src=static/img/ada_face.svg, alt=Ada, border=primary

icon

Contêiner para ícone com fundo colorido.

tag: spanvariant: primary, secondary, accent, success, warning, dangersize: sm, md, lg, xl

@icon
  ★
@icon: variant=accent, size=lg
  ♥
@icon: variant=success
  ✓

★◆♥✓⚡✕★

table / thead / tbody / tr / th / td

Tabela de dados com cabeçalho, corpo e células.

table variant: default, striped, borderedtr variant: default, striped, selectedth/td align: left, center, right

@table
  @thead
    @tr
      @th
        Nome
      @th
        Status
      @th: align=right
        Valor
  @tbody
    @tr
      @td
        Ada
      @td
        @badge: variant=success
          Ativo
      @td: align=right
        R$ 120,00

Nome	Status	Valor
Ada Silva	Ativo	R$ 120,00
Carlos Lima	Pendente	R$ 80,00
Marina Costa	Inativo	R$ 200,00

ul / ol / li

Listas ordenadas e não ordenadas.

ul variant: default, disc, check, noneli variant: default, check

@ul: variant=disc
  @li
    Primeiro item
  @li
    Segundo item
@ol
  @li
    Item ordenado 1
  @li
    Item ordenado 2

ul variant=disc

Primeiro item
Segundo item
Terceiro item

ol

Item ordenado 1
Item ordenado 2
Item ordenado 3

alert

Mensagem de feedback contextual.

tag: divvariant: info, success, warning, danger, neutral

@alert
  Mensagem informativa padrão.
@alert: variant=success
  Operação realizada com sucesso!
@alert: variant=warning
  Atenção: verifique os dados.
@alert: variant=danger
  Erro ao processar a solicitação.
@alert: variant=neutral
  Mensagem neutra.

Mensagem informativa padrão.

Operação realizada com sucesso!

Atenção: verifique os dados.

Erro ao processar a solicitação.

Mensagem neutra.

progress

Barra de progresso.

tag: divvariant: default, success, warning, dangersize: sm, md, lg

@progress
  @div: class=h-full w-3/4 bg-teal-500 rounded-full
@progress: variant=success
  @div: class=h-full w-1/2 bg-green-500 rounded-full
@progress: variant=danger, size=lg
  @div: class=h-full w-1/4 bg-red-500 rounded-full

spinner

Indicador de carregamento animado.

tag: divvariant: default, primary, whitesize: sm, md, lg

@spinner
@spinner: variant=primary, size=lg
@spinner: size=sm

skeleton

Placeholder animado para conteúdo carregando.

tag: divvariant: text, circle, rectsize: sm, md, lg

@skeleton: variant=text, class=w-48
@skeleton: variant=circle, class=w-12 h-12
@skeleton: variant=rect, class=w-full h-32