Reka UI

Reka UI is the Vue equivalent of Radix: unstyled, fully accessible primitives that handle focus, keyboard navigation and ARIA semantics and leave every pixel to you. It was renamed from Radix Vue in 2025.

At a glance

Install	npm install reka-ui
Styling	none, fully agnostic
Composition	as and as-child props
Used by	Nuxt UI, shadcn-vue
MCP server	not published
License	MIT

Install

npm install reka-ui

What the code looks like

Every part is a separate component, and as-child hands the behaviour to your own element instead of wrapping it.

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

<template>
  <DialogRoot>
    <DialogTrigger as-child>
      <button class="btn btn-danger">Delete</button>
    </DialogTrigger>
    <DialogPortal>
      <DialogOverlay class="overlay" />
      <DialogContent class="panel">
        <DialogTitle>Are you sure?</DialogTitle>
        <DialogClose class="btn">Cancel</DialogClose>
      </DialogContent>
    </DialogPortal>
  </DialogRoot>
</template>

Where it sits in the stack

Most Vue developers use Reka UI without knowing it, because Nuxt UI and shadcn-vue are both built on top of it. Reach for it directly when you want the layer underneath and none of the opinions above it.

Choose it if

• You have a Vue design system and need accessible behaviour without styles.
• You are porting a React design system built on Radix. The API maps almost one to one.

Look elsewhere if

• You want something that looks finished. Nuxt UI or shadcn-vue give you Reka UI already styled.