React component library & hooks — Tailwind CSS v4, fully typed, tree-shakable.
- 10 components — Button, Stack, Text, AnimatedBackground, MagicText, MagicLogo, MagicMouseFollower, Accordion, Select, Toggle
- 2 hooks —
useDataTheme,useReducedMotion - Polymorphic components — Button renders as
<button>or<a>, Text and Stack render as any HTML tag - Automatic dark mode — reads
data-themeon<html>; falls back toprefers-color-scheme - Canvas particle effects — MagicText, MagicLogo, MagicMouseFollower animate canvas-based particles with spring physics and mouse interaction
- Accessibility-first components — Accordion (WAI-ARIA accordion pattern, arrow-key nav), Select (WAI-ARIA combobox + listbox), Toggle (WAI-ARIA switch)
- Reduced motion support — all animation components respect
prefers-reduced-motion: reduce - Themeable via CSS variables — override
--v12-*tokens in your own stylesheet - Tailwind CSS v4 — uses Tailwind v4
@themedirective; semantic color tokens map to utility classes - Full TypeScript — autocomplete, strict types, polymorphic refs
- Tree-shakable — ESM + CJS builds via Vite
- Zero-config — import and use; no plugins, no providers
npm i v12-uiimport { Button } from "v12-ui";
import "v12-ui/styles.css";
function Demo() {
return <Button variant="primary">Button</Button>;
}| Component | Description | Docs |
|---|---|---|
| Button | Polymorphic button with variants | → |
| Stack | Flexbox layout container | → |
| Text | Polymorphic text with variants | → |
| Accordion | WAI-ARIA accordion with arrow-key nav, CVA variants | → |
| Select | WAI-ARIA combobox with keyboard nav, dropdown animation | → |
| Toggle | WAI-ARIA switch with success-state, CVA sizes | → |
| AnimatedBackground | Canvas-based light-source animation | → |
| MagicText | Text assembled from animated particles | → |
| MagicLogo | Logo image disassembled into particles | → |
| MagicMouseFollower | Particle trail that follows the cursor | → |
| Hook | Description |
|---|---|
useDataTheme |
Reads data-theme attribute; falls back to OS preference |
useReducedMotion |
Returns true when prefers-reduced-motion: reduce is set |
Import the stylesheet in your entry file:
import "v12-ui/styles.css";Override CSS variables to customize the theme:
:root {
--v12-primary: #0d9488;
--v12-background: #fafafa;
--v12-foreground: #1a1a1a;
}
[data-theme="dark"] {
--v12-background: #0a0a0a;
--v12-foreground: #f5f5f5;
}All components use semantic --v12-* tokens. Reference the full list in index.css.
Explore all components and their variants:
git clone https://github.com/araldev/v12-ui.git
cd v12-ui
npm install
npm run storybook # localhost:6006| Script | Description |
|---|---|
npm run build |
Type-check + build |
npm run dev |
Watch mode build |
npm run storybook |
Storybook dev server |
npm run build-storybook |
Build Storybook static |
npm run lint |
ESLint check |
npm run lint:fix |
ESLint auto-fix |
npm run commit |
Commitizen interactive commit |
MIT © Araldev