# Toggle On
URL: https://remocn.dev/docs/ui-blocks/toggle-on

A large switch flips on, the stage lights up, and a feature label and its state write in.

- Install: `npx shadcn@latest add @remocn/toggle-on`
- Vibe: playful
- Natural length: 56f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/toggle-on
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ToggleOn } from "@/components/remocn/toggle-on";

const ToggleOnScene = () => (
  <ToggleOn
    label="Auto-captions"
    state="On"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="ToggleOn"
    component={ToggleOnScene}
    durationInFrames={105}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A big switch presses and flips on, the surrounding stage brightens, and the `label` and `state` words write in beside it. Pass your own `label` and `state` text; it ships light and dark through `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `label` | `string` | `"Auto-captions"` | Feature name written in beside the switch. |
| `state` | `string` | `"On"` | State word written in after the label, such as On. |
| `accent` | `string` | `"#3B5BFD"` | Color of the switch track when on. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships light and dark. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A feature beat about a single setting being enabled, such as auto-captions or dark mode.
- A short, punchy proof that a feature is one click away.
- A tight cutaway between wider UI scenes that needs an unmistakable on state.

## Don't use when
- The toggle is part of a real settings screen with several rows — use `settings-toggle-flow`.
- You want a small switch inside a live UI rather than a hero object — use `switch`.
- The value is a number that turns up, not a boolean — use `rotary-dial`.