# Ravox UI
> Componentes de UI em HTML, CSS e Tailwind feitos pela comunidade, para copiar e usar de graça, e designs de landing page e painel admin prontos para aplicar com o Claude Code.
O Ravox Kit é a biblioteca de componentes React + Tailwind CSS v4 do Ravox UI, distribuída como registry do
shadcn: cada componente é copiado para `components/ui/.tsx` no projeto e fica editável. API em português
(props como `variante`, `tamanho`, `aberto`, `aoMudar`). Sem Radix: usa ``, Popover API e HTML nativo.
Tema: `npx shadcn@latest add https://ui.ravoxlabs.com/r/vault-tema.json` instala as cores (claro e escuro).
## Documentação
- [Introdução](https://ui.ravoxlabs.com/ui): o que é o Kit e como funciona.
- [Instalação](https://ui.ravoxlabs.com/ui/instalacao): shadcn init + tema.
- [Tema](https://ui.ravoxlabs.com/ui/tema): como o tema do Kit funciona (variáveis, claro e escuro). Temas prontos em https://ui.ravoxlabs.com/temas e o editor em https://ui.ravoxlabs.com/temas/editor.
- [Blocos](https://ui.ravoxlabs.com/ui/blocos): telas prontas (painéis, barras laterais, entrar, cadastro, gráficos, preços...).
- [MCP](https://ui.ravoxlabs.com/mcp): servidor MCP em https://ui.ravoxlabs.com/api/mcp (chave de API em /studio/chaves) para agentes buscarem componentes, o Kit, blocos e temas.
- [Tudo num arquivo só](https://ui.ravoxlabs.com/llms-full.txt): cada componente com as opções e o comando de instalação.
## Básicos
- [Alert](https://ui.ravoxlabs.com/ui/alert): A mensagem que fica na tela, dentro do conteúdo: info, sucesso, atenção e erro, cada um com o seu ícone. Título, texto, uma ação que desce para baixo quando o espaço aperta e o X de fechar.
- [Avatar](https://ui.ravoxlabs.com/ui/avatar): Foto da pessoa com as iniciais de reserva enquanto carrega ou se falhar, em quatro tamanhos, redondo ou quadrado, com o pontinho de status. O grupo empilha e resume o resto em +N.
- [Badge](https://ui.ravoxlabs.com/ui/badge): Badge neutro com o pontinho na cor do mosaico, ou cheio (sólido) para o estado que precisa saltar.
- [Button](https://ui.ravoxlabs.com/ui/button): O botão de todo dia: padrão, secundário, contorno, fantasma, destrutivo e link, mais o mosaico e a tecla da casa. Com ícone, só ícone, carregando e como link.
- [Button Group](https://ui.ravoxlabs.com/ui/button-group): Ações vizinhas coladas numa peça só, na horizontal ou na vertical: Publicar | ▾, − 1 +, prefixo + campo + copiar. Separador para botões sólidos, texto fixo e modo barra de ferramentas com setas do teclado.
- [Empty](https://ui.ravoxlabs.com/ui/empty): O que aparece quando a lista, a busca ou a pasta não tem nada: diz o que falta, por que, e oferece o próximo passo. Normal ou compacto (dentro de card e menu), com borda tracejada para área de soltar.
- [Kbd](https://ui.ravoxlabs.com/ui/kbd): Tecla e combinação de teclas para menus, dicas e a paleta de comandos. Escreva "mod+k" e quem está no Mac vê ⌘ K; no Windows e no Linux, Ctrl + K. Leitores de tela ouvem o nome da tecla, não o símbolo.
- [Progress](https://ui.ravoxlabs.com/ui/progress): Barra de progresso com rótulo e valor ligados a ela. Sem valor, fica indeterminada enquanto não se sabe quanto falta. A variante em etapas mostra onde a pessoa está num cadastro, checkout ou importação.
- [Separator](https://ui.ravoxlabs.com/ui/separator): A linha fina entre grupos, na horizontal ou na vertical, sólida ou tracejada. Com texto dentro, o rótulo fica no meio ("ou", "Hoje") ou encostado no começo da linha.
- [Skeleton](https://ui.ravoxlabs.com/ui/skeleton): O lugar do conteúdo enquanto ele carrega: blocos soltos no tamanho que você quiser e os formatos prontos de parágrafo, cartão e lista. O brilho passa devagar e some com movimento reduzido.
- [Spinner](https://ui.ravoxlabs.com/ui/spinner): Indicador de carregamento em três tamanhos: o arco que herda a cor do texto em volta (botão, campo, tabela) ou o mosaico das quatro cores da casa. Sempre com um rótulo para leitores de tela.
## Formulário
- [Calendar](https://ui.ravoxlabs.com/ui/calendar): Mês em grade com a semana começando no domingo e os nomes vindos do Intl, sem biblioteca de datas. Um dia, um intervalo (com prévia ao passar o mouse) ou vários dias; datas travadas, mínimo e máximo, dois meses lado a lado e troca rápida de mês e ano pelo título.
- [Checkbox](https://ui.ravoxlabs.com/ui/checkbox): Checkbox de verdade com rótulo, descrição e erro, estado indeterminado para o "selecionar todos" e um grupo com legenda. Manda name/value no formulário e aceita o register() do React Hook Form direto.
- [Combobox](https://ui.ravoxlabs.com/ui/combobox): Campo que filtra uma lista enquanto a pessoa digita. Busca sem acento ("sao" acha São Paulo), seleção única ou múltipla com etiquetas, grupos, estado vazio, carregando para busca no servidor e "Criar …" quando nada combina.
- [Date Picker](https://ui.ravoxlabs.com/ui/date-picker): Campo de data que aceita as duas coisas: digitar dd/mm/aaaa (as barras entram sozinhas) ou escolher no calendário que abre por cima. O SeletorPeriodo pega um intervalo com dois campos, dois meses e atalhos como "Últimos 7 dias". Avisa data que não existe, fora do limite ou indisponível.
- [Input](https://ui.ravoxlabs.com/ui/input): Campo de texto com rótulo, dica e erro já ligados ao input, ícone ou prefixo no começo e uma ação no fim (gerar, copiar, mostrar senha). Aceita o register() do React Hook Form direto.
- [Input OTP](https://ui.ravoxlabs.com/ui/input-otp): Casas para o código de SMS ou e-mail, feitas sobre um único input: colar o código inteiro preenche tudo, o celular sugere o código recebido e o leitor de tela ouve um campo só. Números ou letras, separador, oculto e estado de erro; aceita o register() do React Hook Form.
- [Radio Group](https://ui.ravoxlabs.com/ui/radio-group): Grupo de radios de verdade, em lista simples ou em cartão com título e descrição. Setas do teclado, name nativo e envio no formulário vêm do navegador.
- [Segmented Control](https://ui.ravoxlabs.com/ui/segmented-control): Para trocar entre poucas opções, como 7d / 30d / 90d. Em botões, é um grupo de radios com setas do teclado; em links (asChild), vira navegação com aria-current. A marca do ativo desliza.
- [Select](https://ui.ravoxlabs.com/ui/select): Select no padrão combobox da WAI-ARIA: setas, Home/End, Enter, Esc e digitar para pular. A lista abre na camada de cima, então nenhum overflow: hidden corta. Manda o valor no formulário pelo name.
- [Slider](https://ui.ravoxlabs.com/ui/slider): Escolha de um número ou de um intervalo arrastando: um ou dois polegares, passo, marcas com rótulo, valor visível e balão. Setas, PageUp/PageDown e Home/End em cada polegar; manda o valor com name e funciona no Controller do React Hook Form.
- [Switch](https://ui.ravoxlabs.com/ui/switch): Liga e desliga para ajustes que valem na hora. É um checkbox com role="switch": Espaço alterna, o formulário recebe "on" quando ligado e o register() do React Hook Form devolve true/false. Com rótulo antes ou na ponta da linha.
- [Textarea](https://ui.ravoxlabs.com/ui/textarea): Texto longo no mesmo desenho do Campo: rótulo, dica e erro ligados, contador de caracteres que avisa perto do limite e altura que cresce com o texto até um teto. Aceita o register() do React Hook Form direto.
- [Toggle](https://ui.ravoxlabs.com/ui/toggle): Botão que fica pressionado (aria-pressed): negrito, fixar, silenciar. Pressionado, fica cheio na cor do texto. Um checkbox escondido ao lado leva name, value e ref, então funciona em formulário comum e com o register() do React Hook Form.
## Sobreposição
- [Alert Dialog](https://ui.ravoxlabs.com/ui/alert-dialog): Pergunta com a consequência e duas saídas, para ações que não têm volta. Não fecha clicando fora, carrega enquanto a ação roda e mostra o erro sem fechar. Também sai como promessa: await confirmar({ … }).
- [Command](https://ui.ravoxlabs.com/ui/command): Paleta de comandos: busca que filtra enquanto digita sem ligar para acento, grupos com título, sinônimos, atalhos e o vazio. Solta na página ou num diálogo nativo que abre com ⌘K / Ctrl+K. Setas circulam, Enter escolhe, Esc limpa e fecha.
- [Context Menu](https://ui.ravoxlabs.com/ui/context-menu): O menu do botão direito, na posição do cursor. Abre também com Shift+F10 ou a tecla de menu (junto do elemento em foco) e segurando o dedo no toque; o botão ⋯ (MenuContextoGatilho) abre o mesmo menu para leitor de tela e para quem não conhece o toque longo. Usa os mesmos itens do Menu: marcar, escolha única, submenu, atalhos.
- [Dialog](https://ui.ravoxlabs.com/ui/dialog): Janela modal sobre o do navegador: a página por trás fica inerte, o foco fica preso e volta para quem abriu. Fecha no Esc, no fundo e no X; cabeçalho e rodapé fixos com o corpo rolando por dentro quando o conteúdo é alto.
- [Drawer](https://ui.ravoxlabs.com/ui/drawer): A folha que sobe de baixo no celular: alça, arrastar para fechar (um peteleco rápido também conta) e paradas opcionais de altura. No computador fica centralizada embaixo. Por baixo é o mesmo do Diálogo.
- [Dropdown Menu](https://ui.ravoxlabs.com/ui/dropdown-menu): Menu suspenso com itens, ícones, atalhos, grupos com título, itens de marcar e de escolha única, submenu e item destrutivo. Teclado completo do padrão WAI-ARIA, com digitar para pular, e abre na camada de cima: nenhum overflow corta.
- [Hover Card](https://ui.ravoxlabs.com/ui/hover-card): A prévia rica de um link (perfil, pedido, produto) ao passar o mouse. Abre com atraso, espera antes de fechar e continua aberto com o mouse dentro dele. Pelo teclado abre no foco e o Tab entra no cartão.
- [Popover](https://ui.ravoxlabs.com/ui/popover): Conteúdo interativo preso a um botão, sem travar a página: filtros rápidos, compartilhar, editar um valor no lugar. Abre na camada de cima, vira de lado quando não cabe, leva o foco para dentro e devolve no Esc.
- [Sheet](https://ui.ravoxlabs.com/ui/sheet): Diálogo que entra por uma borda da tela: filtros, detalhes de um pedido, carrinho, edição sem sair da lista. Cabeçalho e rodapé fixos, corpo rolável, foco preso e devolvido como no Diálogo.
- [Toast](https://ui.ravoxlabs.com/ui/toast): Chame notificar() de qualquer lugar e ponha