Installation

Add the package, load its styles and fonts, and you're ready to use any component.

Requirements

• React 18 or 19, with react-dom and react-is at the same version.
• Any bundler: Next.js, Vite, Electron, Remix or webpack.

Install

With npm: npm install @truvar-ai/design-system. With Yarn: yarn add @truvar-ai/design-system.

Add the styles

Import the stylesheet once, at the root of your app. It includes the design tokens.

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

Parts with their own look have their own stylesheet. Import only the ones you use:

import "@truvar-ai/design-system/charts/styles.css";
import "@truvar-ai/design-system/voice/styles.css";
import "@truvar-ai/design-system/os/styles.css";
import "@truvar-ai/design-system/crm/styles.css";
import "@truvar-ai/design-system/widget/styles.css";

Load the fonts

The four brand fonts come with the package: Poppins and DM Sans for English, Alexandria and IBM Plex Sans Arabic for Arabic. Import them once, before the styles. Your app serves them itself, with no request to Google.

import "@truvar-ai/design-system/fonts.css";
import "@truvar-ai/design-system/styles.css";

Your first component

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>
  );
}