Bem-vindo ao BoardUI Pro

Obrigado por sua compra. Sua licença desbloqueia todos os componentes e modelos Pro, incluindo atualizações futuras. Vamos começar tudo rodando em seu projeto.

Seu agente de IA pode fazer toda esta página para você: conecte o servidor BoardUI MCP em Claude Code, Cursor, VS Code ou Codex, cole sua chave de licença no chat e peça para ele ativar Pro e instalar qualquer componente ou modelo.

Iniciar com MCP

Iniciar a partir de zero

Esta caminhada assume que a BoardUI nunca foi instalada em seu projeto. Siga cada passo em ordem e você terminará com as fundações, dependências gratuitas, acesso Pro, e seu primeiro componente ou modelo pronto para usar.

  1. 1
    Abra seu projeto - ou crie um novo.

    BoardUI funciona em um projeto React 19 + Tailwind CSS v4. Se você ainda não tiver um, o ponto de partida mais rápido é um novo aplicativo Next.js:

    npx create-next-app@latest my-appcd my-app # Choose the defaults: TypeScript, Tailwind CSS, App Router, and @/* alias

    Já tem um projeto compatível? Abra um terminal em sua pasta raiz e continue abaixo. Para Vite, React Router ou Astro, veja o guias de estrutura.

    Para um pacote de UI compartilhado ou aliases personalizados, siga o guia de configuração monorepo antes de executar o init. Componentes livres e Pro usam o mesmo boardui.json config. Executar componentes instala dentro do pacote compartilhado, e instalar modelos de página inteira no aplicativo consumidor.

  2. 2
    Inicializar BoardUI e instalar todas as dependências necessárias.
    npx boardui@latest init --pro

    Confirme o prompt de configuração. O CLI instala o Tailwind v4 e os pacotes runtime e Pro do BoardUI, então cria o tema, tipografia, estilos globais e utilitários compartilhados. Você não precisa instalar a biblioteca gratuita separadamente.

  3. 3
    Conecte os estilos de BoardUI gerados.

    Substitua a importação de CSS global padrão no layout raiz e carregue a Inter, a fonte que o tema do BoardUI usa. Se nada compila o Tailwind v4 no seu projeto ainda, carregue também o plugin de PostCSS dele. O create-next-app 16.4 e versões posteriores já o compilam com @tailwindcss/turbopack, e o init só mostra a etapa do PostCSS quando ela é necessária.

    // app/layout.tsximport { Inter } from "next/font/google";import "@/styles/globals.css"; // replaces the default "./globals.css" import // BoardUI's theme reads its typeface from --font-inter (styles/theme.css).// The opsz axis renders display sizes in Inter Display, as on boardui.com.const inter = Inter({ variable: "--font-inter", subsets: ["latin"], axes: ["opsz"],}); export default function RootLayout({ children }: { children: React.ReactNode }) { return ( // On <html>, where theme.css resolves the font, in place of the Geist variables. <html lang="en" className={`${inter.variable} h-full antialiased`}> <body className="min-h-full flex flex-col">{children}</body> </html> );}
  4. 4
    Ative a chave de licença do seu e-mail de compra.
    npx boardui@latest login YOUR_LICENSE_KEY

    Substituir YOUR_LICENSE_KEY com a tecla literal. Não inclua parênteses de ângulo. A ativação usa um dos assentos da máquina incluídos com sua licença.

  5. 5
    Instale seu primeiro componente Pro.
    npx boardui@latest add agent-progress calendar

    Este comando instala ambos os exemplos. Use um nome se quiser apenas um. O CLI também obtém todos os componentes ou utilitário gratuitos do BoardUI de que dependem e oferece- se para instalar os pacotes npm em falta - não existe nenhuma etapa de configuração separada do componente livre.

  6. 6
    Ou instale um modelo Pro completo.
    npx boardui@latest add template-ai-chat

    Os modelos incluem a página, fonte do componente, dependências livres, blocos Pro e imagens. Você pode instalar componentes, modelos ou ambos com a mesma licença.

Manter a sua fonte atualizada

O BoardUI instala o código- fonte editável em vez de um pacote de componentes bloqueado. Para substituir um item instalado pela sua versão mais recente do BoardUI, execute o mesmo comando com --overwrite e reveja primeiro quaisquer personalizações locais.

npx boardui@latest add calendar --overwrite

Componentes Pro

Adicione um ou vários nomes no mesmo comando CLI.

agent-limits-cardagent-progressquestionnairecalendarearnings-chart-cardline-chart-cardcontributions-cardsteps-cardsleep-score-cardactivity-rings-cardmost-active-days-cardradar-chart-cardradial-chart-cardfunnel-chart-cardsankey-chart-cardheatmap-chart-cardstage-bars-cardbar-list-cardarea-chart-cardcombo-chart-cardscatter-chart-card
Navegar nas antevisões dos componentes

Modelos Pro

Cada comando instala uma tela completa e tudo o que precisa.

template-home-dashboardtemplate-medical-profiletemplate-ai-chattemplate-ai-image-generationtemplate-ai-profiletemplate-project-board
Navegar nas antevisões de modelos

Assentos, IC e suporte

Mova sua licença entre máquinas, automatize instalações ou entre em contato conosco diretamente quando precisar de ajuda.

Assentos de licença

Gerenciar uma máquina

Libere o assento atual antes de ativar sua licença em outro computador.

npx boardui@latest logout
Automação

Use-o em IC

Adicione sua licença como uma variável de ambiente secreto. O login interativo não é necessário.

BOARDUI_LICENSE_KEY
Apoio directo

Precisas de ajuda?

Envie-me um DM em X com o seu e-mail de pedido e uma breve descrição do que está acontecendo.

DM @ sitenley