# Darwin UI Component Library

> A macOS-inspired React 19 component library with glass surfaces, theme tokens, docs, charts, overlays, and a package pipeline for app-ready UI.

- URL: https://mandalsuraj.com/blog/darwin-ui
- Author: Suraj Mandal (https://mandalsuraj.com)
- Published: 2026-01-24
- Project date: 2025-12-30
- Tags: design-system, components, react, typescript, webdev
- Source: https://github.com/surajmandalcell/darwin-ui
- Docs site: https://darwin-ui.mandalsuraj.com
- npm package: https://www.npmjs.com/package/@pikoloo/darwin-ui

![Darwin UI Component Library cover](https://mandalsuraj.com/images/blog/darwin-ui/cover.png)

Darwin 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.

## Visual Proof

![Darwin UI documentation page for agentic coding](https://mandalsuraj.com/images/blog/darwin-ui/docs-agentic-coding.png)

![Darwin UI documentation page showing progress components](https://mandalsuraj.com/images/blog/darwin-ui/docs-progress.png)

![Darwin UI homepage component showcase](https://mandalsuraj.com/images/blog/darwin-ui/home-components.png)

![Darwin UI desktop style example](https://mandalsuraj.com/images/blog/darwin-ui/desktop.png)

## Install

Install the package and import its compiled stylesheet once.

```bash
npm install @pikoloo/darwin-ui
```

```tsx
import { Button, Card } from "@pikoloo/darwin-ui";
import "@pikoloo/darwin-ui/styles.css";
```

Version 2.1 and later does not need a Tailwind `@source` rule.

## Package Shape

Tsup builds CommonJS, ESM, TypeScript declarations, and one CSS file. A `"use client"` banner marks the React output for client-rendered frameworks.

CSS variables define color, border, surface, type, and motion tokens. The same contract drives both themes.

## Components

The package has more than 35 components for app layouts, forms, data, overlays, feedback, charts, media, and utilities.

- A shared floating layer supports popovers and tooltips.
- Dialogs and menus use portals and keyboard focus behavior.
- Recharts powers the chart wrappers.
- Motion respects the reduced-motion setting.
- Loading, empty, icon, and error states are part of the main controls.

## Docs And Distribution

The 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.