Switch

A settings row with a 22px pill switch, label and helper text, the whole row clickable.

TypeScript Source with Startup & Business plans Light & dark

Email notificationsGet a summary when a deploy finishes.Usage alertsWarn me at 80% of the plan limit.

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { SwitchRow } from '@/components/component-kit/items/switch-row';
2
3export function Example() {
4  return (
5    <SwitchRow
6      label="Email notifications"
7      description="Get a summary when a deploy finishes."
8      defaultChecked
9    />
10  );
11}

Props

Switch properties
Prop	Type	Default	Description
`label`	`ReactNode`	`—`	Row label.
`description`	`ReactNode`	`—`	Helper text under the label.
`checked`	`boolean`	`—`	Controlled state; use with onCheckedChange.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { SwitchRow } from '@/components/component-kit/items/switch-row';
2
3export function Example() {
4  return (
5    <SwitchRow
6      label="Email notifications"
7      description="Get a summary when a deploy finishes."
8      defaultChecked
9    />
10  );
11}

Prop

Type

Default

Description

label

ReactNode

—

Row label.

description

ReactNode

—

Helper text under the label.

checked

boolean

—

Controlled state; use with onCheckedChange.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { SwitchRow } from '@/components/component-kit/items/switch-row';
2
3export function Example() {
4  return (
5    <SwitchRow
6      label="Email notifications"
7      description="Get a summary when a deploy finishes."
8      defaultChecked
9    />
10  );
11}

Prop

Type

Default

Description

label

ReactNode

—

Row label.

description

ReactNode

—

Helper text under the label.

checked

boolean

—

Controlled state; use with onCheckedChange.

Switch

A settings row with a 22px pill switch, label and helper text, the whole row clickable.

TypeScript Source with Startup & Business plans Light & dark

Email notificationsGet a summary when a deploy finishes.Usage alertsWarn me at 80% of the plan limit.

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { SwitchRow } from '@/components/component-kit/items/switch-row';
2
3export function Example() {
4  return (
5    <SwitchRow
6      label="Email notifications"
7      description="Get a summary when a deploy finishes."
8      defaultChecked
9    />
10  );
11}

Props

Switch properties
Prop	Type	Default	Description
`label`	`ReactNode`	`—`	Row label.
`description`	`ReactNode`	`—`	Helper text under the label.
`checked`	`boolean`	`—`	Controlled state; use with onCheckedChange.