Darwin UI

Build stunning dark-themed interfaces with glass-morphism styling. 25+ React components, shadcn-compatible, and ready for production.

Get Started View Components

Live Demo

Experience Darwin UI components in action. Click the buttons, open modals, and explore the interactive dashboard:

Darwin UI Dashboard

Darwin UI

Dashboard

Welcome back, here's your overview

+12.5%

Total Revenue

$48,234

+8.2%

Active Users

2,420

-0.4%

Conversion

3.24%

+4.1%

Growth Rate

+24.5%

Revenue Overview

Traffic Source

Desktop

Mobile

Tablet

Recent Plans

Name	Status	Revenue	Growth
Premium Plan	active	$2,400	+12%
Basic Plan	active	$1,200	+8%
Enterprise	pending	$4,800	+24%

Features

25+ Components

Buttons, cards, tables, modals, charts, and more — all with consistent dark theme styling and glass-morphism effects.

Glass Morphism

Beautiful backdrop-blur effects and semi-transparent elements create a modern, sophisticated UI aesthetic.

shadcn Compatible

Install individual components via CLI with full customization support and zero configuration needed.

React 19 Ready

Built for React 19 with TypeScript, Tailwind CSS v4, and tree-shakeable exports for optimal performance.

Quick Start

# Install the package
npm install @smc/darwin-ui

# Or add individual components
npx shadcn add https://darwin-ui.mandalsuraj.com/registry/button.json

import { Button, Card, CardHeader, CardTitle, CardContent } from '@smc/darwin-ui';
import '@smc/darwin-ui/styles';

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome to Darwin UI</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="primary">Get Started</Button>
      </CardContent>
    </Card>
  );
}

Components

Layout

Card, Window, Sidebar

Forms

Button, Input, Select, Checkbox, Switch

Data Display

Table, Badge, Skeleton

Feedback

Modal, Toast, Alert

Charts

Area, Bar, Line, Pie, Donut

Utility

ContextMenu, Image, Upload