Vinyl UI

Dropdown Menu

Menu of actions triggered by a button.

Vinyl styling: Retro-shadow panel that opens with a quick barn-door wipe.

Installation

npx shadcn@latest add @vinyl/dropdown-menu

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

Usage

<DropdownMenu>
  <DropdownMenuTrigger asChild><Button variant="outline">Deck options</Button></DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Playback</DropdownMenuLabel>
    <DropdownMenuCheckboxItem checked>Dolby NR</DropdownMenuCheckboxItem>
    <DropdownMenuItem>Clean heads</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

API

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

Dialog

Modal that opens with a box wipe and switches off like a CRT.

Hover Card

Preview content on hover (press on native).

On this page

InstallationUsageAPI