Syntara

Preview

Code

In transit

Due soon

قيد التوصيل

Installation

npm

Manual

pnpm

npm

yarn

bun

pnpm add @syntara/react @syntara/tokens

import { ThemeScope } from '@syntara/react';

Usage

import { ThemeScope } from '@syntara/react';

export function App() {
  return (
    <ThemeScope theme="qamar" scheme="dark" locale="ar-AE">
      {/* your app */}
    </ThemeScope>
  );
}

Accessibility

No keyboard interaction of its own.

Pass locale for other-language or right-to-left regions: React Aria reads direction from the locale, not the DOM dir attribute.
Overlays opened inside the scope copy its theme, scheme, density, dir and lang when they open.

Guidelines

Do

Put the theme, scheme and density attributes on one element — token CSS needs them together.

Don’t

Don't nest scopes with different schemes inside inline text; scope whole regions.

API reference

ThemeScope

theme: string
Tenant id whose tokens are loaded under [data-syntara-theme]. Omit to inherit the page theme.
scheme: lightdefault
dark
Colour scheme for the subtree.
density: comfortable
compact
Overrides the tenant's default density.
locale: string
BCP 47 locale, e.g. "ar-AE". Sets React Aria's locale (arrow-key direction, date formats, placement) and, unless given, lang and dir. Right-to-left regions need it.

Tokens

The semantic tokens this component reads, grouped by what they control. Swatches show this site’s theme; change a tenant’s brand and the component follows with no code change.

Colour2: surface.canvastext.default
Type2: font.bodyfont.size.md

Theme Scope

Card ending 4821

Home policy renews 14 Oct

طلب QM-58213