Skip to content
Cynosure Cynosure

Cynosure

Accessible, tree-shakeable React components. Themed with design tokens.
Get started Browse components GitHub

Install

Section titled “Install”

Pick your package manager. The Cynosure stylesheet is imported once at app entry.

Terminal window
npm install @arshad-shah/cynosure-react

Already have a project? Let the CLI wire it up for you:

Terminal window
npx @arshad-shah/cynosure-cli init

Compose, don’t configure

Section titled “Compose, don’t configure”

Every component is a small, focused primitive. Stack them with the layout primitives and you have a screen — no theme objects, no render props, no opinionated layouts to fight.

import { Stack, Input, Button } from '@arshad-shah/cynosure-react';


export function SignIn() {
  return (
    <Stack gap="4">
      <Input label="Email" type="email" />
      <Input label="Password" type="password" />
      <Button colorScheme="accent">Sign in</Button>
    </Stack>
  );
}

What’s in the box

Section titled “What’s in the box”

Forms

Inputs, selects, date and time pickers, sliders, file upload — 31 components covering every form field you’ll need.

Overlays

Dialog, Popover, Drawer, Toast, ContextMenu, CommandPalette — focus-managed, dismissible, RTL-aware.

Data display

Table, DataTable, Tree, Timeline, Chart, Carousel, ScrollArea — keyboard-navigable, theme-aware.

Navigation

Tabs, Breadcrumb, Pagination, Sidebar, Stepper, NavigationMenu — keyboard-first.

Layout

Box, Stack, Inline, Flex, Grid, SimpleGrid, Wrap, Container — every spacing prop is responsive and tokenised.

Theming

CSS variables only. Override --cynosure-* to reskin; switch themes at runtime; SSR-safe with no FOUC.

Built for the long haul

Section titled “Built for the long haul”

Accessible by default

Every primitive owns its own focus, roving tabindex, and ARIA contract — keyboards and screen readers are first-class everywhere. Every theme is contrast-audited for WCAG AA in CI; physical CSS properties are linted out so RTL stays correct.

Tree-shakeable

Per-component entry points (@arshad-shah/cynosure-react/button) on top of a plain ESM root barrel. CSS is marked side-effectful so bundlers keep the stylesheets but drop unused JS.

Themed with tokens

A flat token surface — space, colour, radius, shadow, duration, z-index — drives every visual decision. Swap themes without recompiling.

RTL and i18n ready

Logical-property layout. DirectionProvider + LocaleProvider carry direction and locale through the tree.

Start somewhere

Section titled “Start somewhere”
Quickstart Wire up the provider, import a component, ship a screen — in five minutes.
Design tokens The token surface: what's there, what each token controls, how to override.
Theming overview Light, dark, custom — and how to ship your own theme as a package.
Accessibility The guarantees we make and how we verify them in CI.
Type reference The token aliases the PropsTable links to — SpaceToken, ColorToken, Responsive.
Component browser Every component, with live previews and a complete API surface.