@oriui/vue

oriUI 織り

A design system in plain CSS, with accessible Vue components built on it.

• Theming is CSS. Skins, dark mode, sizes and variants are custom properties switched by a class or an attribute. No colors are computed in JavaScript, and there is no Tailwind dependency.
• State is real attributes — disabled, aria-pressed, aria-invalid — so the CSS reads the same state with or without the Vue components.
• Accessibility is tested. axe runs against every component, every color pair passes WCAG AA contrast in every skin, and keyboard behavior is exercised in real Chromium, Firefox and WebKit.
• Behavior is replaceable. Dialog, disclosure, combobox and menu run through a contract, so you can plug in another engine for one widget without changing its markup.

Install

npm install @oriui/vue   # the components; @oriui/css and @oriui/headless come as peers
npm install @oriui/css   # or only the CSS

Use with Vue

import '@oriui/css' // once, in your entry file
import { OriButton } from '@oriui/vue'

<OriButton label="Save" variant="soft" color="primary" size="lg" />

Use the CSS anywhere

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

<button class="ori-button ori-button_lg ori-variant_soft ori-color_primary">Save</button>

The class model

A block class plus single-class token utilities: one class repoints one token. The block has defaults, so a bare block is valid; add a class only to change an axis. Dynamic state is an attribute (disabled, aria-busy), never a class.

color is the role and variant the mapping, so there is no separate background color. Theme and skin are set on <html> (class="dark", data-ori-skin="cyber") and reskin everything through CSS variables.

Browser support

Chrome and Edge 131+, Firefox 147+, Safari 26+, the versions with CSS anchor positioning and anchor-scope. Every change is tested in current Chromium, Firefox and WebKit. Details: Installation → Browser support.

Documentation

• oriui.vercel.app — a page per component with live demos, props and accessibility notes, plus guides and the headless API.
• Cheat sheet — install, the class model and every component on one page.
• For AI tools: /llms.txt (index) and /llms-full.txt (every page in one file).

Contributing

See CONTRIBUTING.md for branches, commits and releases. The conventions are in CLAUDE.md, the reasons behind them in DECISIONS.md, and known problems in ISSUES-INNER.md.

License

MIT © Leonid