Onu

Onu (އޮނު) means bamboo in Dhivehi.

Javaabu's React UI component library, built on shadcn/ui and Tailwind CSS v4.

• RTL and Dhivehi first: every component works in dir="rtl", with Dhivehi strings, dates and fonts built in.
• Thaana keyboard input on every free-text field, phonetic (JTK-compatible) or typewriter layout.
• One variable re-themes everything: --onu-primary. Granular tokens for everything else.
• Dark mode, density modes (compact → touch) and responsive, touch-friendly components.
• Accessible: WCAG 2.2 AA, tested with axe.
• Lucide icons by default, with FontAwesome Pro and Iconify adapters.

See REQUIREMENTS.md for the full specification and docs/ for the developer documentation.

Install

npm install @javaabu/onu
# optional font pack (Inter, JetBrains Mono, Noto Sans Thaana; Faruma and MV Faseyha are bundled)
npm install @fontsource-variable/inter @fontsource-variable/jetbrains-mono @fontsource-variable/noto-sans-thaana

/* app.css */
@import "tailwindcss";
@import "@javaabu/onu/tailwind.css";
@import "@javaabu/onu/fonts.css"; /* optional font pack: needs the packages above */

import { Button, OnuProvider, ThemeProvider } from "@javaabu/onu"
import { dv } from "@javaabu/onu/locales/dv"

export function App() {
  return (
    <ThemeProvider>
      <OnuProvider locale={dv}>
        <Button>ސޭވްކުރޭ</Button>
      </OnuProvider>
    </ThemeProvider>
  )
}

Re-theme with one variable:

:root {
  --onu-primary: oklch(0.55 0.15 240);
}

AI assistants

The package ships its docs for AI coding assistants: node_modules/@javaabu/onu/llms.txt (the rules for writing Onu code and an index of every component) and a Markdown page per component in node_modules/@javaabu/onu/docs/. There is also an MCP server, @javaabu/onu-mcp, and a Claude Code plugin (/plugin marketplace add Javaabu/onu). See AI assistants.

Repository

Path	What
packages/onu	The @javaabu/onu package
packages/onu-mcp	@javaabu/onu-mcp: MCP server with Onu's docs for AI assistants
plugins/onu	Claude Code plugin (skill + MCP server)
web	Docs site: every component and the sample pages (pnpm dev)
templates	Starter apps: Laravel + Inertia + React, and Next.js (App Router)
docs	Developer documentation (Docusaurus format)
figma	Figma token sync and Code Connect mappings
tokens.json	Design tokens (DTCG), the source for CSS variables and Figma Variables

pnpm install
pnpm dev            # web app
pnpm test           # unit tests
pnpm test:coverage  # with coverage thresholds
pnpm lint && pnpm typecheck
pnpm build          # build the package

Starter templates

Ready-to-copy apps wired up with Onu (provider, Tailwind, fonts, an English / Dhivehi switch):

• templates/laravel-inertia-react: Laravel + Inertia + React + TypeScript with an admin shell (AppLayout, AppSidebar) and a form that shows Laravel validation errors, plus feature tests.
• templates/nextjs: Next.js App Router with Server Components rendering Onu, client components where needed, and a server-rendering check.

CI builds both against the workspace copy of the library (templates.yml). Each template's README shows how to use it on its own with the npm package.

pnpm build && pnpm build:templates
pnpm --filter onu-template-nextjs test:ssr

Contributing

See CONTRIBUTING.md.

Licence

MIT. See LICENSE.md.