O design system da RivoCode, documentado por dentro.
91 peças sobre a Base UI, com tokens em três camadas, dois temas e duas densidades. Nenhum componente conhece a cor da marca: ele pede um papel, e o tema responde.
91
peças no catálogo
87
com exemplo que roda
1545
testes verdes, web e nativo
8
guias de uso
Tokens
Trocar de cliente é trocar uma camada
A paleta guarda a cor crua. O papel diz para que ela serve. O tema decide qual cor responde a cada papel.
Componente nenhum atravessa essas camadas: o bun run check falha se alguém escrever uma cor literal, e quarenta pares de contraste são medidos a cada commit.
--rc-p-lime-400a cor crua, sem opinião--color-accento papel que ela cumpre[data-rc-theme]quem decide, por clienteDensidade
A mesma tela em duas alturas, sem dois catálogos
Numa tela de operação cabe mais linha na mesma altura. Num cadastro que se preenche uma vez por mês, não.
É um atributo no Provider, e a altura de todo controle acompanha. Não existe um segundo catálogo de peças compactas para manter em dia.
density="comfortable"
density="compact"
React Native
A mesma peça no celular, sem um segundo catálogo
O @rivocode/ui-native traz 75 das 91 peças para o React Native, com os mesmos tokens, os mesmos dois temas e o mesmo vocabulário de classes: o NativeWind lê as classes que você já escreve aqui.
O que atravessa é o vocabulário, o token e a escolha da peça. O JSX se reescreve: no toque tudo é controlado, a lista vem por items em vez de composição, e as peças que não portam não portam por decisão: barra lateral, tabela e dica de ponteiro são idioma de mesa, e o celular tem o dele.
O guia do React Native traz a tabela peça a peça: o que traduz, o que está na fila e o que nunca vai portar.
@rivocode/ui<Select items={UFS} value={uf} onValueChange={setUf}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
{UFS.map((item) => (
<SelectItem key={item.value} value={item.value}>
{item.label}
</SelectItem>
))}
</SelectContent>
</Select>@rivocode/ui-native<Select
items={UFS}
value={uf}
onValueChange={setUf}
label="UF"
/>Agents
A mesma documentação, em markdown cru
Boa parte do código que usa esta biblioteca hoje é escrita com um agent ao lado. Um site que só serve HTML obriga o agent a adivinhar a API pelo nome, e ele adivinha com confiança.
Toda página tem o endereço cru em .md, com importação, exemplos e tabela de props. O índice fica em /llms.txt.
/componentes/data-table.md# DataTable
Listagem com os quatro finais de uma
consulta: carregando, deu certo, deu
errado, veio vazia.
## Importação
import { DataTable } from '@rivocode/ui'
## Props
| Prop | Tipo | Obrigatória |
| --------- | -------- | ----------- |
| data | Row[] | sim |
| columns | Column[] | sim |
| isLoading | boolean |, |Skill
Um comando, e o agente aprende a biblioteca
Colar o contrato no prompt funciona uma vez. Na segunda conversa ele não está lá, e o agent volta a adivinhar a API pelo nome.
A skill fica instalada, e leva junto a tabela de escolha entre as peças parecidas: Alert contra Toast, Select contra Combobox, com o porquê de cada linha.
.claude/skills/rivocode-ui/SKILL.md| Situação | Peça certa |
| --------------------------- | ------------- |
| Aviso que fica na tela | Alert |
| Confirmação destrutiva | AlertDialog |
| Poucas opções fixas | Select |
| Lista longa, ou do servidor | Combobox |
| Liga agora, sem confirmar | Switch |
## O que nunca fazer
- Cor literal em className ou style. Sempre token.
- z-index numérico. Sempre z-[var(--rc-z-*)].
- Altura cravada em controle.Base UI
O comportamento não é nosso, e essa é a vantagem
Foco, teclado, portal, leitor de tela e os casos de borda vêm da Base UI, que trata disso em tempo integral.
O que a biblioteca acrescenta é o desenho, e a decisão de quando cada peça serve. Duas linhas de CSS e um Provider, e a tela começa.
import '@rivocode/ui/styles.css'
import { RivoProvider } from '@rivocode/ui'
export function App() {
return (
<RivoProvider theme="rivocode-dark" density="comfortable">
<InvoiceScreen />
</RivoProvider>
)
}O catálogo
Por família, na ordem de quem monta uma tela.
Fundação1
Formulário30
Estrutura17
Comece pela instalação
Um comando, as duas linhas de CSS e o Provider. Depois disso é escrever tela.