# Split

> The next appearance opens from a slim center seam.

- Type: Component (actions)
- Access: Free, open source
- Page: https://uiarc.dev/components/theme-switch-split
- Markdown: https://uiarc.dev/components/theme-switch-split/markdown
- Registry item: https://uiarc.dev/r/theme-switch-split.json
- Source file: `registry/components/theme-switch/theme-switch.tsx`
- Dependencies: motion, lucide-react
- Keywords: theme, appearance, motion, react theme switch, split theme transition, dark mode toggle, view transition split, theme toggle animation

## When to use

- Centered layouts where the theme should open symmetrically from a middle seam.
- Pages where the switch position varies, since the split does not depend on where the button sits.

## When not to use

- Use theme-switch for a reveal that grows from the button itself.
- Use theme-switch-rise for the calmest option in product UI.

## Installation

### CLI

Run one of these in a project set up with `shadcn init`:

```bash
npx shadcn@latest add @uiarc/theme-switch-split
pnpm dlx shadcn@latest add @uiarc/theme-switch-split
yarn dlx shadcn@latest add @uiarc/theme-switch-split
bunx --bun shadcn@latest add @uiarc/theme-switch-split
```

The `@uiarc` name needs `"registries": { "@uiarc": "https://uiarc.dev/r/{name}.json" }` in `components.json`. Without it, use the full URL:

```bash
npx shadcn@latest add https://uiarc.dev/r/theme-switch-split.json
```

### Manual

1. Install the dependencies:

```bash
npm install motion lucide-react
```

2. Copy the source into your project. Main file: `registry/components/theme-switch/theme-switch.tsx`

   The source is in the registry item: https://uiarc.dev/r/theme-switch-split.json

3. Arc imports use the `@/` alias for `registry/` and `lib/`. Keep the same folders or update the import paths.

## Usage

```tsx
import { ThemeSwitch } from "@/registry/components/theme-switch/theme-switch";

<ThemeSwitch
  theme={theme}
  variant="split"
  onThemeChange={(next, variant, trigger) => runThemeTransition(next, variant, trigger)}
/>
```

## API reference

### ThemeSwitch

A secondary Button that swaps a sun and moon icon and reports the next theme. The page transition itself is yours to run.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `theme` (required) | `"light" \| "dark"` | – | The current theme. Drives the icon and aria-pressed. |
| `onThemeChange` (required) | `(next: Theme, variant: ThemeSwitchVariant, trigger: HTMLElement) => void` | – | Called on press with the opposite theme, the variant, and the button, so the page transition can start from it. |
| `variant` | `"reveal" \| "eclipse" \| "split" \| "rise"` | `"reveal"` | Names the page transition and sets the small icon nudge that matches it. |
| `label` | `string` | – | Accessible name. Defaults to "Switch to dark mode" or "Switch to light mode". |
| `iconOnly` | `boolean` | `false` | Hides the "Switch theme" text and renders a 38px square button. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Toggles the theme. |

## Accessibility

- Same button as theme-switch: aria-pressed reflects dark mode and the label names the next theme.
- Keep the split reveal off for reduced motion and swap the theme directly.

## Motion

- variant="split": the next appearance opens from a slim center seam; run it in onThemeChange with a view transition.
- The icon shifts 1px right in dark mode.
- Reduced motion removes the nudge and swaps the icon with a fade.

## Responsive behavior

- The labelled button fits a desktop top bar; pass iconOnly for a fixed 38px square on narrow headers and mobile.
- Hover styles apply only on hover-capable fine pointers, so touch taps do not leave a stuck hover state.

## Performance

- The button itself is tiny: one icon swap on a spring, and the first theme after hydration applies without animating.
- The page transition is yours; a full-page view transition snapshots the whole document, so keep it short and skip it for reduced motion.

## Notes for AI

- Select with variant="split". The prop only styles the icon nudge and is passed back to onThemeChange; the page animation is your code.
- Split is symmetric and does not depend on where the button sits, so it suits centered layouts.

## Related

- [Theme switcher](https://uiarc.dev/components/theme-switch/markdown): Four smooth ways to move between light and dark appearance.
- [Eclipse](https://uiarc.dev/components/theme-switch-eclipse/markdown): The next appearance crosses the page like an eclipse.
- [Rise](https://uiarc.dev/components/theme-switch-rise/markdown): The next appearance rises into place.

## Guidance for AI tools

Split: The next appearance opens from a slim center seam. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt