@arshad-shah/cynosure-react

React component library for Cynosure UI — headless-at-the-core, themed-on-top, pay-for-what-you-import.

Every component ships as its own ESM entry point with its own CSS, so bundlers keep only what you use. Behaviour is a hybrid of Radix primitives and React Aria for accessibility; styling is driven by W3C DTCG design tokens from @arshad-shah/cynosure-tokens.

See every component live, with variants, props, and copyable code: cynosure.arshadshah.com

Install

npx cynosure init

or manually:

pnpm add @arshad-shah/cynosure-react @arshad-shah/cynosure-tokens

Peer requirements: React 18 or 19 (react, react-dom). react-hook-form@^7 is an optional peer for the forms adapter.

Set up

One CSS import (includes tokens + dark + component styles), one provider:

import '@arshad-shah/cynosure-react/all.css';

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

export default function App() {
  return (
    <CynosureProvider>
      <Button>Get started</Button>
    </CynosureProvider>
  );
}

Prefer granular control? The legacy three-import path is still exported:

import '@arshad-shah/cynosure-tokens/css';
import '@arshad-shah/cynosure-tokens/css/dark';
import '@arshad-shah/cynosure-react/styles.css';

Per-component imports

Every component has a subpath export for minimum bundle size:

import { Button } from '@arshad-shah/cynosure-react/button';
import { Dialog } from '@arshad-shah/cynosure-react/dialog';
import { DataTable } from '@arshad-shah/cynosure-react/data-table';

The subpath entry imports only that component's code and CSS — no barrel-file fallout.

Bundle sizes

Brotli-compressed per-component budgets (full table in root README.md):

| Component | Size | Component | Size | | --- | ---: | --- | ---: | | Box, Stack, Flex, Grid | 3 kB | Button | 6 kB | | Text, Heading | 4 kB | Input, Textarea | 8 kB | | Dialog, Tooltip, Drawer | 18 kB | Tabs | 14 kB | | Select | 55 kB | Combobox | 58 kB | | DatePicker | 70 kB | DataTable | 60 kB |

Enforced by pnpm size in CI.

Server Components

This package works with React Server Components. Structural pieces (Box, Stack, Card, Text, …) render inside Server Components; stateful pieces (Button, form controls, overlays) go inside a 'use client' boundary. See the RSC compatibility matrix for the full breakdown and a Next.js App Router recipe.

What's inside

Layout primitives — Box, Stack, Inline, Flex, Grid, Center, Spacer, Divider, AspectRatio, Container, Section

Typography — Text, Heading, Code, Kbd, Link, Blockquote, List

Forms — Input, Textarea, NumberInput, Checkbox, Radio, Switch, Select, Combobox, MultiSelect, Slider, RangeSlider, DatePicker, DateRangePicker, TimePicker, ColorPicker, FileUpload, SearchInput, PinInput, TagsInput, Rating

Overlays — Dialog, AlertDialog, Drawer, Popover, HoverCard, Tooltip, Toast, DropdownMenu, ContextMenu, MenuBar

Navigation — Tabs, Breadcrumb, Pagination, Menu, NavigationMenu, Sidebar, Stepper, Anchor, BackToTop

Data display — Card, Table, DataTable, Tree, Timeline, Stat, LinearProgress, CircularProgress, Skeleton, Spinner, Accordion, Collapsible, ScrollArea, Resizable, CodeBlock

Feedback — Badge, Tag, Chip, Avatar, AvatarGroup, Alert, Banner, Notification, Callout, EmptyState, Toggle, ToggleGroup

Form composition — Form, FormField, FormLabel, FormControl, FormDescription, FormMessage, plus an RHF adapter at @arshad-shah/cynosure-react/rhf

The full inventory, props reference, and live examples live in the Storybook docs site.

Themes

Drop-in theme presets from @arshad-shah/cynosure-themes:

import '@arshad-shah/cynosure-themes/terminal';
import '@arshad-shah/cynosure-themes/high-contrast';

Or build your own by overriding the token CSS variables — see custom-themes.

Links

• Storybook — live component reference
• Main repo — source, issues, contributor guide
• Server Components guide
• Migration guide (0.x → 1.0)
• Changelog

License

MIT © Arshad Shah