Saasflare UI
Components

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.

Installation

npx shadcn@latest add https://ui.saasflare.io/r/theme-mode-toggle.json
pnpm add @saasflare/ui

Demo

"use client"import { ThemeModeToggle } from "@saasflare/ui"/** Light/dark toggle — icon-only and labelled (`showText`) variants. */export function Demo() {    return (        <div className="flex flex-wrap items-center gap-4">            <ThemeModeToggle />            <ThemeModeToggle showText />        </div>    )}

API Reference

Prop

Type

Theme Mode Multi Toggle

Three-segment light / dark / system segmented control (Sun / Moon / Monitor) built on ToggleGroup, with icon, icon-inherit, and button appearances.

Button

The core action element. Three orthogonal axes — variant × intent × size — plus loading and icon slots.

On this page

InstallationDemoAPI Reference