Dark Mode UI Components for SaaS: Button, Input, Card, Badge (Tailwind CSS v4)

This post presents four essential dark-mode-ready UI components (Button, Input, Card, Badge) for SaaS dashboards, built with Tailwind CSS v4's new CSS-first dark mode approach. It details the setup using @custom-variant and next-themes in Next.js, and provides a full Button implementation using class-variance-authority (cva) for type-safe variant management. These components are shipped as part of LaunchKit, a Next.js 16 SaaS starter kit.