@ios27_design_system/react
v1.0.0
Published
iOS 27 / iPadOS 27 design system for React — Liquid Glass components, tokens, typography, accessibility-first
Maintainers
beast2025Readme
iOS 27 Design System for React
Liquid Glass components, design tokens, typography, and materials from the Apple iOS & iPadOS 27 design language — as a real React component library (React 18 / 19).
- 14 components, accessibility-first (ARIA, keyboard, focus management,
prefers-reduced-motion) - CSS design tokens — light + dark automatically via the token layer (no JS theme provider)
- Ships ESM + CJS +
.d.ts, tree-shakeable, with a Storybook - Built for the Claude Design
design-syncworkflow (Storybook + dist)
Install
npm install @ios27_design_system/react
# peers: react, react-dom (^18.2 || ^19)Setup
Import the stylesheet once at your app root, then use components anywhere:
// app entry (e.g. main.tsx / _app.tsx)
import '@ios27_design_system/react/styles.css';import { Button, SegmentedControl, Toggle } from '@ios27_design_system/react';
export function Example() {
return (
<>
<SegmentedControl segments={['Day', 'Week', 'Month']} defaultSelected={0} />
<Toggle defaultChecked label="Wi-Fi" />
<Button variant="filled" size="large">Continue</Button>
</>
);
}The single styles.css bundles the foundation (tokens, typography, materials,
animations) plus every component's CSS. Component class names are ios27-
prefixed to avoid collisions; the foundation utility classes (.text-headline,
.material-thick, .liquid-glass-large, …) match the rest of the design system.
Dark mode
Automatic via @media (prefers-color-scheme: dark). Force a mode by setting
data-theme="dark" (or "light") on a root element — all tokens update, no JS:
<html data-theme="dark">Components
| Group | Components |
|-------|-----------|
| Navigation | Toolbar, TabBar, SegmentedControl |
| Lists / Layout | ListRow, ListSection, Page |
| Actions | Button, Toggle, Slider |
| Overlays | Alert, Sheet, ContextMenu |
| Forms | TextField, SearchBar |
Full props and examples: components.react.md.
Components with a primary value (Toggle, Slider, TextField, SearchBar,
SegmentedControl, TabBar, Alert/Sheet open) are controllable — pass
value/checked/selected/open + onChange, or the defaultX form for
uncontrolled usage.
Develop
pnpm --filter @ios27_design_system/react build # tsup → dist (ESM+CJS+dts+styles.css)
pnpm --filter @ios27_design_system/react storybook # local Storybook
pnpm --filter @ios27_design_system/react build-storybook # static Storybook
pnpm --filter @ios27_design_system/react typecheck # tsc --noEmitLicense
MIT © Dcode Labs