Studio Kit
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. Instalar um componente

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

Use --overwrite se o projeto já tiver um utils.ts.

3. Adaptar a marca (re-branding)

# Edite src/styles/tokens.css — o arquivo tem um guia comentado em 4 passos:
# 1. Tipografia (Google Fonts import + --font-sans)
# 2. Cor de acento (--primary, --accent, --border, --ring)
# 3. Paleta de fundo (--background, --background-secondary)
# 4. Radius dos cantos (--radius)

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, primary, 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"
Navbar registry:ui

Header sticky com logo, links de navegação, CTA e menu mobile (hamburger)

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

Modal acessível (foco trapeado, Esc para fechar) — Trigger, Content, Header, Title, Description, Footer

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

Navegação em abas com teclado — Tabs, TabsList, TabsTrigger, TabsContent

npx shadcn@latest add "https://kit.carloshps.com.br/registry/tabs.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"
Footer registry:block

Rodapé com marca, colunas de links e copyright

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

Arquivos estáticos

O template já inclui estes arquivos. Útil para projetos que não usam o template base.

Design Tokens registry:file

CSS custom properties da marca (dark/light). Instala em src/styles/tokens.css — edite para re-branding por cliente.

npx shadcn@latest add "https://kit.carloshps.com.br/registry/tokens.json" --yes --overwrite
Tailwind Preset registry:file

Preset Tailwind do Studio — cores, sombras e fontes mapeados aos tokens CSS. Instala como studio-preset.js.

npx shadcn@latest add "https://kit.carloshps.com.br/registry/tailwind-preset.json" --yes --overwrite

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.