@saas-factory/ui-dark

A sophisticated dark-mode-first design system for SaaS applications. Perfect for developer tools, analytics dashboards, and tech-forward products. Built with high contrast, bold typography, and modern dark aesthetics.

Design Philosophy

• Dark Mode First: Optimized for low-light environments
• High Contrast: Excellent readability with WCAG AAA compliance
• Developer-Friendly: Designed for technical audiences
• Bold Typography: Statement-making fonts and sizes
• Neon Accents: Vibrant accent colors on dark backgrounds
• Modern Aesthetic: Contemporary tech company feel

Key Features

✅ 50+ Pre-built Components ✅ Complete Dashboard Templates ✅ Analytics-Ready (charts, metrics, KPIs) ✅ Terminal-Inspired components (optional monospace theme) ✅ Accessibility First (WCAG AAA) ✅ TypeScript Full Support ✅ Customizable Accent Colors ✅ Integrated Icons (Heroicons) ✅ Performance Optimized ✅ Responsive Design

Installation

npm install @saas-factory/ui-dark
pnpm add @saas-factory/ui-dark

Quick Start

import { DarkThemeProvider, Button, Card } from '@saas-factory/ui-dark';

export default function App() {
  return (
    <DarkThemeProvider accentColor="cyan">
      <Card>
        <Card.Header>
          <Card.Title>Welcome</Card.Title>
        </Card.Header>
        <Card.Body>
          <Button>Click me</Button>
        </Card.Body>
      </Card>
    </DarkThemeProvider>
  );
}

Accent Colors

Choose from predefined accent colors:

// Cyan, Purple, Green, Pink, Orange, Indigo
<DarkThemeProvider accentColor="cyan">

Or custom colors:

<DarkThemeProvider 
  accentColor="custom"
  customColor="#FF00FF"
>

Components

All components from @saas-factory/ui-minimal plus dark-specific variants:

• Gradient Buttons - Colorful gradient button variants
• Neon Cards - Cards with neon border accents
• Code Block - Syntax-highlighted code component
• Data Metrics - Large metric display cards
• Status Indicator - LED-style status lights
• Advanced Tables - Data tables with dark theme optimizations

Templates

• Analytics Dashboard - Metrics, charts, time-series data
• Developer Console - Command-line inspired interface
• Settings Panel - Complex configuration interfaces

Performance

Optimized for:

• Reduced eye strain in dark environments
• Fast rendering with CSS variables
• Smooth transitions and animations
• Minimal JavaScript (component library)

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

License

MIT