Documentação

Studio Kit

Design system auto-hospedado do CarlosHPS Studio. Componentes shadcn na identidade do Studio — instale via npx shadcn add, ajuste os tokens por cliente.

Setup do projeto

Clone o template base e configure o components.json para apontar para o registry do Studio:

1. Clonar o template

npx degit CarlosHPS/studio-kit/templates/astro-base meu-projeto
cd meu-projeto
pnpm install

2. Inicializar shadcn (já vem pré-configurado no template)

npx shadcn@latest init

3. Instalar um componente

npx shadcn@latest add "https://kit.carloshps.com.br/registry/button.json"

components.json

O template já inclui este arquivo. Referência para projetos novos:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.mjs",
    "css": "src/styles/global.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

Componentes base

Utils registry:lib

cn() — clsx + tailwind-merge

npx shadcn@latest add "https://kit.carloshps.com.br/registry/utils.json"

Button registry:ui

Botão com variantes: default, outline, ghost, link

npx shadcn@latest add "https://kit.carloshps.com.br/registry/button.json"

Badge registry:ui

Etiqueta inline com variantes de cor

npx shadcn@latest add "https://kit.carloshps.com.br/registry/badge.json"

Card registry:ui

Container com Header, Content, Footer

npx shadcn@latest add "https://kit.carloshps.com.br/registry/card.json"

Input registry:ui

Campo de texto base

npx shadcn@latest add "https://kit.carloshps.com.br/registry/input.json"

Blocos

Hero registry:block

Seção hero com eyebrow, título, subtítulo e CTAs

npx shadcn@latest add "https://kit.carloshps.com.br/registry/hero.json"

MetricBlock registry:block

Bloco de métrica com valor, label e descrição

npx shadcn@latest add "https://kit.carloshps.com.br/registry/metric-block.json"

PricingCard registry:block

Card de plano com lista de features e CTA

npx shadcn@latest add "https://kit.carloshps.com.br/registry/pricing-card.json"

FAQ registry:block

Seção de perguntas e respostas expansível

npx shadcn@latest add "https://kit.carloshps.com.br/registry/faq.json"

CtaSection registry:block

Seção de call-to-action com título e botão

npx shadcn@latest add "https://kit.carloshps.com.br/registry/cta-section.json"

LeadForm registry:block

Formulário de captura de lead

npx shadcn@latest add "https://kit.carloshps.com.br/registry/lead-form.json"

Testimonial registry:block

Carrossel de depoimentos

npx shadcn@latest add "https://kit.carloshps.com.br/registry/testimonial.json"

Customizar tokens por cliente

Edite src/styles/tokens.css para substituir a identidade. Os componentes herdam automaticamente via CSS variables.

:root {
  --background:    10 10 20;    /* fundo do cliente */
  --primary:       255 80 100;  /* cor de destaque */
  --accent:        255 80 100;
  /* ... demais tokens */
}

Tema light

O tema padrão é dark. Para ativar o tema light, adicione a classe .light no elemento <html> (ou use data-theme="light"):

document.documentElement.classList.toggle("light");

Os overrides light estão em src/styles/tokens.css — ajuste conforme a identidade do cliente.

Registry index

Lista todos os itens disponíveis em JSON:

GET https://kit.carloshps.com.br/registry/index.json