onmax/reka-ui

¿Qué hace reka-ui?

Útil al construir con Reka UI (componentes Vue sin estilo) - proporciona API de componentes, patrones de accesibilidad, composición (asChild), estado controlado/no controlado, virtualización e integración de estilos. Anteriormente Radix Vue.

Descripción general

Reka UI es una biblioteca de componentes Vue sin estilo que se centra en la accesibilidad, la composición y la flexibilidad. Este skill te ayuda a:

• Usar componentes como Accordion, Dialog, Popover, Select, Toggle, etc.
• Implementar la composición con asChild para personalizar el marcado.
• Manejar estado controlado y no controlado.
• Integrar con Tailwind CSS, CSS personalizado o cualquier solución de estilos.
• Aplicar virtualización para listas y menús largos.
• Seguir patrones de accesibilidad (ARIA, enfoque, navegación por teclado).

Componentes principales

Componente	Uso típico
Accordion	Paneles expandibles
Dialog	Diálogos modales
Popover	Ventanas emergentes
Select	Menús desplegables
Toggle	Botones de alternancia
Tooltip	Información sobre herramientas

Ejemplo básico

<template>
  <Dialog.Root>
    <Dialog.Trigger>Abrir diálogo</Dialog.Trigger>
    <Dialog.Portal>
      <Dialog.Overlay />
      <Dialog.Content>
        <Dialog.Title>Título</Dialog.Title>
        <Dialog.Description>Descripción</Dialog.Description>
        <Dialog.Close>Cerrar</Dialog.Close>
      </Dialog.Content>
    </Dialog.Portal>
  </Dialog.Root>
</template>

<script setup>
import { Dialog } from 'reka-ui'
</script>

Composición con asChild

Para personalizar el elemento raíz de un componente, usa asChild:

<template>
  <Dialog.Trigger asChild>
    <Button variant="secondary">Abrir</Button>
  </Dialog.Trigger>
</template>

Estado controlado vs no controlado

• No controlado: El componente maneja su propio estado internamente.
• Controlado: Pasas v-model para controlar el estado desde el padre.

<template>
  <Dialog.Root v-model:open="open">
    <!-- contenido -->
  </Dialog.Root>
</template>

<script setup>
const open = ref(false)
</script>

Virtualización

Para listas largas, usa el soporte de virtualización mediante virtualizer:

<template>
  <Select.Root>
    <Select.Virtualizer :items="items">
      <template #default="{ item }">
        <Select.Item :value="item">{{ item }}</Select.Item>
      </template>
    </Select.Virtualizer>
  </Select.Root>
</template>

Integración de estilos

Reka UI no incluye estilos, pero se integra fácilmente con Tailwind CSS:

<template>
  <Dialog.Content class="fixed top-10 bg-white p-4 rounded shadow">
    <!-- contenido estilizado -->
  </Dialog.Content>
</template>

Consideraciones adicionales

• Accesibilidad: Los componentes siguen las prácticas WAI-ARIA.
• Compatibilidad: Funciona con Vue 3.
• Migración desde Radix Vue: La API es muy similar; la mayoría de los componentes son directamente reemplazables.

Enlaces útiles

• Documentación oficial de Reka UI
• Repositorio de GitHub