Skip to content
Cynosure Cynosure

Introduction

What is Cynosure — a headless-at-the-core, themed-on-top React component library for production work.

Cynosure UI

Section titled “Cynosure UI”

Cynosure is a headless-at-the-core, themed-on-top React component library for production work.

The whole library is built on three ideas:

  1. Layout primitives own the DOM. Box, Stack, Inline, Flex, Grid, Center (plus Spacer, Divider, AspectRatio, Container, Section) are the only components that render raw HTML. Everything else composes those.
  2. Themes are data. Visual decisions live in W3C DTCG JSON tokens. CSS custom properties are generated from those tokens, and consumers theme by flipping data-theme on <html>.
  3. Behaviour is owned in-tree where the contract is small. Toggles, switches, accordions, tabs, collapsibles, checkboxes, radios, avatars, the Slot/asChild composer, the direction provider, scroll area, tooltip, hover card, popover, dialog, drawer, and alert dialog are all first-party — backed by two small shared kits (useFloatingPosition for anchored overlays and useDialog for modal focus-trap + scroll lock). Calendars, date pickers, color pickers, comboboxes, sliders, and form-typed inputs lean on react-aria-components so we don’t re-derive locale-aware date math or rich keyboard models. The menu family (DropdownMenu, ContextMenu, MenuBar, NavigationMenu) is the last remaining Radix-backed surface; the migration is in flight.

Why Cynosure

Section titled “Why Cynosure”
  • Tiny by default. Per-component ESM entries (@arshad-shah/cynosure-react/button) + per-component CSS. You pay for what you import.
  • Accessibility at the floor. WCAG 2.2 AA, keyboard complete, RTL-safe, reduced-motion honoured. Every component ships with an axe-passing story.
  • No CSS to write. Consumers compose via props and tokens. If you need an escape hatch, the asChild prop lets you project any element.
  • Forms that compose. Form + FormField + FormControl auto-wire id, aria-describedby, aria-invalid, name, required, disabled. Works with react-hook-form out of the box.

What Cynosure is not

Section titled “What Cynosure is not”
  • Not a visual editor or design-to-code pipeline.
  • Not a charting library (charts are on the roadmap for v1.1+).
  • Not an opinionated page framework — it sits at the component layer.

Next steps

Section titled “Next steps”