PaperSwitch

Machine-like square toggle with bold state contrast.

← square slider, unapologetically mechanical.

Preview

Enable public API

'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

export interface PaperSwitchProps

Copy this file into your project, export its barrel, and then add it to the master UI index.

Step 1.Create this file:
components/ui/paperSwitch/paperSwitch.tsx⎘
Step 2.Create the barrel:
components/ui/paperSwitch/index.ts⎘
Step 3.Add this export in components/ui/index.ts:
```
export * from './paperSwitch'
```

Off

Prop	Type	Default	Description
`checked`	`boolean`	`undefined`	Controlled checked state.
`defaultChecked`	`boolean`	`false`	Initial unchecked/checked value.
`onCheckedChange`	`(checked: boolean) => void`	`undefined`	Callback when state changes.

Good for binary product settings in admin surfaces.

Enable beta banner

<PaperSwitch label="Enable beta banner" />

Keep label explicit so state meaning is obvious.

Hide activity from team

<PaperSwitch label="Hide activity from team" />