Vamos começar

Tudo para começar um projeto com BoardUI em uma só página: o que é o sistema, como instalar, como integrar seu agente de IA e como funcionam as cores e a tipografia.

Sistema de design Reactpara Interfaces Agenticas

BoardUI é um sistema de design React com 104 componentes únicos, incluindo 19 gráficos de dados, além de 10 templates Pro e mais de 400 tokens de design, criado no Figma.

M

Mertcan Esmergül

Data de nascimento
28 de jul. de 1997
Sexo
Masculino
Tipo de Sangue
A rh+
Médico GP
Mattheus Clarkson

Passos

31,600

passos totais
29 jun - 5 jul

Pontuação de sono

Excelente.

29 jun - 5 jul
98
Duração: 7h 50m
49/50
Hora de dormir: 20m mais cedo
29/30
Interrupções: 5m acordar
20/20

Dias mais ativos

32,459

passos totais
Janeiro

Jan

Fev

Mar

Abr

Maio

Jun

Jul

Ago

Set

Out

Nov

Dez

Atividade

Mover
1,592 kcal
Exercício
1h 45m
Em execução
5.2 km

Alertas importantes

12

esta semana
29 jun - 5 jul

Frequência cardíaca elevada

Sua frequência cardíaca passou de 120 BPM enquanto você parecia inativo por 10 minutos, a partir das 8:59.

4 de jul.

ID médico

A sua informação de contato de emergência e alergia foi atualizada no seu ID Médico.

3 de jul.

Resultados do laboratório prontos

O seu último exame de sangue encomendado pelo Dr. Mattheus Clarkson está de volta — o colesterol e a glicose estão dentro do intervalo normal.

3 de jul.

Aviso de medicação

Perdeu a dose de Metoprolol às 9h. Tome-a o mais depressa possível, a menos que a próxima dose esteja próxima.

2 de jul.

Dormência irregular

Sua hora de dormir mudou mais de 2 horas em 3 das últimas 7 noites, o que pode afetar sua pontuação de sono.

30 de jun.

Oxigênio de baixo sangue

Seu oxigênio no sangue caiu para 93% por um curto período durante o sono.

29 de jun.

Por que usar BoardUI

Você é o dono da fonte.

Components are copied into your project as plain React + Tailwind files. No runtime package, no lock-in, nothing you cannot open and edit.

Feito para agentes de IA

An MCP server installs components on request, and always-on design rules keep your agent on the token system instead of inventing its own.

Acessível por padrão

Every form component builds on React Aria: labels, focus management, keyboard behavior, and ARIA wiring come included.

Criado primeiro no Figma

Every component starts as a finished Figma frame and lands in code pixel for pixel, carried by 400+ design tokens.

Modo escuro integrado

Semantic tokens flip automatically under the .dark class. You never write a dark: override or a raw hex value.

Pronto para interfaces ricas em dados

19 chart cards, dashboard blocks, and 10 full-page templates, made for products where the data is the interface.

Instalação

Usa um monorepo ou aliases de importação personalizados? Você pode instalar em um pacote de UI compartilhado. Consulte o guia de configuração monorepo antes de executar estes comandos.

Um comando configura qualquer projeto React + Tailwind CSS v4: dependências de runtime, tokens de tema, estilos globais, o cx utilitário e as regras de design que seu agente carrega em todas as sessões.

npx boardui@latest init

Adicione componentes conforme precisar. As dependências internas e os pacotes npm são resolvidos automaticamente:

npx boardui@latest add button select date-picker
Guias por framework e configuração manual

Servidor MCP

BoardUI fala MCP: conecte seu agente uma vez para ele explorar todos os 104 componentes com exemplos reais de uso, configurar seu projeto e instalar os arquivos de código-fonte. Ative o Pro no mesmo chat com sua chave de licença.

Claude CodeCursorVS CodeCodex
Conecte seu agente

Gratuito e BoardUI Pro

BoardUI

Grátis

74 componentes e blocos: botões, campos de texto, tabelas, menus suspensos, seletores de data, barra lateral e cards de autenticação, além do sistema completo de tokens e tipografia. Licença MIT, projetos ilimitados e instalação via CLI, MCP ou copiar e colar.

Ver todos os componentes

BoardUI Pro

Uma compra única libera 30 componentes e blocos Pro: cards de gráficos, componentes para agentes, compositor de chat com IA e todos os 10 templates de página completa, com atualizações vitalícias. Ative a licença uma vez e instale os componentes Pro da mesma forma que os gratuitos.

Ver preços

Cores

Todas as cores usam tokens semânticos para textos, superfícies, bordas, ícones e gráficos. Isso mantém os componentes consistentes nos modos claro e escuro. A escala de destaque controla CTAs e estados de seleção e pode ser adaptada à sua marca com uma única alteração.

accent-100 … accent-700 · text-text-primary · bg-background-secondary-default · border-separator-border

Referência completa dos tokens

Tipografia

A escala tipográfica do Figma é fornecida como utilitários compostos: cada um define tamanho, peso, altura de linha e espaçamento entre letras. Escolha um estilo pronto em vez de combinar text-sm font-medium fragmentos.

Embarque nos dados.text-title-1-medium
Embarque nos dados.text-title-2-medium
Embarque nos dados.text-headline-medium
Embarque nos dados.text-body-medium
Embarque nos dados.text-caption-1-semibold
Escala tipográfica completa

Perguntas? Pergunte no Discord e nós respondemos em aberto, geralmente no mesmo dia.