Velune is an accessible React component system built with TypeScript, Tailwind CSS v4, and semantic design tokens. Its default visual language is inspired by white porcelain: quiet surfaces, restrained color, and precise interaction states.
Velune is currently pre-1.0. Public APIs may change between minor releases.
- 42 accessible React components with compound APIs and per-component exports
- Tailwind CSS v4 utilities backed by public semantic design tokens
- Light, dark, high-contrast, reduced-motion, and generated brand themes
- ESM, CommonJS, type declarations, and automated quality gates
Velune requires React 18 or newer and Tailwind CSS 4.
pnpm add velune@betaImport Tailwind first, followed by Velune's semantic tokens and utility registration in your global CSS entry:
@import "tailwindcss";
@import "velune/react/theme/tokens.css";
@import "velune/react/tailwind.css";import { Button } from "velune/react";
export function App() {
return <Button>Continue</Button>;
}Import from velune/react by default. Per-component entries such as
velune/react/button are also supported.
Browse the component catalog,
getting-started guide,
theme guide,
design tokens, and
templates. Documentation source lives in
apps/docs/src; see the
docs/ file map for ownership details.
Repository development requires Node.js 20+ and pnpm 9+.
corepack enable
pnpm install
pnpm dev
pnpm verifyThe Docs app runs at http://127.0.0.1:4173. Use pnpm storybook for
component development and pnpm test:e2e for Playwright scenarios.
Install or update the bundled velune-react skill:
npx skills add kxpw/Velune
npx skills update velune-react -pRead CONTRIBUTING.md before opening a pull request. Public
API, type, or behavior changes require a changeset. Documentation-only changes
can be marked no-release in the pull request.
Follow the Code of Conduct. Report vulnerabilities privately according to the Security Policy.
MIT © Velune Contributors