Dialog

Modal sobreposto para interações focadas do usuário.

Preview

Visualização do componente Dialog com diferentes configurações

Instalação

Via CLI (Recomendado)

1. Inicializar (primeira vez)

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

2. Adicionar componente

npx @scmposs/hollow-ui add dialog

Os comandos init e setup fazem o pré-setup (necessário apenas uma vez). Se você rodar add sem isso, a CLI executa o setup automaticamente.

Via NPM

Instalar pacote completo

npm install @scmposs/hollow-ui@latest

Instala todos os componentes como dependência do projeto.

Uso Básico

Exemplo básico

import { 
  Dialog, 
  DialogContent, 
  DialogDescription, 
  DialogHeader, 
  DialogTitle, 
  DialogTrigger 
} from "@scmposs/hollow-ui"

<Dialog>
  <DialogTrigger asChild>
    <Button>Abrir Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Título do Dialog</DialogTitle>
      <DialogDescription>
        Descrição do dialog aqui.
      </DialogDescription>
    </DialogHeader>
    {/* Conteúdo do dialog */}
  </DialogContent>
</Dialog>

Exemplos

Dialog

Instalação

Via CLI (Recomendado)

Via NPM

Uso Básico

Dialog de Confirmação

Dialog de Formulário