Chat Components

Theme Toggle

Circular light/dark switch on next-themes. Floats in the page corner by default, or inlines into any bar.

Open in

Installation

npx shadcn@latest add miskibin/chat-components/theme-toggle

Usage

import { ThemeToggle } from "@/components/ui/theme-toggle"

export function Header() {
  return <ThemeToggle floating={false} />
}

Examples

Square it off, tint it, watch the switch

Size, radius, and color are all className. The icon only renders after hydration, so the server HTML and the first client paint always agree — the button reserves its size either way. onClick runs before the flip, so preventDefault() in it keeps the theme where it is.

Notes

API reference

ThemeToggle

floatingboolean = true
Fixed chip at top-3 right-3. Pass false to place it inline.
classNamestring
Merged last — size, radius, and colors are all yours.
onClickReact.MouseEventHandler
Runs before the theme flips. Call preventDefault() to keep the theme unchanged.

Data slots

Every part below is addressable from a parent, so you can restyle internals without forking the component.

theme-toggle