Skip to content
Design System
العربيةGet started
NewWebsite assistant: chat, voice notes and live callsMeet the website assistant

Build products people trust, in English and Arabic.

The Truvar.ai design system: 230+ accessible React components, design tokens and full right-to-left support, made to feel native on every phone.

Get startedBrowse components
pnpm add @truvar-ai/design-system
Live preview
Create your accountLive
LaylaAI agentWorking

I found 3 free times on Tuesday. Shall I book 10:30?

  • Checked the calendar
  • Found 3 free times
  • Waiting for your OK
Conversations this week2,481+12%
230+components
130+icons
245countries and flags
19messaging channels

Why Truvar

Everything a serious product needs, from day one

Stop rebuilding the basics. Start from components that are already accessible, bilingual and tested on phones.

ع
عمر خالدرد منذ دقيقتين
واتساب

ممكن أنقل موعدي ليوم الخميس الساعة ٤ العصر؟

Arabic-first, not an afterthought

Layouts mirror with logical CSS. Dates, numbers, calendars and keyboard arrows follow the language, and each Arabic font is paired with its English partner.

Accessible by default

Keyboard, focus and screen reader behaviour come from React Aria, so every component works for everyone.

Light and dark

Both themes are built in and follow the device, or set one yourself.

Inbox

Native on phones

Bottom sheets, a tab bar, finger-sized targets and no zoom on focus. It feels like an app, not a web page.

Made for AI products

Agent steps, approvals, voice calls, transcripts and an assistant mark that shows when AI is working.

One set of tokens

Colour, type, spacing and radius live in design tokens, so a change lands everywhere at once.

Components

These are the real components, not pictures. Click, type and tab through them.

Buttons
Form fields
Phone and country
Dates
Selection
64
Slider
3 open deals
Tabs
PaidPendingOverdue
Badges and status
Checkbox and switch
See all components

Examples

Whole screens, ready to start from

See the components working together in real product screens, in both languages and both themes.

CRM screen built with the Truvar.ai design systemCRM screen built with the Truvar.ai design system, dark themeCRMContacts, deals and a full record page.
Unified inbox screen built with the Truvar.ai design systemUnified inbox screen built with the Truvar.ai design system, dark themeUnified inboxEvery channel in one place, with AI handoff.
Dashboard screen built with the Truvar.ai design systemDashboard screen built with the Truvar.ai design system, dark themeDashboardCharts, maps and live numbers.
Website assistant screen built with the Truvar.ai design systemWebsite assistant screen built with the Truvar.ai design system, dark themeWebsite assistantAn agent your visitors can chat or talk to.

For developers

From install to first screen in minutes

Works with Next.js (App Router and Pages), Vite, Electron and any React 18 or 19 app. Every component is a client component, ready for Server Component pages.

Read the guideNext.js setup

  1. Install the package

    pnpm add @truvar-ai/design-system

  2. Add the styles once

    app/layout.jsx
    import "@truvar-ai/design-system/styles.css";

export default function RootLayout({ children }) {
  return (
    <html lang="ar" dir="rtl">
      <body>{children}</body>
    </html>
  );
}

  3. Use any component

    SignUp.jsx
    import { Button, TextField, PhoneField } from "@truvar-ai/design-system";

export function SignUp() {
  return (
    <form>
      <TextField label="Name" />
      <PhoneField label="Mobile" defaultCountry="EG" />
      <Button type="submit">Create account</Button>
    </form>
  );
}

Start building with Truvar

Free and open source. Version 0.0.1, in English and Arabic.

Get startedRead the docs