{"kind":"post","path":"/blog/darwin-ui","post":{"metadata":{"title":"Darwin UI Component Library","summary":"A macOS-inspired React 19 component library with glass surfaces, theme tokens, docs, charts, overlays, and a package pipeline for app-ready UI.","publishedAt":"2026-01-24","projectDate":"2025-12-30","ascent":"#8B5CF6","github":"surajmandalcell/darwin-ui","links":[{"label":"Docs site","href":"https://darwin-ui.mandalsuraj.com","type":"docs"},{"label":"npm package","href":"https://www.npmjs.com/package/@pikoloo/darwin-ui","type":"package"}],"tags":["design-system","components","react","typescript","webdev"],"weight":70},"slug":"darwin-ui","content":"\u003c!-- cover: /images/blog/darwin-ui/cover.png --\u003e\n\nDarwin UI is a **React 19 component library** for compact desktop-style apps. It uses layered glass surfaces, clear controls, light and dark themes, and restrained motion.\n\n## Visual Proof\n\n\u003cdiv className=\"bp-evidence-grid\" data-preview-gallery=\"true\"\u003e\n\u003cimg src=\"/images/blog/darwin-ui/docs-agentic-coding.png\" alt=\"Darwin UI documentation page for agentic coding\" /\u003e\n\u003cimg src=\"/images/blog/darwin-ui/docs-progress.png\" alt=\"Darwin UI documentation page showing progress components\" /\u003e\n\u003cimg src=\"/images/blog/darwin-ui/home-components.png\" alt=\"Darwin UI homepage component showcase\" /\u003e\n\u003cimg src=\"/images/blog/darwin-ui/desktop.png\" alt=\"Darwin UI desktop style example\" /\u003e\n\u003c/div\u003e\n\n## Install\n\nInstall the package and import its compiled stylesheet once.\n\n```bash\nnpm install @pikoloo/darwin-ui\n```\n\n```tsx\nimport { Button, Card } from \"@pikoloo/darwin-ui\";\nimport \"@pikoloo/darwin-ui/styles.css\";\n```\n\nVersion 2.1 and later does not need a Tailwind `@source` rule.\n\n## Package Shape\n\nTsup builds CommonJS, ESM, TypeScript declarations, and one CSS file. A `\"use client\"` banner marks the React output for client-rendered frameworks.\n\nCSS variables define color, border, surface, type, and motion tokens. The same contract drives both themes.\n\n## Components\n\nThe package has more than 35 components for app layouts, forms, data, overlays, feedback, charts, media, and utilities.\n\n- A shared floating layer supports popovers and tooltips.\n- Dialogs and menus use portals and keyboard focus behavior.\n- Recharts powers the chart wrappers.\n- Motion respects the reduced-motion setting.\n- Loading, empty, icon, and error states are part of the main controls.\n\n## Docs And Distribution\n\nThe docs show real states and examples. A shadcn-compatible registry supports single-component installs. Package checks build both outputs and validate the registry before release."}}