Vinyl UI

Popover

Floating panel anchored to a trigger.

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

Installation

npx shadcn@latest add @vinyl/popover

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

Usage

<Popover>
  <PopoverTrigger asChild><Button variant="outline">Track info</Button></PopoverTrigger>
  <PopoverContent>4:12 · 118 BPM</PopoverContent>
</Popover>

API

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

On this page