Dark Theme React UI: Building Elegant Dashboards for AI Agents

Introduction

Dark themes aren't just aesthetic—they reduce eye strain, improve focus on data, and look professional in dashboards and analytics tools. But building dark UIs that feel polished requires more than background: #000. You need thoughtful color hierarchies, glass effects, and tasteful animations.

This skill provides a complete dark theme system for React applications, built on Tailwind CSS with Framer Motion animations and glassmorphism effects. It's designed for AI agent dashboards, admin panels, and data-rich interfaces.

What This Skill Does

The frontend-ui-dark-ts skill delivers a modern dark-themed React UI system with:

• Carefully crafted color palettes for dark backgrounds, text, and borders


• Glassmorphism components using backdrop blur and transparency


• Framer Motion animation patterns for smooth transitions


• Mobile-responsive design with safe area support


• Type-safe TypeScript throughout


• Tailwind CSS utility classes for rapid development

The system includes design tokens, component patterns, page layouts, and animation variants—everything needed to build professional dark-mode interfaces.

This isn't a component library you install—it's a reference implementation you adapt to your needs.

Getting Started

Initialize a React + TypeScript project with Vite:

npm create vite@latest my-dashboard -- --template react-ts
cd my-dashboard
npm install framer-motion clsx react-router-dom
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure Tailwind with the dark theme tokens (see the full config in the skill documentation). Key additions include:

// tailwind.config.js excerpt
theme: {
  extend: {
    colors: {
      brand: {
        DEFAULT: '#8251EE',  // Purple brand color
        hover: '#9366F5',
        subtle: 'rgba(130, 81, 238, 0.15)',
      },
      neutral: {
        bg1: 'hsl(240, 6%, 10%)',   // Darkest background
        bg2: 'hsl(240, 5%, 12%)',   // Card backgrounds
        bg3: 'hsl(240, 5%, 14%)',   // Elevated surfaces
      },
      text: {
        primary: '#FFFFFF',
        secondary: '#A1A1AA',
        muted: '#71717A',
      },
    },
  },
},

Add the glass effect utilities to your CSS:

/* globals.css */
.glass-card {
  @apply backdrop-blur-md bg-white/5 border border-white/10 rounded-xl;
}

.glass-panel {
  @apply backdrop-blur-lg bg-black/40 border border-white/5;
}

Build your first component:

import { motion } from 'framer-motion';

export function Dashboard() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className="p-6 space-y-6"
    >
      <h1 className="text-2xl font-semibold text-text-primary">
        Dashboard
      </h1>
      
      <div className="glass-card p-6">
        <h2 className="text-lg font-semibold text-text-primary">
          Analytics
        </h2>
        <p className="text-text-secondary mt-2">
          View your metrics here.
        </p>
      </div>
    </motion.div>
  );
}

Key Features

Hierarchical Color System: Six levels of background neutrals (bg1 through bg6) create depth through subtle contrast. Text colors (primary, secondary, muted) ensure readability at every hierarchy level.

Glassmorphism Effects: Pre-configured utility classes for glass cards, panels, overlays, and inputs. Backdrop blur combined with low-opacity backgrounds creates that frosted glass effect.

Framer Motion Integration: Animation variants for common patterns—fade in, slide up, stagger children, scale on hover. Smooth transitions without hand-coding spring physics.

Mobile Responsive: Safe area insets for notched devices, minimum touch targets (44px per Apple/Google guidelines), viewport-fit support for edge-to-edge layouts.

Design Tokens: All colors, spacing, and typography defined as CSS custom properties and Tailwind config. Change the brand color once, see it everywhere.

Typography Scale: Predefined text sizes for page titles, section headers, body text, captions, and labels. Consistent hierarchy across your application.

Status Colors: Success (green), warning (yellow), error (red), info (blue) colors for states and alerts. Data visualization palette for charts.

Accessibility: Focus ring styles, appropriate contrast ratios, semantic HTML structure. Keyboard navigation works out of the box.

Usage Examples

Animated Card Grid:

import { motion } from 'framer-motion';

const staggerContainer = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.05 }
  }
};

const staggerItem = {
  hidden: { opacity: 0, y: 10 },
  visible: { opacity: 1, y: 0 }
};

export function CardGrid() {
  return (
    <motion.div
      variants={staggerContainer}
      initial="hidden"
      animate="visible"
      className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
    >
      {items.map((item) => (
        <motion.div
          key={item.id}
          variants={staggerItem}
          className="glass-card p-6 hover:bg-white/10 transition-colors"
        >
          <h3 className="text-base font-medium text-text-primary">
            {item.title}
          </h3>
          <p className="text-sm text-text-secondary mt-2">
            {item.description}
          </p>
        </motion.div>
      ))}
    </motion.div>
  );
}

Glass Modal with Backdrop:

import { motion, AnimatePresence } from 'framer-motion';

export function Modal({ isOpen, onClose, children }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <>
          {/* Backdrop */}
          <motion.div
            className="fixed inset-0 glass-overlay z-40"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
          />
          
          {/* Modal content */}
          <motion.div
            className="fixed inset-0 flex items-center justify-center z-50 p-4"
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.95 }}
            transition={{ duration: 0.2 }}
          >
            <div className="glass-card p-6 max-w-md w-full">
              {children}
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
}

Interactive Button with Hover Animation:

import { motion } from 'framer-motion';

export function Button({ children, onClick }) {
  return (
    <motion.button
      className="px-4 py-2 bg-brand text-white rounded-lg font-medium"
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: 'spring', stiffness: 400, damping: 17 }}
      onClick={onClick}
    >
      {children}
    </motion.button>
  );
}

Page Transition Wrapper:

import { motion } from 'framer-motion';

export function PageTransition({ children }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ duration: 0.3, ease: 'easeOut' }}
    >
      {children}
    </motion.div>
  );
}

// Use with React Router
<Routes>
  <Route path="/" element={<PageTransition><Dashboard /></PageTransition>} />
  <Route path="/settings" element={<PageTransition><Settings /></PageTransition>} />
</Routes>

Glass Sidebar Panel:

export function Sidebar() {
  return (
    <aside className="glass-panel w-64 h-screen p-4 border-r border-border-subtle">
      <nav className="space-y-2">
        <NavLink to="/" className="block px-3 py-2 rounded-lg text-text-secondary hover:bg-white/10 hover:text-text-primary transition-colors">
          Dashboard
        </NavLink>
        <NavLink to="/analytics" className="block px-3 py-2 rounded-lg text-text-secondary hover:bg-white/10 hover:text-text-primary transition-colors">
          Analytics
        </NavLink>
        <NavLink to="/settings" className="block px-3 py-2 rounded-lg text-text-secondary hover:bg-white/10 hover:text-text-primary transition-colors">
          Settings
        </NavLink>
      </nav>
    </aside>
  );
}

Best Practices

Use the color hierarchy intentionally. bg1 is for page backgrounds, bg2 for cards, bg3 for elevated elements. This creates depth through subtle contrast rather than harsh borders.

Limit animation to intentional moments—page transitions, user interactions, data updates. Don't animate everything or the UI feels chaotic.

Maintain 4.5:1 contrast ratio minimum for body text per WCAG AA standards. The predefined text colors meet this against their intended backgrounds.

Use glass effects sparingly on components over complex backgrounds. Too much blur everywhere can feel gimmicky.

Test on mobile devices to verify safe area insets work correctly. Notched devices need padding to avoid content under the notch.

Leverage Tailwind's responsive classes (md:, lg:) to adapt layouts across screen sizes. Mobile-first design prevents desktop-only assumptions.

Keep animations under 300ms for UI interactions. Longer feels sluggish, shorter feels jarring.

When to Use This Skill

Use this dark theme system when building:

• AI agent dashboards and control panels


• Data analytics applications


• Admin interfaces and back-office tools


• Developer tools and monitoring systems


• Creative applications where dark themes reduce distraction

The aesthetic works particularly well for professional tools where users spend extended periods focused on data.

When NOT to Use This Skill

Don't use dark themes for:

• Content-heavy reading applications (light backgrounds reduce eye strain for text)


• Medical or healthcare interfaces (regulatory requirements often specify light themes)


• Applications targeting older demographics (many prefer light themes)


• Contexts where accessibility requires light mode

Always offer a theme toggle when possible—user preference matters more than your design opinion.

Related Skills

This UI system pairs well with:

• FastAPI Router - Backend APIs for your dashboard
• React TypeScript - Type-safe React patterns
• Zustand State Management - Client state for React apps
• Data Visualization - Chart libraries for analytics

For component libraries:

• Radix UI - Unstyled accessible components
• Headless UI - Tailwind-first components

Source

This agentic skill is part of Microsoft's Agentic AI Skills collection:

GitHub Repository: microsoft/agentic-ai-skills

The repository includes complete Tailwind configuration, component examples, design token documentation, and mobile responsive patterns.

---

Dark themes aren't just about inverting colors—they're about hierarchy, depth, and polish. This system provides the foundation: glass effects, smooth animations, and thoughtful color scales that make dashboards feel professional.