4 Dark Mode UI Components Every SaaS App Needs (Tailwind CSS v4 + React)

You don't need a full design system on day one. These 4 components — Button, Input, Card, Badge — cover 90% of a SaaS dashboard UI. Here they are, built with Tailwind CSS v4 and React. 1. Button A button with 5 variants, 3 sizes, and a loading state: import { forwardRef , ButtonHTMLAttributes } from " react " ; import { cn } from " @/lib/utils " ; // clsx + tailwind-merge interface ButtonProps extends ButtonHTMLAttributes < HTMLButtonElement > { variant ?: " primary " | " secondary " | " ghost " | " danger " | " outline " ; size ?: " sm " | " md " | " lg " ; loading ?: boolean ; } export const Button = forwardRef < HTMLButtonElement , ButtonProps > ( ({ className , variant = " primary " , size = " md " , loading , children , disabled , ... props }, ref ) => ( < button ref = { ref } disabled = { disabled || loading } className = { cn ( " inline-flex items-center justify-center font-medium rounded-lg transition-all active:scale-[0.98] disabled:opacity-50 disabled:pointer-events-none " ,