Ropav

A Vue 3 component library built on Vue Vapor, styled by @ropav/styles. Published on npm as ropav.

Documentation · Components · Patterns · Theming · Storybook

Writing this with a coding agent: point it at AGENTS.md, which ships in the package, or at llms-full.txt for every component at once.

Ropav is a port of HeroUI v3 to Vue Vapor: the style layer is vendored from @heroui/[email protected], the behaviour layer is re-implemented from React Aria.

Packages

| Package | Description | | -------------------- | ----------------------------------------------------- | | packages/ropav | The component library | | packages/styles | CSS + tv() variants (@ropav/styles) | | packages/docs | The documentation site | | packages/storybook | Storybook — every component, documented here or not | | packages/testing | Shared test harness (jsdom + Playwright browser) |

Calendar systems

The calendars, fields and pickers build Gregorian dates whatever calendar the locale asks for — a deliberate default, and about bundle weight rather than correctness. An app serving a locale that uses another system opts in:

<script setup lang="ts">
import { DatePicker, createCalendar } from "ropav";
</script>

<template>
  <DatePicker :create-calendar="createCalendar" />
</template>

Why it works that way, and how to opt in for only some systems, is in Calendar systems.

Development

Requires Node.js 22+ and pnpm 10+.

pnpm i --hoist   # install
pnpm dev         # Storybook on http://127.0.0.1:6006
pnpm build       # build every package
pnpm lint        # oxlint
pnpm typecheck   # vue-tsc
pnpm test        # Vitest — jsdom + browser (needs `playwright install chromium` once)

License

Apache License 2.0 — see LICENSE, which keeps the original copyright.