Skip to content
Thanawi

Installation

Add Thanawi tokens and components to a React app with Tailwind CSS v4.

Requirements

  • Node.js 22 or newer, and pnpm
  • React 19
  • Tailwind CSS v4

Workspace packages

@thanawi/tokens and @thanawi/ui are private packages inside the Thanawi monorepo. Inside the repo, reference them with workspace:*.

Install the packages

pnpm add @thanawi/tokens @thanawi/ui @fontsource-variable/cairo

Import the styles

Import Tailwind first, then the token variables, then the Tailwind bridge. The bridge creates the token utilities: bg-surface-base, text-content-muted, border-border-subtle, ring-border-focus, rounded-md, shadow-sm and font-sans.

app/globals.css
@import "tailwindcss";
@import "@thanawi/tokens/styles.css";
@import "@thanawi/tokens/tailwind.css";

/* let Tailwind see the classes used inside @thanawi/ui */
@source "../node_modules/@thanawi/ui";

Load Cairo

Cairo is the only typeface: Latin, Arabic, numerals and code all use it. The variable font covers every weight.

app/layout.tsx
import '@fontsource-variable/cairo';
import './globals.css';

Set language, direction and mode

Set direction and color mode once, on the root element. Never set them per component.

app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ar" dir="rtl" data-th-mode="light">
      <body className="bg-surface-base font-sans text-content-default">{children}</body>
    </html>
  );
}

Use a component

import { Button } from '@thanawi/ui';

export function ConfirmTransfer() {
  return <Button>Confirm transfer</Button>;
}