Guides

Getting started

One small, themeable, accessible UI system, used by all my projects: browser extensions, web apps and sites. Same feel and layout everywhere; each project sets its accent, its scale and any token it needs.

Tiny and tree-shaken: one module per component and icon, and one small runtime dependency (Detent (opens in new tab), for dragging).
Looks identical anywhere: pages, iframes, extension popups and shadow roots; host CSS can't break it.
Every property is a token: createTheme({ accent, scale, radius, font, tokens, components }).
Icons: 274 Facet stroke icons in 17 categories (softened-square geometry, built-in micro-animations), 98 official brand marks, and iconToSvg for pages without React.
One prop vocabulary: size, tone, variant, color on every component, so control is consistent.
Tested in real browsers: every story is a behavioural, accessibility and touch test on Chromium, Firefox and WebKit.

bash

pnpm add @arshad-shah/cynosure

tsx

import "@arshad-shah/cynosure/styles.css";
import { Button, CynosureTheme, createTheme } from "@arshad-shah/cynosure";
import { download } from "@arshad-shah/cynosure/icons";

const theme = createTheme({ accent: "#e8462e", scale: "compact" });

export const App = () => (
  <CynosureTheme theme={theme} mode="system">
    <Button variant="solid" tone="accent" icon={download}>
      Export
    </Button>
  </CynosureTheme>
);

Docs

Docs, table 1
Read this	For
Theming	Accent, scale, radius, fonts, light and dark, per-component tokens
Icons	Facet icons, brand marks and how brands allow them to be used
Accessibility	What every component guarantees, and how it is tested
Without React	Tokens and icons in Astro pages, static sites and plain TypeScript
Code editors	Code colours for CodeMirror, Monaco, Shiki, Prism and highlight.js
Build adapters	The Vite adapter and shadow roots (`styles.inline`)

Components

Foundations: ButtonBase, LinkBase, InputBase, FileInputBase, TextAreaBase, ChoiceBase, HiddenValue, LiveRegion (hidden announcements), DialogBase, Icon (274 Facet icons and 98 brand marks); hooks useRovingFocus, useDismiss, useDrag (pointer dragging through Detent), useControllableState.
Controls: Button, IconButton, CopyButton, Link, TextField, NumberField, SearchField, TextArea, Select, Combobox, TagInput, Checkbox, Switch, RadioGroup, SegmentedControl, Slider, DateField, TimeField, Checklist, Pagination, ColorField, ColorSwatches, KeyValueEditor, FileDrop, PathField, SignaturePad, SelectionFrame, CompareSlider, ThemeToggle.
Structure: AppShell (useAppShell), TitleBar, StatusBar, Container, PageHeader, Stack, Inline, Grid, ScrollArea, Divider, AspectRatio, Breadcrumbs, SideNav, SplitPane, Card, Toolbar, Tabs, Disclosure, Accordion, Tree, SortableList, VirtualList, Calendar, DocumentViewport, PanZoomCanvas, ZoomControls.
Overlays: Tooltip, HoverCard, Popover, FloatingToolbar (DockedToolbar), Menu, Menubar, ContextMenu, Dialog, ProgressOverlay, Sheet, CommandPalette (useHotkey), Toast (Toaster, useToast).
Feedback and display: Notice, EmptyState, ErrorBoundary, ProgressBar, Steps, LoadingDots, Skeleton, DescriptionList, Stat, List, Table, Text, Heading, Prose, Avatar (AvatarGroup), IconTile, Image, CodeBlock, Announcer (useAnnounce), Badge, Kbd, Field. Theme: CynosureTheme, useColorMode, themeInitScript, createTheme.
Build: optional Vite adapter (@arshad-shah/cynosure/vite), React-free tokens (@arshad-shah/cynosure/tokens) and self-hosted Hanken Grotesk (fonts/hanken.css).

Status: pre-release (0.x), developed on next. Releases publish to npm from main through GitHub Actions (see Release (opens in new tab)).

DocsLink to "Docs"

ComponentsLink to "Components"

Docs

Components