Vinyl UI

Card

Panel with a thick border and a hard retro shadow.

Mixtape
C90 cassette · 45 min per side
Side A: synths. Side B: more synths.

Installation

npx shadcn@latest add @vinyl/card

Usage

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';

<Card>
  <CardHeader>
    <CardTitle>Mixtape</CardTitle>
    <CardDescription>C90 cassette</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>…</CardFooter>
</Card>

API

Parts: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter. On native, the shadow is a thicker bottom/right border.

Button

Raised retro button with a hard shadow that collapses on press.

Checkbox

Binary choice control.

On this page

InstallationUsageAPI