Componentes

97 componentes traduzidos de Figma para React e Tailwind, prontos para copiar ou puxar com npx boardui addTudo partilha as mesmas coisas, por isso tudo se encaixa.

Fundamentos

2Os tokens tudo o resto é construído sobre.

Cores

A paleta completa e símbolos semânticos.

DisplayTitleHeadlineBody regularMono caption

Tipografia

Tipo escala, pesos e estilos de texto.

Básicos

49Os blocos de construção do dia a dia.

Plans are billed monthly for every active seat.

Acordeão

FAQs e configurações que abrem no lugar.

Dois novos componentes

Carrossel e entrada OTP são instaláveis através do CLI hoje.

Anúncio

Banner descartável para notícias do produto.

Avatar

Foto do usuário com recuos iniciais.

Navegação estrutural

Trilho do caminho com níveis em colapso.

Botão

Ações primárias, secundárias e de perigo.

Grupo de botões

Fila fundida de botões selecionáveis.

Carrossel

Deslize através de cartões com snap, setas e pontos.

SelecionadoNão selecionadoIndeterminado

Caixa de seleção

Carrapato animado, variante de cartão, dois tamanhos.

ConcluídoAguardando+14.8%ConfirmadoFalhouEm reexamev2.4.0RascunhoVivo-3.2%BetaArquivado

Chip

Tokens de filtro removíveis compactos.

Botão de fechar

O pequeno ×, feito corretamente.

Paleta de comandos

Todas as páginas e ações a um ⌘K de distância.

review @

Entrada de tokens

Menções com @ e comandos com / como tokens.

Q3 report.pdf2.4 MB

Menu de contexto

Ações de clique direito, com submenus.

Seletor de cores

Escolha a olho, por hex ou entre predefinições.

MRMateo Ruiz

AHAmir Haddad

Combobox

Digite para filtrar a lista e escolha.

Stay, novembro de 2026

novembro de 2026

do	se	te	qu	qu	se	sá
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Calendário de datas

Um mês na página para datas e períodos.

Mertcan Esmergul

hi@mertcan.works

30 minutos reunião de apresentação

Vamos discutir suas necessidades de design e como podemos colaborar

30 minutosInglês

Data da reunião, agosto de 2026

agosto de 2026

do	se	te	qu	qu	se	sá
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Seletor de data

Calendário Popover para datas únicas.

Divisor

Separadores de conteúdo individuais, duplos e preenchidos.

Filters

Narrow the customer list.

StatusActiveTrialingPast dueCanceled

Gaveta

Painéis laterais e inferiores a partir de qualquer borda.

Menu suspenso

Menus composíveis - equipes, modelos, ações.

Arraste e solte para enviar ou selecionar

PDF, JPG, PNG, XLSX (máx. 8 MB)

Enviando ...

Enviado com sucesso!

Upload de arquivos

Arraste, valide e rastreie o progresso do upload.

Botão de ícone

Botão de ação quadrado, apenas ícone.

Campo de texto

Campo de texto com addons e validação.

Campo de código OTP

Caixas de código único com pasta e preenchimento automático.

Botão de link

A ação de texto em linha tem o estilo de um link.

Storage72%

Seats84%

API requests96%

Medidor

Uso em relação a um limite, com tom conforme enche.

Delete project?

Acme Dashboard and its 24 files will be deleted for everyone. You can't undo this.

Modal

Diálogos e alertas sobre uma página escurecida.

Notificação

Mensagens de status com ícones, avatares e ações.

Seats

Discount

Campo numérico

Números com botões de passo, unidades e limites.

Paginação

Números de página com truncamento.

Popover

Conteúdo rico ancorado a um gatilho, com seta opcional.

Uploading64%

Progresso

Barras e anéis, determinados ou em varredura.

SemanalMensalAnual

Botão de opção

Gradiente ponto, variante de cartão, dois tamanhos.

Controle segmentado

Comutador de opções de pílulas deslizando.

Amir HaddadDesign

Priya NairDesign

Campo de busca

Digite para filtrar, Escape para limpar.

Seleção

Caixa de lista de escolha única com pesquisa.

Skeleton

Placeholders que se revelam no conteúdo real.

Controle deslizante

Seleção de valor único e intervalo min/max.

Botão social

Botões de login para 24 provedores, logotipos incluídos.

Spinner

Luz em camadas em órbita para trabalho em andamento.

Interruptor

Ligar/desligar com movimento de mola.

Name	Role	Status
Olivia Rhye	Product Designer	Active
Phoenix Baker	Engineer	Active
Lana Steiner	Design Lead	Invited
Demi Wilkinson	Frontend Engineer	Active

Tabela

Colunas ordenáveis, cabeçalho pegajoso.

Componentes48

Blocos6

Gráficos

Abas

Sublinhado e lista de comprimidos.

Topics

DesignEngineeringMarketingSalesSupport

BugFeature

Grupo de tags

Tags para filtrar, escolher ou remover.

0/120

Área de texto

Campo multilinha com crescimento automático e contagem de caracteres.

Opens

9:00 AM

Closes

6:00 PM

Campo de hora

Horários digitados segmento por segmento.

Toast

toast() de qualquer lugar, empilhado e com tempo.

src

components

button.tsx

button.module.css

page.tsx

README.md

Árvore

Pastas aninhadas com seleção e navegação pelo teclado.

Dica

Dicas posicionadas no hover e foco.

Blocos

18Conjuntos maiores, prontos para entrar.

Pensar

Pesquisando os documentos

Lendo arquivos

Escrevendo a resposta

Agente pensando

Indicadores de pensamento de agentes para compositores de chat.

57%

Carregamento do compositor

Orbitando banda de luz para um compositor que trabalha.

Principalprojeto- mar

57%

Painel do Compositor

Entrada de chat de duas linhas com modos de permissão.

Principalprojeto- mar

57%

Anexos do compositor

Blocos de arquivos que pousam um por um acima da prompt.

Boas-vindas de volta

Inscreva-se para recomeçar de onde parou.

ou continue com

É sua primeira vez? Criar conta

Card de autenticação

Inscrição e blocos de inscrição com login social.

Busca na web

A pesquisa com as fontes abriu um agente.

Lista de tarefas

O registro do agente de transmissão que revela passo a passo.

Limites de utilização do plano · Max (5x)

Limite de 5 horasReinicia em 2 h 46 min38%

Semanalmente · todos os modelosReinicia Tue 3:00 PM3%

Semanalmente · ProReinicia Tue 3:00 PM5%

Limites do agente

Limites de utilização da janela de contexto e do plano.

Which harness controls should stay in the top bar?

Show up sell toggleForces the upsell card up without spending the 4-turn allowance first.Wallpaper pickerThe chat wallpaper choices.Play level-upReplays the free and premium animations

Other

Questionário

Perguntas em modo de plano, um passo de cada vez.

Engenheiro de nuvem

Nome

Rótulo

Descrição

Idioma

Notificações

Mostrar uma notificação quando a resposta estiver pronta.

Voz

Velocidade de reprodução

Criador de agentes

Crie a identidade de um agente, avatar animado e preferências de voz.

5 etapas restantes

Ler os arquivos do projeto

Atualize e instale os tokens do modo claro

Implemente os tokens do modo escuro

Adicionar a opção de tema reutilizável registrado

Execute registro, fiapo e compilação de produção

Progresso do agente

Progresso colapsível para tarefas de IA multi-passo.

agosto de 2026

Dom

Seg

Ter

Qua

Qui

Sex

Sáb

+2 mais

Calendário

Vista mensal completa com comprimidos de evento.

Data Grid

Planilha editável com seleção, filtros e resumos em tempo real.

Resultados totais

48 clientes

	Status
John Clarkson	A entrega falhou	5 de set. de 2026	$3.412
Aspen Lubin	A entrega falhou	25 de mar. de 2026	$1.899
Michael Ekstrom	Enviado	1 de ago. de 2026	$2.752
Kianna Vaccaro	Enviado	2 de abr. de 2026	$145
Livia Saris	A entrega falhou	14 de nov. de 2026	$708

Tabela de dados

Filtros, seleção e paginação ligados.

Central de notificações

Caixa de entrada de atividade agrupada com abas e ações.

Plano atual

Ultra $149/mo

Você está em 7x mais uso do que Regular.

Limites

Você está em 7x mais uso do que Premium

Puxar os Pedidos

Prestador de revisão

Selecione Github ou outros provedores para revisões

Destino PR

Abra os links de solicitação de puxar dentro de seu aplicativo

Notificações

Pedidos críticos

Seja notificado quando o modo precisa tomar uma decisão crítica

Notificações do sistema

Mostrar as notificações fundamentais quando um agente completa uma tarefa

Som de conclusão

Efeito sonoro uma tarefa está concluída

Alertas de emergência

Push notification on yourphone when BoardUI messages you

Modal de configurações

Configuração de várias páginas numa janela controlada.

Barra lateral

Navegação flutuante de aplicativos com menu de equipes.

Total das receitas

$152,313.92

A partir do mês passado

16%

Cards de indicadores

Cartões KPI com chips delta ou uma banda de rodapé.

Gráficos

18Cartões de dados para painéis.

Revenue

$152,314

+16%

$131,304 last year

This year
Last year

Gráfico de Receitas

Este ano contra o último, área sobre uma linha arrojada.

Atividade

Mover

1,592 kcal

Exercício

1h 45m

Em execução

5.2 km

Anéis de atividade

Anel de progresso concêntrico, estilo Apple.

Visitantes

94,700

+8.2%

Orgânico50,500

Referência25,900

Pagos18,300

Gráfico de área

Empilhado, sobreposto ou 100% série de área.

Dispositivos

Navegadores

Sistemas operativos

Tamanhos de tela

Visitantes

Chrome53%

Safari27%

Firefox9%

Contorno6%

Samsung Internet2%

Lista de barras

Linhas de desagregação classificadas com barras de partilha e tabulações.

Sessions · Conversion 3.7%

83,200

+9.4%

Gráfico combinado

Barras e uma linha em eixos independentes.

Contribuições neste ano

958

+14.8%

Tokens acumulados

562.7M

Pico de tokens

12h 54m

Tarefa mais longa

62 days

Maior sequência

Atividade

JanFevMarAbrMaioJunJulAgoSetOutNovDez

Contribuições

Mapa de calor de atividade do estilo GitHub.

Ganhado até agora

$7,462

+14.8%

Gráfico de ganhos

Gráfico de barras com comparação de período.

Sign-up funnel

197

+5.2%

Últimos 30 dias

Ligação aberta

197

Iniciado

110

Concluído

Convertida

Gráfico de funil

Fluxo funil com etapas cônicas e pílulas de conversão.

Active users

1,892

+5.2%

Últimos 7 dias

Seg

Ter

Qua

Qui

Sex

Sáb

Dom

000204060810121416182022

MenosMais

Gráfico de mapa de calor

Mapa de calor matricial com uma rampa que segue o tema.

Dias mais ativos

32,459

passos totais

JaneiroJaneiro

Jan

Fev

Mar

Abr

Maio

Jun

Jul

Ago

Set

Out

Nov

Dez

Dias Mais Ativos

Bares de fim de semana ligados aos anéis.

Visitantes

1,424

+5.2%

Jan – Jun 2024

Gráfico de radar

Preenchidos, pontilhados, linhas e radares de pontuação.

Visitantes

925

+5.2%

Jan – Jun 2024

Gráfico radial

Anéis, medidores, e um meio medidor empilhado.

Receitas

$18,240

+9.4%

Gráfico de linhas

Linha curvada ou afiada sobre uma área macia.

Tracked time

86h

Esta semana

Gráfico de Sankey

Diagrama de fluxo com links e compartilhamentos coloridos.

Revenue per account

742

+6.8%

ReceitasSessões

Inicial270

Crescimento783

Escala1,388

Gráfico de dispersão

Pontos de correlação, bolhas quando dimensionadas.

Pontuação de sono

Excelente.

29 jun - 5 jul29 jun - 5 jul

Duração: 7h 50m

49/50

Hora de dormir: 20m mais cedo

29/30

Interrupções: 5m acordar

20/20

Pontuação de Sono

Medidor radial com falha de pontuação.

Pipeline

4,820

+2.4%

Últimos 30 dias

Visitas

4,820100%

Inscrição

3,26068%

Ativo

2,01042%

Pro

1,16024%

Equipe

54011%

Empresa

1804%

Visitas

4,820

Inscrição

3,260

Ativo

2,010

Pro

1,160

Equipe

540

Empresa

180

Barras por etapa

Estágios do funil como comprimidos horizontais arredondados.

Passos

31,600

passos totais

29 jun - 5 jul29 jun - 5 jul

Gráfico de Passos

Passos diários com marcador de meta.

Templates

10Telas completos, ligados.

Novo chat

Em que posso ajudar?

Esta conversa é executada contra a sua própria chave de API. O histórico permanece neste navegador.

Não configurado

Novo chat

Iniciador de Conversação

Conversa gratuita e implantável na sua própria chave modelo.

Chat com vários agentes

Agentes animados, chat individual e em grupo, e um editor de avatar ao vivo.

Código

12 Alterações não autorizadas+156-23

boardui/app/components/button.tsx +74

Novo

1import type { Metadata } from "next";2import Link from "next/link";3import { ComponentDetail } from "@/components/application/docs/component-detail";4import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";5
6export const metadata: Metadata = {7  title: "Home Dashboard Template — React + Tailwind (Pro)",8  description:9    "Full admin dashboard template for React + Tailwind CSS — sidebar navigation, KPI cards, bar chart, and a customers data table. A BoardUI Pro template.",10};11
12const PREVIEW_CODE = `import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";13
14export default function DashboardPage() {15  // Full screen: floating sidebar, header, KPI cards,16  // earnings bar chart, and the customers data table.17  return <DashboardShell />;18}`;19
20export default function HomeDashboardDetail() {21  return (22    <ComponentDetail23      wide24      breadcrumb={[25        { label: "Board UI", href: "/" },26        { label: "Components", href: "/components" },27        { label: "Home Dashboard" },28      ]}29      title="Home Dashboard"30      description="A complete admin dashboard screen — floating sidebar navigation, header with search and notifications, KPI stat cards, an earnings bar chart, and a customers data table."31      preview={32        <div className="h-[760px] w-full overflow-hidden rounded-2xl border border-border-button-default">33          <div className="origin-top-left scale-[0.8] [width:125%]">34            <DashboardShell />35          </div>36        </div>37      }38      previewClassName="p-3 sm:p-4"39      previewCode={PREVIEW_CODE}40      sections={[41        {42          id: "full-template",43          title: "Live template",44          body: (

Chat com agentes

atualizar nossos tokens de cor para o modo escuro e adicionar um tema reutilizável para o registro. execute o lint e uma compilação de produção quando terminar.

57%

12 Alterações não autorizadas+156-23

boardui/app/components/button.tsx +74

Novo

1import type { Metadata } from "next";2import Link from "next/link";3import { ComponentDetail } from "@/components/application/docs/component-detail";4import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";5
6export const metadata: Metadata = {7  title: "Home Dashboard Template — React + Tailwind (Pro)",8  description:9    "Full admin dashboard template for React + Tailwind CSS — sidebar navigation, KPI cards, bar chart, and a customers data table. A BoardUI Pro template.",10};11
12const PREVIEW_CODE = `import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";13
14export default function DashboardPage() {15  // Full screen: floating sidebar, header, KPI cards,16  // earnings bar chart, and the customers data table.17  return <DashboardShell />;18}`;19
20export default function HomeDashboardDetail() {21  return (22    <ComponentDetail23      wide24      breadcrumb={[25        { label: "Board UI", href: "/" },26        { label: "Components", href: "/components" },27        { label: "Home Dashboard" },28      ]}29      title="Home Dashboard"30      description="A complete admin dashboard screen — floating sidebar navigation, header with search and notifications, KPI stat cards, an earnings bar chart, and a customers data table."31      preview={32        <div className="h-[760px] w-full overflow-hidden rounded-2xl border border-border-button-default">33          <div className="origin-top-left scale-[0.8] [width:125%]">34            <DashboardShell />35          </div>36        </div>37      }38      previewClassName="p-3 sm:p-4"39      previewCode={PREVIEW_CODE}40      sections={[41        {42          id: "full-template",43          title: "Live template",44          body: (

Chat com IA

Aplicativo de chat completo com painel de código e compositor.

Galeria

Geração de imagens

Crie uma ilustração editorial vintage de Lionel Messi driblando no kit de casa da Argentina contra um fundo azul.

57%

Geração de imagens com IA

Rosca rápida com moldura de geração e painel de galeria.

Agentes

32 agentes

DezembroDezembro

14 de junho

Hoje

Tokens

667.7M fichas

+9.4%

14 de junho

Hoje

Perfil de IA

Perfil de contribuições com mapa de calor e gráficos.

Dashboard financeiro

Cash-flow sankey, anéis de gastos, e tabela de transações.

Dashboard inicial

KPIs, tendência de receita e tabela de clientes.

Dashboard de marketing

Funil de aquisição, gráficos de gastos e tabela de campanhas.

Perfil médico

Visão geral do paciente com prontuários.

Tarefas de Desenho do BoardUI

Registro de atraso

3/8

DS-38Transferência de agentes

Baixovibl

Explore cartões de aprovação para as transferências de agentes

Since 14 Sep

FE-86Quadro de projetos

Baixoprimeira visão

Adicionar visões salvas para cada equipe de projeto

Since 13 Sep

BE-23API de Atividade

Médiovibl

Gravar uma pista de auditoria para as ações dos agentes

Since 12 Sep

Para fazer

3/5

DS-34Fundamentos

AltaBoardUI

Definir símbolos semânticos para superfícies elevadas

Since 12 Sep

FE-82Compositor

Baixoprimeira visão

Adicionar navegação de teclado ao seletor de modelos

Since 11 Sep

BE-19API de uso

Baixovibl

Devolver os limites de rolamento com reset timestamps

Since 10 Sep

Em andamento

2/4

FE-79Progresso do agente

Médioprimeira visão

Animar grupos de tarefas aninhados à medida que eles transmitem

Since 9 Sep

DS-31Modo escuro

UrgenteBoardUI

Ajustar o contraste do gráfico nas placas de painel escuro

Since 8 Sep

Revisão

1/3

FE-76Questionário

Baixovibl

Polaco a transição entre questões de plano

Since 7 Sep

Feito

4/6

DS-27Avatares

BaixoBoardUI

Grupos de avatar sobrepostos de navios para cartas

Completed 6 Sep

FE-71Canvas de estúdio

Médioprimeira visão

Manter as telas geradas alinhadas ao ampliar

Completed 5 Sep

BE-16Registro

BaixoBoardUI

Validar as dependências do modelo durante a compilação

Completed 4 Sep

DS-25Moção

BaixoBoardUI

Documente o comportamento de redução de movimento para blocos

Completed 3 Sep

Quadro de projetos

Espaço de trabalho Kanban com painéis de ticket, comentários e gráficos de token.

Fundamentos

Cores

Tipografia

Básicos

How does billing work?

Can I change plans later?

What happens to my data?

Acordeão

Anúncio

Avatar

Navegação estrutural

Botão

Grupo de botões

Carrossel

Caixa de seleção

Chip

Botão de fechar

Paleta de comandos

Entrada de tokens

Menu de contexto

Seletor de cores

Combobox

Stay, novembro de 2026

Calendário de datas

Data da reunião, agosto de 2026

Seletor de data

Divisor

Filters

Gaveta

Menu suspenso

Upload de arquivos

Botão de ícone

Campo de texto

Campo de código OTP

Botão de link

Medidor

Delete project?

Modal

Notificação

Campo numérico

Paginação

Popover

Progresso

Botão de opção

Controle segmentado

Campo de busca

Seleção

Skeleton

Controle deslizante

Botão social

Spinner

Interruptor

Tabela

Abas

Grupo de tags

Área de texto

Campo de hora

Toast

Árvore

Dica

Blocos

Agente pensando

Carregamento do compositor

Painel do Compositor

Anexos do compositor

Boas-vindas de volta

Card de autenticação

Busca na web

Lista de tarefas

Limites do agente

Questionário

Criador de agentes

Progresso do agente

Calendário

Data Grid

Tabela de dados

Notificações

Central de notificações

Modal de configurações

Barra lateral