Hover Card

Preview content on hover (press on native).

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

Installation

npx shadcn@latest add @vinyl/hover-card

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

Usage

<HoverCard>
  <HoverCardTrigger asChild><Button variant="link">@nightdrive</Button></HoverCardTrigger>
  <HoverCardContent>Synthwave, all night.</HoverCardContent>
</HoverCard>

API

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

Dropdown Menu

Menu of actions triggered by a button.

Input

Text field with a monospaced entry and a cyan focus glow.

On this page

Installation Usage API