@ios27_design_system/react
Advanced tools
iOS 27 / iPadOS 27 design system for React — Liquid Glass components, tokens, typography, accessibility-first
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).
prefers-reduced-motion).d.ts, tree-shakeable, with a Storybookdesign-sync workflow (Storybook + dist)npm install @ios27_design_system/react
# peers: react, react-dom (^18.2 || ^19)
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.
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">
| 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.
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 --noEmit
MIT © Dcode Labs
FAQs
iOS 27 / iPadOS 27 design system for React — Liquid Glass components, tokens, typography, accessibility-first
The npm package @ios27_design_system/react receives a total of 9 weekly downloads. As such, @ios27_design_system/react popularity was classified as not popular.
We found that @ios27_design_system/react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket uncovered 77 linked Firefox extensions, including 40 that steal wallet secrets or credentials and 37 deceptive sports-score shells.
Security News
NIST disclosed an unreleased AI tool called V-etalon and opened a broad inquiry into NVD modernization after years of automation plans produced no public enrichment system.
Security News
In his AI Council 2026 talk, Feross Aboukhadijeh covers recent package compromises, vulnerability discovery, and a more automated security model.