# radix-vue

> Vue port for Radix UI Primitives.

Latest version **1.9.17** (published 2025-02-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install radix-vue
pnpm add radix-vue
yarn add radix-vue
bun add radix-vue
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.9.17 |
| Published | 2025-02-28 |
| First published | 2023-06-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Radix Vue Contributors |
| Maintainers | mujahidfa, zernonia, khairulhaaziq |
| Keywords | ui, vue, accessibility, headless, nuxt, primitives, components, radix, unstyled |

## Links

- npm: https://www.npmjs.com/package/radix-vue
- Repository: https://github.com/unovue/radix-vue
- Issues: https://github.com/unovue/radix-vue/issues
- npm.io page: https://npm.io/package/radix-vue

## Dependencies (11)

- [defu](https://npm.io/package/defu.md) ^6.1.4
- [nanoid](https://npm.io/package/nanoid.md) ^5.0.7
- [aria-hidden](https://npm.io/package/aria-hidden.md) ^1.2.4
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) ^10.11.0
- [@vueuse/shared](https://npm.io/package/@vueuse/shared.md) ^10.11.0
- [fast-deep-equal](https://npm.io/package/fast-deep-equal.md) ^3.1.3
- [@floating-ui/dom](https://npm.io/package/@floating-ui/dom.md) ^1.6.7
- [@floating-ui/vue](https://npm.io/package/@floating-ui/vue.md) ^1.1.0
- [@tanstack/vue-virtual](https://npm.io/package/@tanstack/vue-virtual.md) ^3.8.1
- [@internationalized/date](https://npm.io/package/@internationalized/date.md) ^3.5.4
- [@internationalized/number](https://npm.io/package/@internationalized/number.md) ^3.5.3

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.9.17 (latest) — 2025-02-28
- 1.9.16 — 2025-02-20
- 1.9.15 — 2025-02-18
- 1.9.14 — 2025-02-13
- 1.9.13 — 2025-01-28
- 1.9.12 — 2024-12-30
- 1.9.11 — 2024-12-06
- 1.9.10 — 2024-11-19
- 1.9.9 — 2024-11-08
- 1.9.8 — 2024-10-27
- 1.9.7 — 2024-10-07
- 1.9.6 — 2024-09-19
- 1.9.5 — 2024-08-26
- 1.9.4 — 2024-08-13
- 1.9.3 — 2024-08-06
- … 108 more at https://npm.io/package/radix-vue/versions

## README

<br />
<p align="center">
  <a href="https://github.com/unovue/radix-vue">
    <img src="https://www.radix-vue.com/logo.svg" alt="Logo" width="150" />
  </a>

<h1 align="center">
Radix Vue
</h1>
<p align="center">
An unofficial Vue port of Radix UI. <br>
Radix is an unstyled, customisable UI Library with built in accessibility for building top quality design systems.

<p>

<p align="center">
<a href='https://github.com/unovue/radix-vue/actions/workflows/test.yml'>
</a>
<a href="https://www.npmjs.com/package/radix-vue" target="__blank"><img src="https://img.shields.io/npm/v/radix-vue?style=flat&colorA=002438&colorB=41c399" alt="NPM version"></a>
<a href="https://www.npmjs.com/package/radix-vue" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/radix-vue?flat&colorA=002438&colorB=41c399"></a>
<a href="https://github.com/unovue/radix-vue" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/unovue/radix-vue?flat&colorA=002438&colorB=41c399"></a>
</p>

<p align="center">
<a href="https://chat.radix-vue.com"><b>Get involved!</b></a>
</p>
<p align="center">
 <a href="https://radix-vue.com">Documentation</a> | <a href="https://www.radix-vue.com/overview/getting-started.html">Getting Started</a> | <a href="https://www.radix-vue.com/">Examples</a> | <a href="https://www.radix-vue.com/overview/introduction.html">Why Radix Vue?</a>
</p>

![hero image](https://www.radix-vue.com/og.jpg)
 <em>design by: [icarusgkx](https://twitter.com/icarusgkx), [melkam](https://github.com/MellKam)</em>

## Installation

```bash
pnpm add radix-vue
```
```bash
npm install radix-vue
```
```bash
yarn add radix-vue
```

## Documentation

For full documentation, visit [radix-vue.com](https://radix-vue.com).

## Releases

For changelog, visit [releases](https://github.com/unovue/radix-vue/releases).

## Contributing

We would love to have your contributions! All PRs all welcomed! We need help building the core components, docs, tests, stories! Join our discord and we will get you up and running!

## Dev Setup

### Docs

1. Clone the repo
2. Run `pnpm i`
3. Run `pnpm docs:dev` to run vitepress
4. Open `http://localhost:5173`

### Package

1. Clone the repo
2. Run `pnpm i`
3. Run `pnpm story:dev` to run histoire (storybook)
4. Open `http://localhost:6006`

## Authors

- [Khairul Haaziq](https://github.com/khairulhaaziq)
- [Mujahid Anuar](https://github.com/mujahidfa)
- [Zernonia](https://github.com/zernonia)

## Credits

All credits go to these open-source works and resources

- [Radix UI](https://radix-ui.com) for doing all the hard work to make sure components are accessible
- [Floating UI](https://floating-ui.com) for creating powerful components that as the base of many Radix Vue components
- [VueUse](https://vueuse.org) for providing many useful utilities.
- [Ark UI](https://ark-ui.com) for the `<Primitive>` component
- [Radix Svelte](https://radix-svelte.com)
- [Headless UI](https://headlessui.com)

---
_Source: https://npm.io/package/radix-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._