# Shadcn Color Theme

> Toggle group for color theme

- Type: example, free and open source (MIT)
- Component: [Toggle Group](https://reui.io/components/toggle-group.md)
- Page: https://reui.io/components/toggle-group/c-toggle-group-10
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/toggle-group.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/toggle-group.md
- MCP: `get_example("c-toggle-group-10")`
- Registry item: https://reui.io/r/styles/base-nova/c-toggle-group-10.json
- Uses: Toggle Group

## Best for

Light, Dark and System choices with an icon and label each in outline, Light picked on load

## Agent notes

- `defaultValue` starts every visit on light; seed it from the saved theme so a returning dark mode user sees Dark picked

## When not to use

- A theme choice tucked into an account popup that opens from the avatar: use [Dropdown Menu](https://reui.io/components/dropdown-menu.md) (`get_component("dropdown-menu")`)

## Install

```bash
npx shadcn@latest add @reui/c-toggle-group-10
```

## About Shadcn Toggle Group

### When to use

- Editor formatting and alignment controls kept as one set, such as bold, italic, underline or justify
- View, column layout and theme switchers where the pressed item holds the current choice
- Short option rows for a time range, status, sort order, billing period, channels or device settings

### When not to use

- Related actions such as export, zoom or playback joined in one strip with no pressed state: use [Button Group](https://reui.io/components/button-group.md) (`get_component("button-group")`)
- A single on or off control such as bookmark or mute that stands on its own: use [Toggle](https://reui.io/components/toggle.md) (`get_component("toggle")`)
- Labelled settings in a list, each flipped on or off beside its own text: use [Switch](https://reui.io/components/switch.md) (`get_component("switch")`)

### Agent notes

- The base twin picks one item unless `multiple` is set and always takes an array `defaultValue`; the radix twin needs `type` single or multiple
- No example passes `value` to `ToggleGroup` or reads a change back, so the pick stays inside the group; control it to act on the choice
- A second click on a pressed `ToggleGroupItem` releases it in both twins, so even a single choice group can end with nothing picked

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.