A catalogue of moving parts.
A React 19 component library on a closed token vocabulary and one motion engine - no Tailwind, zero dependencies.
Overview
Zyncat UI is a complete design system for React 19 — accessible primitives, form controls, data blocks and overlays, built on modern CSS and a token vocabulary small enough to hold in your head.
Motion is not an add-on. Layout changes, collapses, presence transitions and digit rolls all run through one engine that speaks the browser's native Web Animations API — so there is no Tailwind, no CSS-in-JS, and no animation library underneath. These numbers above are rolling on the shipped Odometer.
“Motion is physical state — nothing snaps, nothing teleports.”
Philosophy & Craft
Good interface design is a trust mechanism. When software feels intentional, responsive and physically grounded, people instinctively believe the engineering behind it. Four principles bind every component:
- Restraint over decoration. Every color, elevation, radius and interval is bounded by the token system — no arbitrary hex values, no ad-hoc padding, no utility clutter.
- Motion is physical state. Layout changes, collapses and digit rolls never snap or teleport, and every transition respects reduced-motion preferences.
- Modern CSS first. Cascade layers, nesting, container queries and
:has()— never JavaScript style injection or build-time transformers. - Accessibility by default. Complete ARIA roles, keyboard control, focus traps and screen-reader announcements on every interactive element.
Core Pillars
One WAAPI engine
Native browser animation with spring physics, playback scaling, FLIP layout morphing, and automatic reduced-motion handling.
Closed token vocabulary
Every dimension, font, radius and color resolves to a named CSS custom property. No magic numbers anywhere.
React 19 native
Built from the ground up for React 19 — ref as prop, useActionState, transitions, zero hydration bugs.
Universal SSR / SSG
Ships built ESM with 'use client' boundaries intact — Next.js, Remix, Astro, Vite and Cloudflare Pages just work.
Subpath treeshaking
No barrel export, deliberately. Importing @zyncat/ui/button ships the Button and its CSS — nothing else.
AI & MCP native
A bundled Model Context Protocol server lets coding agents query the real API surface instead of guessing props.
Design Architecture
The system is organised into four layers with strict boundary rules:
Tokens
The raw vocabulary in
styles.css— surfaces, text hierarchy, borders, radii, z-indices, and the motion scale of durations and easings.
Next Steps
Follow the installation guide to wire Zyncat UI into your app, read how the four override levels retheme it, or point your coding agent at the MCP server.
Frequently asked questions
A React component library is a packaged set of ready-made UI components you import instead of rebuilding. Zyncat UI ships more than 40 of them - buttons, form fields, tables, dialogs, toasts and expressive motion pieces - each on its own subpath, so import { Button } from '@zyncat/ui/button' pulls that one component and its CSS and nothing else.
No. Every component ships plain compiled CSS - no Tailwind, no CSS-in-JS, no build-time transformer - so you link @zyncat/ui/styles.css once at the app root and each component loads its own stylesheet with it. Shipped rules sit in @layer zyncat.components, so if your project does use Tailwind or its own CSS, your unlayered rules still beat them at any specificity.
Yes. The package ships built ESM with the 'use client' directives intact, so Next.js App Router boundaries work with no transpilePackages and no bundler config, and the same build runs under Remix, Astro, Vite and Cloudflare Pages. Theming server-renders too: ZyncatTheme is a plain component that emits a <style> element, so there is no theme flash on first paint.
Design tokens are named CSS custom properties - every colour, radius, font and duration resolves to one, so there are no magic numbers to hunt down. Retheme by repointing them: defineTheme({ color: { accent: 'oklch(0.58 0.19 292)' } }) passed to <ZyncatTheme theme={{ base, dark }} /> at the root, where every key but base becomes a [data-theme='<key>'] block. The motion engine reads the same tokens, so animation retimes with the theme.
None. The dependencies field is empty and React 19 is the only peer: enter/exit, layout and gesture animation run on a small built-in engine over the browser Web Animations API rather than an animation library, and the icons are bundled. Reduced motion is handled at the token layer - every --duration-* collapses to 1ms under prefers-reduced-motion, so no component carries its own media query.
Yes, and one command sets it up: npx zyncat-ui init installs the package, imports the stylesheet at your app root, drops the agent skill into .claude/skills/ and registers the bundled MCP server in .mcp.json. From there an agent calls get_component, search_api and get_tokens to read the real prop types and token values instead of guessing them.