CLI - Interface de Linha de Comando

Use a CLI do hollow-UI para adicionar componentes diretamente ao seu projeto com controle total do código.

Início Rápido

Comece a usar a CLI em 3 passos simples (com setup pre-uso)

1Inicializar o Projeto

Execute apenas uma vez

npx @scmposs/hollow-ui init
# ou (alias)
npx @scmposs/hollow-ui setup

Configura seu projeto criando arquivos necessários como src/lib/utils.ts

2Adicionar Componentes

Adicione os componentes que precisa

npx @scmposs/hollow-ui add button card badge

Os componentes são copiados para src/components/ui/ com todas as dependências. Se o pré-setup não tiver sido executado, o comando add roda init automaticamente.

3Usar no Código

Importe e use

import { Button } from "@/components/ui/button"

export function MyComponent() {
  return <Button>Clique aqui</Button>
}

Comandos Disponíveis

init / setup

Inicializa a configuração do hollow-UI no seu projeto (setup é alias)

Uso

npx @scmposs/hollow-ui init
npx @scmposs/hollow-ui setup

O que faz:

Cria src/lib/utils.ts com a função cn()
Verifica se o Tailwind CSS está instalado
Prepara a estrutura de pastas

Opções:

-y, --yes - Pula confirmações

add

Adiciona um ou mais componentes ao seu projeto

Adicionar um componente:

npx @scmposs/hollow-ui add button

Adicionar múltiplos componentes:

npx @scmposs/hollow-ui add button card badge input

Se o projeto ainda não tiver o pré-setup, o comando executa init automaticamente antes de adicionar os componentes.

Opções:

-o, --overwrite - Sobrescreve arquivos existentes
-a, --all - Adiciona todos os componentes

list

Lista todos os componentes disponíveis

Uso

npx @scmposs/hollow-ui list

Mostra todos os componentes organizados por categoria com informações sobre dependências.

Por Que Usar a CLI?

Controle Total

Os componentes são copiados para seu projeto. Você pode modificar, customizar e adaptar como quiser.

Sem Dependências Extras

Não adiciona pacotes desnecessários ao seu node_modules. Apenas o código que você usa.

Tree-Shaking Perfeito

Apenas o código dos componentes que você usa é incluído no bundle final.

Código-Fonte Visível

Veja exatamente como cada componente funciona. Ótimo para aprendizado e debug.

Perguntas Frequentes

Preciso rodar init sempre?

Não! Os comandos init e setup precisam ser executados apenas uma vez por projeto para configurar os arquivos iniciais.

Posso modificar os componentes?

Sim! Essa é a principal vantagem. Os componentes são copiados para seu projeto e você tem total liberdade para modificá-los.

E as atualizações?

Como o código está no seu projeto, você controla quando atualizar. Use --overwrite para sobrescrever componentes com versões mais recentes.

Posso usar CLI e NPM juntos?

Não é recomendado misturar as duas abordagens no mesmo projeto. Escolha uma e mantenha consistência.