Generate Modern Dark UI Components with TypeScript

Provides a complete dark-themed React UI starter built on Tailwind CSS and Framer Motion, targeting dashboards, admin panels, and other data-rich applications. It ships a full Tailwind color system (brand purple #8251EE with hover/light/subtle variants, a six-step neutral background scale from bg1 at hsl(240,6%,10%) to bg6, plus text/border/status/dataviz palettes), a globals.css with matching CSS custom properties, glassmorphism utility classes (.glass, .glass-card, .glass-panel, .glass-overlay, .glass-input, built from backdrop-blur plus translucent white or black backgrounds), and Framer Motion animation variants (fadeIn, slideUp, scaleOnHover, staggerContainer/staggerItem) plus a reusable PageTransition wrapper. It also defines the project's file structure (components/ui, components/layout, styles/globals.css), an index.html with favicon, PWA, Open Graph, and Twitter Card meta tags, a site.webmanifest, and mobile touch-target (44px minimum) and safe-area-inset spacing tokens.

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

Use it to scaffold a new dark-mode React admin panel, dashboard, or other data-dense interface where a cohesive dark palette, glassmorphism accents, and consistent motion are wanted from day one - it is a starting stack of tokens and patterns, not a component library to install as a dependency. It targets Vite, React 18, TypeScript, React Router 6, Tailwind 3, and Framer Motion 11 specifically; a project on a different bundler, styling system, or animation library would need to translate the tokens and patterns rather than reuse the files directly. It also assumes dark mode as the only theme (html { color-scheme: dark }) - it is not a light/dark toggle system.

Inputs are the design tokens defined once in tailwind.config.js and globals.css (colors, radii, shadows, animation keyframes); outputs are the derived utility classes and component patterns consumed throughout the app, such as bg-neutral-bg1 text-text-primary for the page background, text-status-error for error states, and .glass-card for a blurred translucent card. Framer Motion variant objects (fadeIn, slideUp, scaleOnHover, staggerContainer) are spread directly onto motion.div props to drive enter, exit, and hover animation without re-deriving the transition values each time.

Built on React 18, React Router 6, Tailwind CSS 3, Framer Motion 11, clsx for conditional class merging, and Vite 5 as the build tool, all pinned to specific major versions in the stack table. Font loading is self-hosted via @font-face declarations for Segoe UI (regular, bold, italic, bold-italic) rather than a web font service.

Frontend developers starting a new dark-themed dashboard or admin panel on the React/Vite/Tailwind stack who want a ready-made color system, glass-effect utilities, and animation variants instead of designing a dark palette and motion language from scratch.