Blocks
Theme toggle
Controlled theme controls with a three-value switch, binary switch, cycle button, and dropdown.
Composition
How the block recipe nests its exported parts and installed agent primitives.
Controlled controls
Every exported control receives value and onValueChange from the host app.
Theme controls├── ThemeSegmentedSwitch│ ├── input type="radio"│ └── icon / label├── ThemeSwitch│ └── Switch├── ThemeToggle│ └── Button└── ThemeDropdown ├── MenuTrigger └── MenuContent └── MenuItemnpx shadcn@latest add http://127.0.0.1:3000/r/refined/theme-toggle-block.jsonUsage
"use client";import { type ThemeMode, ThemeSegmentedSwitch } from "@/components/refined-ui/blocks/theme-toggle";type ThemeAdapter = { theme: string | undefined; setTheme: (value: string) => void;};function toThemeMode(value: string | undefined): ThemeMode { if (value === "light" || value === "dark" || value === "system") return value; return "system";}export function AppearanceControl({ theme, setTheme }: ThemeAdapter) { return <ThemeSegmentedSwitch value={toThemeMode(theme)} onValueChange={(value) => setTheme(value)} />;}Agents used
The block command installs the recipe and these agent source files in one pass.
Block recipe
src/registry/blocks/refined/theme-toggle.tsxSwitch slot
src/registry/sources/refined/ui/switch.tsxMenu slot
src/registry/sources/refined/ui/menu.tsxButton slot
src/registry/sources/refined/ui/button.tsx