Toggle

A two-state key. Pressed: a small internal accent mark appears at the bottom and grows both ways until the ends meet at the top: custom detail, not a border or fill.

Draw

draw a card

$npx shadcn@latest add @clow/toggle

First time? Point @clow at the registry

Once per project, add the registry to your components.json. Then draw any card by name.

"registries": {
  "@clow": "https://clow.cards/r/{name}.json"
}

Full setup →

Playground

props

size

<Toggle />

Examples

basic

sizes

Props

prop	type	default
size	sm \| md \| lg	md