One set of components, tokens and rules that adapts to any brand, language and direction.
npminstallsyntaraBelow, the Hero component cycles through its four styles, each in a different brand and that brand’s language: Gallery in Haat (Hindi), Orbit in Qamar (Arabic), Aurora in Care (English), Card fan in Harbor (English).
Syntara takes six brand inputs: a primary colour, an accent, a neutral, a shape, a type pair and a density. From them it builds a complete light and dark theme.
Every colour pair it makes is checked against WCAG 2.2 AA before it ships. When a brand can’t pass, the engine adjusts the colour. It never rounds a ratio up.
The same React components render every brand: right to left, Devanagari and editorial serifs included. A brand is data, not code.
Components, themes, contrast checks and an agent-readable spec, all generated from the same files, so they never drift apart.
The components index, in the brand picked in the sidebar. Every card is the real component, scaled down.
Layout
A site footer: an oversized wordmark cut off by a hairline horizon and lit from one corner, over an aside and columns of links.
The opening section of a website page: a big headline, a sentence and what to do next, over a moving decoration in the brand's colours. Follows the page's light or dark scheme, or stays dark with scheme="dark". Styles: aurora, orbit, gallery, cards.
The components index, in the brand picked in the sidebar. Every card is the real component, scaled down.
Write a brand in one small file. Syntara does the colour maths, the dark theme and the accessibility checks, and stays out of your way after that.
Pick a brand. Buttons, cards, focus rings and type all change together, in light and dark, and every colour pair is checked before it is used.
Try it: the card is live.
Here’s how your money is moving this September.
Layouts use logical properties, so a right-to-left brand mirrors without a single override, and each type pair carries the fonts its script needs.
Switch the language on the card.
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Every component is described once, in a meta.json file. The docs, the MCP server and the drift checker all read that file, so an agent builds with the rules you wrote.
@syntara/mcp, on npm.
Add a payout settings form for Harbor.
Using Switch, Slider and Button. Switches take effect at once, so the only button is Save limit, for the slider.
Will it pass contrast in dark mode?
Harbor’s dark theme was checked pair by pair when it was built, so yes.
Your brand as CSS variables, design tokens or Figma variables. No React needed.
npminstall@syntara/tokensEvery component, the icon set, the tokens for every brand and the theme engine.
npminstallsyntaraGive your coding agent the components, their rules and your brands.
npminstall@syntara/mcpWhat Syntara is, what it isn’t, and where the honest edges are.
Yes. npm install syntara installs everything an app needs in one go: the components, the icon set, the tokens for every brand and the theme engine. The eight @syntara packages it is built from are published on their own too, along with the server-driven UI schema, the auditor, the MCP server and the codemods. Or copy a component’s .tsx and .module.css into your project and load the token CSS once at the app root.
Six inputs in a JSON file. Syntara builds the rest: themes, tokens, components and checks.
Get started