Introduction

Darwin UI is a macOS-inspired dark theme React component library featuring glass-morphism aesthetics. It provides a cohesive set of components designed for building beautiful, modern web applications with a premium dark theme feel.

Design Philosophy

Dark Theme First

Darwin UI is designed with dark mode as the primary theme, featuring a near-black background (hsl(0, 0%, 4%)) that provides excellent contrast and reduces eye strain.

Glass Morphism

Components utilize backdrop-blur effects, semi-transparent backgrounds (bg-white/10), and subtle borders to create a modern glass-like appearance.

Accessibility

Built on top of Radix UI primitives, ensuring proper ARIA attributes, keyboard navigation, and screen reader support.

Framework Agnostic Design

While some components leverage Next.js features, the core library works with any React 19 project.

Technology Stack

React 19 - Latest React with concurrent features
TypeScript - Full type safety
Tailwind CSS v4 - Utility-first styling
Radix UI - Accessible primitives
Motion - Smooth animations (Framer Motion)
Recharts - Data visualization

What’s Included

25+ Components

Layout: Card, Window, Sidebar
Forms: Button, Input, Select, MultiSelect, Checkbox, Switch
Data Display: Table, Badge, Skeleton
Feedback: Modal, Toast, Alert
Charts: Area, Bar, Line, Pie, Donut, StackedBar
Utility: ContextMenu, Upload, Image, Reveal

4 Custom Hooks

useMediaQuery - Responsive breakpoints
useIsMobile - Mobile detection
useEscapeKey - Keyboard shortcuts
useContactForm - Form handling

Utilities

cn() - Class name merging with Tailwind
OverlayProvider - Overlay state management