Introduction
The Truvar.ai design system is one set of design tokens and the React components built on them. It's Arabic-first with full right-to-left support, accessible by default on React Aria, and made to feel native on phones.
InstallAdd the package and its styles.Next.jsFonts, layout, links and Arabic in the App Router.ComponentsEvery component with live examples.ExamplesWhole screens built with the system.
Principles
- Accessible first. Keyboard, focus and screen reader support come from React Aria, so every component works for everyone.
- Two languages, one layout. Components use logical CSS properties, so Arabic mirrors without a separate stylesheet.
- Tokens are the source of truth. Colour, type, spacing and radius come from design tokens, never hard-coded values.
- Native on every screen. The same components work with a mouse, a keyboard and a finger.
What's included
| Import | What |
|---|---|
| @truvar-ai/design-system | Core components: buttons, fields, selects, dates, dialogs, sheets, menus, tables, toasts, cards, bottom nav, phone and country inputs, logo and brand marks |
| @truvar-ai/design-system/icons | UI icons and stateful system icons |
| @truvar-ai/design-system/charts | Charts, sparklines, gauges, heatmaps, funnels and a world map |
| @truvar-ai/design-system/voice | Call player, transcript, call logs, live call and workflow builder |
| @truvar-ai/design-system/os | Truvar OS kit: system bar, voice dock, agent task and approval cards |
| @truvar-ai/design-system/crm | Conversations across every channel, AI handoff, contacts, roles and permissions |
| @truvar-ai/design-system/widget | Website assistant: chat, voice notes and live calls |
| @truvar-ai/design-system/tokens | Design tokens as JS, CSS variables and JSON |