oriUI

Installation

oriUI is three layers, one package each. Install only the layer you need — they share one token contract, so you can add another later without reworking what you built.

Requirements

  • Node ≥ 22 and a bundler (Vite, webpack, Nuxt, …) for the Vue layers.
  • Vue 3.5+ for the styled layer (the components use reactive props destructure).
  • For the headless Vue adapter, Vue 3.5+. Vue is an optional peer: the framework-free core needs no framework at all.
  • The CSS layer needs none of the above — it is a plain stylesheet and classes.

Browser support

Chrome and Edge 131+, Firefox 147+, Safari 26+. The floor comes from CSS anchor positioning, which places the floating panels (menus, the combobox list, popovers, tooltips) next to their trigger: Chrome 131 is where anchor-scope arrived, which keeps each tooltip on its own trigger. Every other feature the CSS uses is older. In an earlier browser those panels open at the corner of the viewport instead.

We test every change in current Chromium, Firefox and WebKit. Where the components build on a native control, an engine's own behavior stays: Safari keeps physical arrow keys in a right-to-left radio group, and in Firefox, Tab past a modal dialog's last control moves to the browser's toolbar rather than back to the first.

Styled components — @oriui/vue

The full experience: ready Vue components, themed through tokens.

bash
npm install @oriui/vue

Import a component where you use it, and the stylesheet once at your app entry:

vue
<script setup lang="ts">
import { OriButton } from '@oriui/vue'
</script>

<template>
    <OriButton label="Click me" variant="soft" color="primary" />
</template>
ts
// main.ts — once, anywhere in your entry
import '@oriui/css'

That single import ships the tokens, the base styles, and every component's classes. Theme and skin are then just attributes on <html> — see Theming.

The CSS layer — @oriui/css

No framework, no build step: ship the stylesheet and write .ori-* classes. This is how oriUI works with htmx, Astro, or plain HTML.

From a bundler:

ts
import '@oriui/css'

Or straight from a CDN, no install at all:

html
<link rel="stylesheet" href="https://unpkg.com/@oriui/css/dist/styles.css" />

The full class reference and copy-pasteable markup live in Using the CSS layer and on each component page — flip any example to its HTML tab.

The headless layer — @oriui/headless

Behavior without markup: composables for open state, keyboard, focus, and ARIA. Installing @oriui/vue already pulls this in transitively, but you can install it on its own:

bash
npm install @oriui/headless

One framework-agnostic core and a thin Vue adapter over it:

ts
import { useDisclosure } from '@oriui/headless/vue' // Vue 3.5+ → ComputedRefs

Both useDisclosure and useDialog work out of the box on zero-dependency native engines — no adapter, no extra install. useDialog runs on the native <dialog> element, so the focus trap, Esc, ::backdrop, top-layer and focus-return come from the platform via showModal().

The swap is optional: register a custom engine per primitive only if you need it, for example your own adapter around a Zag machine for a genuinely hard widget, without touching your markup:

ts
// main.ts
import { OriHeadless } from '@oriui/headless/vue'
import { myDialog } from './headless/my-dialog' // optional custom adapter

app.use(OriHeadless, { dialog: myDialog })

See @oriui/headless for the contract and useDialog for the full control surface.

Next

oriUI

GitHub