onmax/reka-ui

O que reka-ui faz?

Use quando estiver construindo com Reka UI (componentes Vue headless) - fornece API de componentes, padrões de acessibilidade, composição (asChild), estado controlado/não controlado, virtualização e integração de estilo. Anteriormente Radix Vue.

Visão Geral

Reka UI é uma biblioteca de componentes de interface de usuário sem estilos (headless) para Vue, focada em acessibilidade, flexibilidade e composição. Ela oferece uma coleção de componentes primitivos e de alto nível que seguem os padrões WAI-ARIA para garantir que suas aplicações sejam acessíveis por padrão. Com Reka UI, você tem controle total sobre a aparência visual, enquanto a lógica de interação e acessibilidade é tratada pela biblioteca.

Principais Conceitos

Componentes Headless

Componentes sem estilos fornecidos prontos para uso. Você aplica seus próprios estilos (Tailwind, CSS Modules, etc.) através de classes ou props.

asChild

A prop asChild permite que um componente Reka UI renderize um elemento filho diferente, mantendo o comportamento e acessibilidade. Exemplo:

<template>
  <RekaDialog.Root>
    <RekaDialog.Trigger asChild>
      <Button>Clique Aqui</Button>
    </RekaDialog.Trigger>
  </RekaDialog.Root>
</template>

Estado Controlado vs. Não Controlado

• Não Controlado: O componente gerencia seu próprio estado internamente. Use defaultValue.
• Controlado: O estado é gerenciado por você via v-model ou props value e onValueChange.

Virtualização

Componentes como Virtualizer e Combobox suportam virtualização para lidar com listas grandes de forma eficiente.

Instalação

npm install reka-ui
// ou
yarn add reka-ui
// ou
pnpm add reka-ui

Exemplos de Uso

Diálogo (Modal)

<script setup lang="ts">
import { RekaDialog } from 'reka-ui'
</script>

<template>
  <RekaDialog.Root>
    <RekaDialog.Trigger>Abrir Diálogo</RekaDialog.Trigger>
    <RekaDialog.Portal>
      <RekaDialog.Overlay />
      <RekaDialog.Content>
        <RekaDialog.Title>Título</RekaDialog.Title>
        <RekaDialog.Description>Descrição</RekaDialog.Description>
        <RekaDialog.Close>Fechar</RekaDialog.Close>
      </RekaDialog.Content>
    </RekaDialog.Portal>
  </RekaDialog.Root>
</template>

Dropdown Menu

<script setup lang="ts">
import { RekaDropdownMenu } from 'reka-ui'
</script>

<template>
  <RekaDropdownMenu.Root>
    <RekaDropdownMenu.Trigger>Menu</RekaDropdownMenu.Trigger>
    <RekaDropdownMenu.Content>
      <RekaDropdownMenu.Item>Item 1</RekaDropdownMenu.Item>
      <RekaDropdownMenu.Item>Item 2</RekaDropdownMenu.Item>
    </RekaDropdownMenu.Content>
  </RekaDropdownMenu.Root>
</template>

Referência de Componentes

Componente	Descrição
Accordion	Painéis expansíveis
AlertDialog	Diálogo de alerta com foco forçado
AspectRatio	Mantém proporção de aspecto
Avatar	Exibe avatar com fallback
Checkbox	Caixa de seleção acessível
Collapsible	Seção recolhível
Combobox	Input de seleção com autocomplete
ContextMenu	Menu de contexto
DatePicker	Seletor de data
Dialog	Modal de diálogo
DropdownMenu	Menu suspenso
FormField	Campo de formulário com validação
HoverCard	Card que aparece ao passar o mouse
Label	Rótulo acessível
Menubar	Barra de menus
NavigationMenu	Menu de navegação
Pagination	Paginação
PinInput	Input de código de pin
Popover	Popover
Progress	Barra de progresso
RadioGroup	Grupo de botões de rádio
RangeCalendar	Calendário com seleção de intervalo
ScrollArea	Área de rolagem personalizada
Select	Seletor
Separator	Separador
Slider	Controle deslizante
Switch	Interruptor
Tabs	Abas
Toast	Toast de notificação
Toggle	Botão de alternar
ToggleGroup	Grupo de botões de alternar
Toolbar	Barra de ferramentas
Tooltip	dica de ferramenta

Personalização de Estilos

Reka UI não fornece estilos. Você pode usar:

• Tailwind CSS: Adicione classes diretamente nos componentes.
• CSS Modules: Importe arquivos .module.css e use classes locais.
• Styled Components (via Vue): Use bibliotecas como vue-styled-components ou @emotion/vue.
• CSS Global: Defina estilos globais com seletores (ex.: .reka-dialog-content).

Recursos Adicionais

• Documentação Oficial Reka UI
• Exemplos no GitHub
• Playground Online

---

Nota: Reka UI é uma renomeação do projeto originalmente chamado Radix Vue, mantendo a mesma API e filosofia.