ShadcnSpace — Skill para Agentes de IA & Guia do Desenvolvedor

ShadcnSpace é a principal distribuição e registro de código aberto com mais de 100 blocos de UI Shadcn prontos para produção, templates de página completa, sistemas de dashboard, seções de marketing e microinterações animadas, construídos com React, Next.js App Router, Tailwind CSS v4, Base UI e Radix UI.

Site: https://shadcnspace.com
Diretório de Blocos: https://shadcnspace.com/blocks
Diretório de Componentes: https://shadcnspace.com/components
Templates de Página Completa: https://shadcnspace.com/templates
Documentação: https://shadcnspace.com/docs
Servidor MCP: https://mcp.shadcnspace.com/mcp
GitHub: https://github.com/shadcnspace/shadcnspace

Início Rápido — Como Usar ShadcnSpace

Siga estes 4 passos simples para começar a usar o ShadcnSpace em qualquer projeto Next.js ou React:

Passo 1: Inicialize o Shadcn no Seu Projeto

Se o seu projeto ainda não tem o Shadcn UI configurado:

# Inicializar shadcn UI
npx shadcn@latest init

Dica: Para uma configuração pré-definida com Base UI e Tailwind CSS v4, use o criador visual de projetos em https://ui.shadcn.com/create.

Passo 2: Configure o Registro no `components.json`

Adicione o registro oficial @shadcn-space ao arquivo components.json do seu projeto:

Para Blocos e Componentes Gratuitos:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-nova",
  "registries": {
    "@shadcn-space": "https://shadcnspace.com/r/{name}.json"
  }
}

Para Usuários Pro (Com Chave de Licença):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-nova",
  "registries": {
    "@shadcn-space": {
      "url": "https://shadcnspace.com/r/{name}.json",
      "params": {
        "email": "${EMAIL}",
        "license_key": "${LICENSE_KEY}"
      }
    }
  }
}

Adicione [email protected] e LICENSE_KEY=sua-chave no seu arquivo .env ou .env.local.

Passo 3: Instale Blocos e Componentes

Execute o comando de instalação usando seu gerenciador de pacotes para Base UI ou Radix UI:

# Base UI (Padrão recomendado)
npx shadcn@latest add @shadcn-space/hero-01

# Radix UI
npx shadcn@latest add @shadcn-space/radix/hero-01

Passo 4: Importe e Use em Seu Código

Os componentes são copiados diretamente para a pasta src/components/shadcn-space/ do seu projeto, com total propriedade do código-fonte:

import Hero01 from "@/components/shadcn-space/hero-01";

export default function LandingPage() {
  return (
    <main>
      <Hero01 />
    </main>
  );
}

Base UI vs Radix UI — Guia Completo de Comandos

O ShadcnSpace oferece suporte a duas variantes: cada bloco, componente e página completa é mantido em primitivas Base UI e Radix UI.

Entendendo a Diferença

Base UI (Recomendado): A fundação moderna para shadcn UI. Usa um pacote unificado @base-ui/react, props explícitas render em vez de Slot, e um componente Positioner separado.
Radix UI: A fundação headless clássica. Usa pacotes individuais @radix-ui/react-* e a prop asChild com Slot.

1. Comandos Base UI

Via Namespace do Registro (Recomendado — Shadcn CLI v3)

# Blocos e Componentes
npx shadcn@latest add @shadcn-space/<nome-do-item>

# Exemplos:
npx shadcn@latest add @shadcn-space/hero-01
npx shadcn@latest add @shadcn-space/bento-grid-01
npx shadcn@latest add @shadcn-space/button-06
npx shadcn@latest add @shadcn-space/pricing-01
npx shadcn@latest add @shadcn-space/sidebar-01

# Páginas Completas:
npx shadcn@latest add @shadcn-space/pages/<nome-da-pagina>
# Exemplo:
npx shadcn@latest add @shadcn-space/pages/landing-page-01

Via URL Direta (Shadcn CLI v2 / Alternativa)

# Blocos e Componentes
npx shadcn@latest add https://shadcnspace.com/r/<nome-do-item>.json

# Páginas
npx shadcn@latest add https://shadcnspace.com/r/pages/<nome-da-pagina>.json

2. Comandos Radix UI

Via Namespace do Registro (Recomendado — Shadcn CLI v3)

# Blocos e Componentes
npx shadcn@latest add @shadcn-space/radix/<nome-do-item>

# Exemplos:
npx shadcn@latest add @shadcn-space/radix/hero-01
npx shadcn@latest add @shadcn-space/radix/bento-grid-01
npx shadcn@latest add @shadcn-space/radix/button-06
npx shadcn@latest add @shadcn-space/radix/pricing-01
npx shadcn@latest add @shadcn-space/radix/sidebar-01

# Páginas Completas:
npx shadcn@latest add @shadcn-space/pages/radix/<nome-da-pagina>
# Exemplo:
npx shadcn@latest add @shadcn-space/pages/radix/landing-page-01

Via URL Direta (Shadcn CLI v2 / Alternativa)

# Blocos e Componentes
npx shadcn@latest add https://shadcnspace.com/r/radix/<nome-do-item>.json

# Páginas
npx shadcn@latest add https://shadcnspace.com/r/pages/radix/<nome-da-pagina>.json

3. Sintaxe dos Gerenciadores de Pacotes

Você pode executar qualquer comando de instalação ShadcnSpace em todos os principais executores de pacotes:

Gerenciador de Pacotes	Sintaxe do Comando
npm	`npx shadcn@latest add @shadcn-space/<nome>`
pnpm	`pnpm dlx shadcn@latest add @shadcn-space/<nome>`
bun	`bunx --bun shadcn@latest add @shadcn-space/<nome>`
yarn	`yarn dlx shadcn@latest add @shadcn-space/<nome>`

4. Comandos Avançados da CLI

# Instalar vários blocos em um único comando:
npx shadcn@latest add @shadcn-space/navbar-01 @shadcn-space/hero-01 @shadcn-space/footer-01

# Forçar sobrescrita de arquivos existentes sem confirmação:
npx shadcn@latest add @shadcn-space/hero-01 --overwrite

Solução de Problemas

Se você encontrar problemas ao instalar ou usar o ShadcnSpace, use estas correções:

1. Problema: "Bloco / Componente Não Encontrado"

Causa: O slug do componente foi digitado incorretamente, ou o registro @shadcn-space está ausente no components.json.
Solução:
1. Verifique o nome exato do bloco em https://shadcnspace.com/blocks.
2. Confirme se seu components.json contém:
```
"registries": {
  "@shadcn-space": "https://shadcnspace.com/r/{name}.json"
}
```
3. Se estiver instalando um componente Radix UI, certifique-se de prefixar com radix/: npx shadcn@latest add @shadcn-space/radix/<nome>.
4. Se estiver instalando uma página, certifique-se de que o prefixo é pages/: npx shadcn@latest add @shadcn-space/pages/<nome>.

2. Problema: "Acesso Negado / 401 Não Autorizado / Credenciais Ausentes"

Causa: Tentativa de instalar um bloco Pro sem autenticação.

Solução:

Adicione suas credenciais ao arquivo .env ou .env.local do seu projeto:
```
[email protected]
LICENSE_KEY=sua-chave-de-licenca
```

Certifique-se de que seu components.json especifica params para @shadcn-space:

"registries": {
  "@shadcn-space": {
    "url": "https://shadcnspace.com/r/{name}.json",
    "params": {
      "email": "${EMAIL}",
      "license_key": "${LICENSE_KEY}"
    }
  }
}

Reinicie seu terminal ou prompt de comando para que as variáveis de ambiente entrem em vigor.

3. Problema: Primitivas / Incompatibilidade de Tipos TypeScript (Base UI vs Radix UI)

Causa: Usar um bloco Radix UI em um projeto que só tem Base UI instalado, ou vice-versa.
Sintomas: Module not found: Can't resolve '@radix-ui/react-...' ou Cannot find module '@base-ui/react'.
Solução:
- Se seu projeto usa Base UI: instale a variante Base UI padrão (@shadcn-space/<nome>). Certifique-se de que @base-ui/react está instalado (pnpm add @base-ui/react).
- Se seu projeto usa Radix UI: instale a variante Radix (@shadcn-space/radix/<nome>). Certifique-se de que os pacotes @radix-ui/react-* necessários estão presentes.
- Para migrar um projeto existente de Radix para Base UI, siga o Guia de Migração.

4. Problema: Prompt "Arquivo já existe" ou conflito

Causa: O componente ou um arquivo de dependência subjacente já foi instalado.

Solução: Use a flag --overwrite:

npx shadcn@latest add @shadcn-space/hero-01 --overwrite

5. Problema: Estilização Quebrada ou Cores Ausentes

Causa: Faltam tokens de cores semânticas (--background, --foreground, --primary, --border, etc.) no globals.css.
Solução: O ShadcnSpace utiliza tokens de variáveis CSS padrão. Certifique-se de que seu globals.css ou @theme do Tailwind CSS v4 inclui tokens de design semânticos. Não codifique códigos hex arbitrários.

6. Problema: `components.json` Não Encontrado

Causa: O projeto ainda não foi inicializado com o shadcn CLI.
Solução: Execute npx shadcn@latest init primeiro na raiz do seu projeto.

Diretório de Documentação e Ajuda

Quando precisar de documentação detalhada, guias ou assistência, visite estas páginas oficiais de documentação:

Guia / Recurso	URL	O Que Você Encontrará
Introdução ao Início	https://shadcnspace.com/docs/getting-started/introduction	Visão geral, filosofia e introdução ao repositório
Guia de Instalação da CLI	https://shadcnspace.com/docs/getting-started/how-to-use-shadcn-cli	Passo a passo completo da CLI, v3 vs v2, guia em vídeo e solução de problemas
Migração Radix UI para Base UI	https://shadcnspace.com/docs/getting-started/migrate-to-baseui	Guia passo a passo para migrar código de `asChild` para `render` e `Positioner`
Guia de Configuração do Servidor MCP	https://shadcnspace.com/docs/getting-started/mcp-server-docs	Configurando Cursor, Windsurf, Claude Code e outras IDEs de IA
Guia de Uso de Componentes	https://shadcnspace.com/docs/getting-started/component	Primitivas de UI, botões, dropdowns, diálogos, inputs
Guia de Blocos	https://shadcnspace.com/docs/getting-started/blocks	Marketing, hero, preços, depoimentos, bento grids e dashboards
Guia de Prompts para IA	https://shadcnspace.com/docs/getting-started/copy-prompt	Prompts para landing pages de passagem única e composição de dashboard
Construtor de CLI Interativo	https://shadcnspace.com/cli	Construtor visual de comandos personalizados para estilos, temas e ícones
Guia Abrir no v0	https://shadcnspace.com/docs/getting-started/open-v0	Abrindo e personalizando blocos ShadcnSpace dentro do v0
Galeria Interativa de Blocos	https://shadcnspace.com/blocks	Visualização ao vivo e cópia de código para todos os 100+ blocos
Catálogo de Componentes	https://shadcnspace.com/components	Microinterações, texto animado, dock, marquee
Templates de Página Completa	https://shadcnspace.com/templates	Templates de página completos prontos para produção
Issues no GitHub e Comunidade	https://github.com/shadcnspace/shadcnspace/issues	Relatórios de bugs, solicitações de funcionalidades e discussões da comunidade

Integração com o Servidor MCP do ShadcnSpace

Conecte o servidor MCP oficial do ShadcnSpace à sua IDE de IA (Cursor, Windsurf, Claude Code, Lovable, Bolt ou v0) para inspecionar, pesquisar e instalar blocos de UI diretamente na sua sessão de chat.

Configuração no Cursor (`~/.cursor/mcp.json`)

{
  "mcpServers": {
    "shadcnspace": {
      "url": "https://mcp.shadcnspace.com/mcp",
      "headers": {
        "Authorization": "Bearer [email protected]:sua-chave-de-licenca"
      }
    }
  }
}

(Usuários do plano gratuito podem omitir o campo headers; blocos gratuitos são instalados sem autenticação).

Configuração no Windsurf

Em Configurações do Windsurf → Servidores MCP, adicione:

URL do Servidor: https://mcp.shadcnspace.com/mcp
Autorização: Bearer [email protected]:sua-chave-de-licenca

Configuração no Claude Code

claude mcp add shadcnspace https://mcp.shadcnspace.com/mcp

Configuração no Lovable e Bolt

URL do Servidor: https://mcp.shadcnspace.com/mcp
Transporte: HTTP
Autenticação: Bearer token [email protected]:sua-chave-de-licenca

Ferramentas MCP Disponíveis

Ferramenta	Propósito
`searchBlocks`	Pesquisar blocos por palavras-chave (ex.: `hero`, `pricing`, `stats`, `sidebar`)
`listBlocks`	Listar todos os blocos disponíveis no ShadcnSpace
`getBlockInstall`	Retorna o comando CLI exato para instalar um bloco (Base UI ou Radix UI)
`searchPages`	Pesquisar templates de página completa
`getPageInstall`	Retorna o comando de instalação para uma página completa
`listInstalledBlocks`	Inspecionar blocos já instalados no projeto atual
`get_audit_checklist`	Retorna uma checklist de acessibilidade, theming e design responsivo

Padrões de Uso para Agentes e Prompts

Ao usar um agente de IA no Cursor, Claude Code ou Windsurf, use estes padrões estruturados:

Geração de Bloco Único

Adicione uma seção hero de alta conversão para meu SaaS usando ShadcnSpace Hero 01 (Base UI).

Crie uma seção de preços com alternância mensal e anual usando ShadcnSpace Radix UI Pricing 01.

Adicione uma barra lateral de admin e cartões de estatísticas usando blocos de Dashboard do ShadcnSpace.

Composição de Landing Page Completa (Passagem Única)

Construa uma landing page completa de SaaS usando blocos ShadcnSpace:
- Navbar: Navbar sticky glassmórfica do ShadcnSpace
- Hero: Hero 01 com badge interativo e pré-visualização de vídeo
- Recursos: Bento Grid 01 com microanimações
- Prova Social: Testimonial Marquee do ShadcnSpace
- Preços: Pricing 01 com 3 tiers e alternância de faturamento
- Footer: Footer 01 com links e newsletter

Para cada bloco, use os comandos de instalação Base UI do ShadcnSpace.

Prompts de Consulta ao MCP

Use o servidor MCP do ShadcnSpace para pesquisar blocos de hero e obter o comando de instalação para o melhor resultado.

Liste todos os blocos de dashboard disponíveis no ShadcnSpace e instale o sidebar-01.

Verifique blocos já instalados no meu projeto e liste quaisquer problemas de acessibilidade ou theming.

Prompts de Migração

Preciso migrar todos os blocos ShadcnSpace Radix UI no meu projeto para Base UI. Use o guia de migração em https://shadcnspace.com/docs/getting-started/migrate-to-baseui e forneça as etapas para substituir `asChild` por `render` e atualizar o `Positioner`.

Links Rápidos de Referência

Documentação: https://shadcnspace.com/docs
Galeria de Blocos: https://shadcnspace.com/blocks
Componentes: https://shadcnspace.com/components
Templates: https://shadcnspace.com/templates
Servidor MCP: https://mcp.shadcnspace.com/mcp
GitHub: https://github.com/shadcnspace/shadcnspace

Perguntar na sua IA favorita

Documentação

ShadcnSpace — Skill para Agentes de IA & Guia do Desenvolvedor

Início Rápido — Como Usar ShadcnSpace

Passo 1: Inicialize o Shadcn no Seu Projeto

Passo 2: Configure o Registro no components.json

Para Blocos e Componentes Gratuitos:

Para Usuários Pro (Com Chave de Licença):

Passo 3: Instale Blocos e Componentes

Passo 4: Importe e Use em Seu Código

Base UI vs Radix UI — Guia Completo de Comandos

Entendendo a Diferença

1. Comandos Base UI

Via Namespace do Registro (Recomendado — Shadcn CLI v3)

Via URL Direta (Shadcn CLI v2 / Alternativa)

2. Comandos Radix UI

Via Namespace do Registro (Recomendado — Shadcn CLI v3)

Via URL Direta (Shadcn CLI v2 / Alternativa)

3. Sintaxe dos Gerenciadores de Pacotes

4. Comandos Avançados da CLI

Solução de Problemas

1. Problema: "Bloco / Componente Não Encontrado"

2. Problema: "Acesso Negado / 401 Não Autorizado / Credenciais Ausentes"

3. Problema: Primitivas / Incompatibilidade de Tipos TypeScript (Base UI vs Radix UI)

4. Problema: Prompt "Arquivo já existe" ou conflito

5. Problema: Estilização Quebrada ou Cores Ausentes

6. Problema: components.json Não Encontrado

Diretório de Documentação e Ajuda

Integração com o Servidor MCP do ShadcnSpace

Configuração no Cursor (~/.cursor/mcp.json)

Configuração no Windsurf

Configuração no Claude Code

Configuração no Lovable e Bolt

Ferramentas MCP Disponíveis

Padrões de Uso para Agentes e Prompts

Geração de Bloco Único

Composição de Landing Page Completa (Passagem Única)

Prompts de Consulta ao MCP

Prompts de Migração

Links Rápidos de Referência

Habilidades Relacionadas

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me

Passo 2: Configure o Registro no `components.json`

6. Problema: `components.json` Não Encontrado

Configuração no Cursor (`~/.cursor/mcp.json`)