Components
Theme Mode Multi Toggle
Three-segment light / dark / system segmented control (Sun / Moon / Monitor) built on ToggleGroup, with icon, icon-inherit, and button appearances.
Installation
npx shadcn@latest add https://ui.saasflare.io/r/theme-mode-multi-toggle.jsonpnpm add @saasflare/uiDemo
"use client"import { ThemeModeMultiToggle } from "@saasflare/ui"/** * The three `appearance` variants side by side. Each toggle wires into * `next-themes` via the docs ThemeProvider, so clicking a segment switches * the whole page between light, dark, and system. */export function Demo() { return ( <div className="flex flex-wrap items-center gap-6"> <ThemeModeMultiToggle appearance="icon" /> <ThemeModeMultiToggle appearance="icon-inherit" radius="sharp" /> <ThemeModeMultiToggle appearance="button" radius="rounded" /> </div> )}API Reference
Prop
Type
Social Auth Button
Provider-branded OAuth sign-in button for all 16 supported identity providers, with official brand logos, an opt-in colorful weight, and built-in loading state (wraps StatefulButton). Includes 16 pre-bound shortcuts (GoogleAuthButton, GitHubAuthButton, …).
Theme Mode Toggle
Two-state light/dark toggle button (Sun/Moon) backed by next-themes, with an SSR seed prop to eliminate the first-paint flash.