reka-ui

Reka UI (formerly Radix Vue) is an open-source, low-level UI component library for Vue.js designed to serve as the foundation for accessible design systems and web applications. It provides unstyled, accessible components that follow WAI-ARIA design patterns, handling complex details like keyboard navigation, focus management, and ARIA attributes automatically.

Key features include:

• Unstyled Components: Complete freedom to style components using any CSS solution (vanilla CSS, Tailwind, CSS-in-JS, etc.).
• Flexible State Management: Components support both uncontrolled and controlled patterns.
• asChild Prop: Provides full control over the rendered element, allowing you to merge component logic onto your own elements.
• Modular & Tree-shakable: Designed for performance, ensuring unused components do not increase your bundle size.

Reka UI uses immutable DateValue objects from @internationalized/date. Choose the type that matches your requirements:

• CalendarDate: Date only (e.g., 2023-10-11). Use for birthdays or deadlines.
• CalendarDateTime: Date and time, but no timezone (e.g., 2023-10-11T12:30:00). Use for local appointments.
• ZonedDateTime: Date, time, and timezone (e.g., 2023-10-11T21:00:00:00-04:00[America/New_York]). Use for global events like conferences or meetings.

Reka UI provides a Nuxt module that enables automatic component imports. To use it, add reka-ui/nuxt to the modules array in your nuxt.config.ts file.

export default defineNuxtConfig({
  modules: ['reka-ui/nuxt'],
})

The Tags Input component is composed of several parts that must be imported and assembled manually. The core parts are TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, and TagsInputClear.

<script setup>
import { TagsInputClear, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, TagsInputRoot } from 'reka-ui'
</script>

<template>
  <TagsInputRoot>
    <TagsInputItem>
      <TagsInputItemText />
      <TagsInputItemDelete />
    </TagsInputItem>

    <TagsInputInput />
    <TagsInputClear />
  </TagsInputRoot>
</template>

The simplest way to animate Reka UI Primitives is using CSS keyframes. You can animate both the mount and unmount phases because Reka UI will suspend unmounting while your animation plays out. Use the [data-state] attribute (e.g., [data-state="open"] or [data-state="closed"]) on the component to target specific animation states.

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.DialogOverlay[data-state="open"],
.DialogContent[data-state="open"] {
  animation: fadeIn 300ms ease-out;
}

.DialogOverlay[data-state="closed"],
.DialogContent[data-state="closed"] {
  animation: fadeOut 300ms ease-in;
}

The Avatar component is composed of several parts. You must import and piece them together using AvatarRoot, AvatarImage, and AvatarFallback.

<script setup>
import { AvatarImage, AvatarFallback, AvatarRoot } from 'reka-ui'
</script>

<template>
  <AvatarRoot>
    <AvatarImage />
    <AvatarFallback />
  </AvatarRoot>
</template>

You can dynamically switch between ltr and rtl by combining Reka UI's ConfigProvider with the useTextDirection composable from @vueuse/core.

Note: The dir prop does not support auto as a value, so you must use an intermediate Ref to explicitly define the direction as either ltr or rtl.

For SSR support, provide an initialValue to useTextDirection so the server can determine the direction when the html tag is not yet accessible.

<script setup lang="ts">
import { ConfigProvider } from 'reka-ui'
import { useTextDirection } from '@vueuse/core'
import { computed } from 'vue'

// For SSR support, set initialValue
const textDirection = useTextDirection({ initialValue: 'rtl' })
const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr')
</script>

<template>
  <ConfigProvider :dir="dir">
    <slot />
  </ConfigProvider>
</template>

The Dialog component is a window overlaid on the primary window or another dialog, rendering the content underneath inert. It supports both modal and non-modal modes, automatically traps focus when modal, and handles screen reader announcements via DialogTitle and DialogDescription.

To implement a basic dialog, import the necessary parts from reka-ui and assemble them within a DialogRoot component.

<script setup>
import {
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogOverlay,
  DialogPortal,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from 'reka-ui'
</script>

<template>
  <DialogRoot>
    <DialogTrigger />
    <DialogPortal>
      <DialogOverlay />
      <DialogContent>
        <DialogTitle />
        <DialogDescription />
        <DialogClose />
      </DialogContent>
    </DialogPortal>
  </DialogRoot>
</template>