‹ voltar ao site
lab de temas

componentes

Biblioteca de componentes

Tudo neste site é feito com estas peças. Átomos se juntam em moléculas, moléculas em organismos, e os organismos preenchem os templates de página. Troque de tema lá em cima e veja tudo mudar.

Fundamentos

tokens.*.css

Design tokens

Os componentes nunca usam uma cor crua. O tema define os tokens base, os tokens semânticos dão um papel a eles, e os tokens de componente ajustam cada peça. Mude um valor lá embaixo e ele sobe até o topo.

  1. base --color-primary definido pelo tema
  2. semântico --primary o que significa
  3. componente --btn-primary-bg onde vai
  1. base --color-base-000 definido pelo tema
  2. semântico --surface-sunken o que significa
  3. componente --tag-bg onde vai
  4. Tag
global.css

Camadas de cascata

Os estilos se empilham em três camadas, então um componente sempre consegue reestilizar os átomos dentro dele com uma classe simples.

  1. @layer basereset + utilitários
  2. @layer uiátomos + moléculas
  3. (unlayered)componentes + páginas, sem camada, então sempre ganham

Átomos

As menores peças. Cada uma faz uma só coisa e lê apenas tokens.

ui/Button.astro

Button

Links e ações. A superfície vem dos tokens de controles, então um só ajuste do tema deixa todos os botões planos, chanfrados ou redondos.

Props

PropTipoPadrão
variant?default (outlined), primary (filled), portal (glowing accent, for the loft), danger (destructive) 'default' | 'primary' | 'portal' | 'danger' 'default'
size?md for page CTAs, sm for dense tool UIs, icon for a single glyph 'md' | 'sm' | 'icon' 'md'
block?fill the container's width boolean –
icon?a pixelarticons name, drawn before the label string –

Mais todos os atributos nativos de <button> / <a>.

Tokens que lê

componente
--fs-* --sp-* --ctl-border --ctl-radius --btn-bg --btn-fg --ctl-shadow --ctl-lift-hover --ctl-shadow-hover --btn-hover-border --btn-hover-fg --ctl-press --ctl-shadow-active --btn-primary-bg --btn-primary-fg --btn-primary-hover-bg
semântico
--font-pixel --error --accent --foreground --secondary

Uso

<Button variant="primary" icon="mail" href="#contact">email me</Button>
<Button size="sm" block data-save>save</Button>
ui/Tag.astro

Tag

Etiquetas pequenas num poço afundado: a tecnologia de um card, ou uma contagem.

React 19 WebRTC Rust 25 8

Props

PropTipoPadrão
variant? 'label' | 'count' 'label'
hot? boolean –

Mais todos os atributos nativos de <span>.

Tokens que lê

componente
--sink-border --sink-radius --tag-fg --tag-bg --sink-shadow --fs-* --sp-*
semântico
--font-pixel --warning --on-warning

Uso

<Tag>WebRTC</Tag>
<Tag variant="count" hot>8</Tag>
ui/Badge.astro

Badge

Um status numa cor sólida, com o texto legível dessa cor por cima.

Publicado Falhou Em revisão No ar

Props

PropTipoPadrão
tone 'success' | 'error' | 'warning' | 'info' –

Mais todos os atributos nativos de <span>.

Tokens que lê

componente
--fs-* --sp-* --sink-radius
semântico
--font-pixel --success --on-success --error --on-error --warning --on-warning --info --on-info

Uso

<Badge tone="success">shipped</Badge>
ui/Chip.astro

Chip

Uma palavra num poço afundado, maior e mais simples que uma etiqueta. As removíveis ganham um ×.

TypeScript WebRTC AT Protocol atproto webrtc

Props

PropTipoPadrão
removable? boolean –

Mais todos os atributos nativos de <span>.

Tokens que lê

componente
--fs-* --sp-* --sink-border --sink-radius --sink-shadow --tag-bg
semântico
--foreground-dim --surface-sunken --font-pixel --foreground --foreground-faint

Uso

<Chip>TypeScript</Chip>
<Chip removable>atproto</Chip>
ui/Field.astro

Field

Um campo de texto com um glifo dentro da borda. Um erro deixa a borda vermelha.

Props

PropTipoPadrão
icon string –
type? 'text' | 'search' | 'password' | 'email' | 'url' 'text'
placeholder? string –
name? string –
inputDir? 'ltr' | 'rtl' | 'auto' –
error? boolean –

Mais todos os atributos nativos de <label>.

Tokens que lê

componente
--sp-* --fs-* --sink-border --sink-shadow --sink-radius
semântico
--foreground-faint --foreground --surface-sunken --primary --error

Uso

<Field icon="@" placeholder="handle.bsky.social" />
<Field icon="⚿" type="password" error />
ui/Switch.astro

Switch

Um interruptor feito sobre um checkbox de verdade, então teclado e formulários simplesmente funcionam.

Props

PropTipoPadrão
label? string –

Mais todos os atributos nativos de <input>.

Tokens que lê

componente
--sp-* --fs-* --ctl-radius
semântico
--foreground-dim --surface-sunken --border-strong --foreground-faint --primary --on-accent --foreground

Uso

<Switch label="Scanlines" data-fx="--fx-scanline" />
ui/Segmented.astro

Segmented

Algumas opções em que só uma pode estar ligada. A escolhida sobe para fora do poço.

Props

PropTipoPadrão
options Option[] –
label string –

Mais todos os atributos nativos de <div>.

Feito com

Badge

Tokens que lê

componente
--sink-border --ctl-radius --fs-* --sp-*
semântico
--surface-sunken --foreground-faint --surface --foreground --shadow-color

Uso

<Segmented label="Billing" options={[
  { label: 'Monthly' },
  { label: 'Yearly', pressed: true, badge: { text: '-20%', tone: 'warning' } },
]} />
ui/Eyebrow.astro

Eyebrow

A pequena etiqueta // acima do título de uma seção.

trabalhos selecionados

Props

Não tem props próprias.

Tokens que lê

componente
--fs-* --sp-*
semântico
--font-pixel --primary --foreground-faint

Uso

<Eyebrow>selected work</Eyebrow>

Moléculas

Átomos juntos numa forma: uma barra de janela, uma superfície elevada.

ui/TitleBar.astro

TitleBar

A faixa no topo de uma janela: pontos, um título e um espaço no final. O AIM a transforma no clássico degradê azul.

protoimsg.app 2025
now_playing.mod
// atproto · ao vivo ● online

Props

PropTipoPadrão
size?md on cards, sm on dense tool windows and dialogs 'md' | 'sm' 'md'
dots? boolean –

Mais todos os atributos nativos de <div>.

Tokens que lê

componente
--sp-* --titlebar-bg --fs-* --titlebar-fg --ctl-radius --titlebar-accent
semântico
--border --font-pixel --foreground-faint
do pai
--ac

Uso

<TitleBar dots>
  protoimsg.app
  <span slot="end">2025</span>
</TitleBar>
ui/Panel.astro

Panel

A superfície elevada onde ficam todos os cards e janelas. Raised para o que se usa, flat para o conteúdo de apoio, lift para links.

raised
flat
lift · passe o mouse
window.txt

Panel + TitleBar

Props

PropTipoPadrão
as? 'div' | 'article' | 'section' | 'aside' 'div'
elevation? 'raised' | 'flat' 'raised'
lift? boolean –

Mais todos os atributos nativos de <div>.

Tokens que lê

componente
--card-bg --raise-border --raise-radius --raise-pad --raise-shadow --raise-shadow-static --lift-hover --raise-shadow-hover --card-border-hover

Uso

<Panel as="article" lift>
  <TitleBar dots>window.txt</TitleBar>
  …
</Panel>

Organismos

Partes inteiras e reconhecíveis do site, feitas de moléculas e átomos.

ProjectCard.astro

ProjectCard

Um Panel com uma TitleBar, um texto, Tags e links. O card inteiro leva ao primeiro link.

protoimsg.app 2025

protoIM

Fundador & Engenheiro Líder · 2025–atual

proto Instant Messenger — chat de vídeo open source e multiplataforma no AT Protocol: chamadas gratuitas, sem exigir cadastro, como alternativa ao lock-in do FaceTime. Um monorepo TypeScript com 8 pacotes (~65K LOC) que entrega uma única plataforma em tempo real na web (React 19), no desktop (Tauri v2 / Rust) e no mobile (Expo). Sinalização WebRTC feita à mão com credenciais TURN temporárias em coturn self-hosted, LiveKit SFU para chamadas em grupo, Lexicons próprios app.protoimsg.chat.*, um indexador Jetstream e 5 serviços no Fly.io — incluindo um PDS self-hosted e tradução ao vivo com NLLB-200 em ~17 idiomas.

React 19 WebRTC Tauri v2 Rust Expo LiveKit PDS Fly.io
→ Visitar site → GitHub

Props

PropTipoPadrão
project Project –

Feito com

Tag Panel TitleBar

Tokens que lê

componente
--sp-* --fs-*
semântico
--primary --font-body --font-display --font-pixel --foreground-faint --foreground-dim --foreground

Uso

{featured(m).map((project) => <ProjectCard project={project} />)}
MiniCard.astro

MiniCard

Um Panel plano para os projetos menores.

nosky

Criador & Engenheiro Líder · 2026

Cliente social ATProto (Expo/RN) que dispensa o AppView centralizado — consulta diretamente os servidores PDS seguidos, com merge/ordenação no cliente, sobre a stack Microcosm (Slingshot, Constellation, Spacedust).

Props

PropTipoPadrão
project MiniProject –

Feito com

Panel

Tokens que lê

componente
--sp-* --fs-*
semântico
--font-display --info --font-pixel --foreground-faint --foreground-dim --warning

Uso

<MiniCard project={project} />
ArcadeCabinet.astro

ArcadeCabinet

Um Panel vestido de fliperama, com uma tela jogável ou bloqueada.

FAST HOPPER
0
RECORDE 0

HOPPER

Designer & Engenheiro · no ar

Um jogo de plataforma vertical — salte por uma escada infinita de plataformas atrás do recorde. Roda sobre uma simulação determinística, então toda partida é verificável. Rankings globais por dificuldade (fast / faster), e seus recordes são gravados direto no seu repo ATProto como records actor.rpg.stats.

TypeScript Canvas Deterministic Sim ATProto Records Leaderboards
▶ Jogar agora

Props

PropTipoPadrão
game Game –

Feito com

Tag Panel

Tokens que lê

componente
--cabinet-from --cabinet-to --sink-shadow --screen-star --screen-bg --fs-* --screen-shadow --platform-from --platform-to --platform-edge --platform-hi --player-glow --sp-* --locked-from --locked-to
semântico
--primary --border --scanline-color-screen --font-pixel --foreground --foreground-dim --font-display --foreground-faint

Uso

<ArcadeCabinet game={game} />
AtStatusCard.astro

AtStatusCard

Meu status do Bluesky ao vivo, lido do meu repo AT Protocol quando a página carrega.

Props

Não tem props próprias.

Feito com

Panel TitleBar

Tokens que lê

componente
--fs-* --titlebar-accent --sp-* --sink-radius
semântico
--success --primary --surface-sunken --shadow-color-soft --font-display --foreground --info --border --font-pixel --foreground-faint

Uso

<AtStatusCard />
FeedbackForm.astro

FeedbackForm

Um Button que abre uma gaveta: uma TitleBar sobre um formulário, e no celular uma folha que você arrasta para fechar.

deixe um recado

Props

Não tem props próprias.

Feito com

Button TitleBar

Tokens que lê

componente
--sp-* --fs-* --sink-border --sink-shadow --sink-radius
semântico
--foreground --surface-sunken --foreground-faint --primary --foreground-dim --success --error

Uso

<FeedbackForm />

Templates

As molduras onde as páginas colocam o conteúdo.

Section.astro

Section

Cada seção da página inicial: um Eyebrow, um título e depois o que vier dentro.

trabalhos selecionados

Projetos.

Esta caixa é uma Section.

Props

PropTipoPadrão
id? string –
eyebrow? string –
title? string –

Feito com

Eyebrow

Tokens que lê

Nenhum próprio. Os átomos trazem os deles.

Uso

<Section id="work" eyebrow="selected work" title="Things I've built">
  …
</Section>