Toggle

Two-state button.

Vinyl styling: Pressed state uses the cyan secondary colour.

Installation

npx shadcn@latest add @vinyl/toggle

The @vinyl registry URL in components.json decides whether you get the web or the native version (see installation for web / native).

<Toggle variant="outline" aria-label="Loop">Loop</Toggle>

Same API as shadcn/ui's Toggle on the web, and React Native Reusables' Toggle on native. Vinyl only changes styling and motion.

Textarea

Multi-line text input.

Toggle Group

A set of toggles, single or multiple.