Split

The next appearance opens from a slim center seam.

$npx shadcn@latest add @silicon-ui/theme-switch-split

themeappearancemotion

Installation

$npx shadcn@latest add @silicon-ui/theme-switch-split

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/theme-switch/theme-switch.tsx
- components/silicon-ui/theme-switch/theme-switch.module.css
- components/silicon-ui/button/button.tsx shared
- components/silicon-ui/button/button.module.css shared
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { ThemeSwitch } from "@/components/silicon-ui/theme-switch/theme-switch";

Prop	Type	Default
`theme*`	`Theme` `"light""dark"`	—
`onThemeChange*`	`(next: Theme, variant: ThemeSwitchVariant, trigger: HTMLElement) => void`	—
`variant`	`ThemeSwitchVariant` `"reveal""eclipse""split""rise"`	`"reveal"`
`label`	`string`	—
`iconOnly`	`boolean`	`false`