Installation

Prerequisites

Playset requires a Next.js project with Tailwind CSS and shadcn/ui configured.

Install the component

npx shadcn@latest add https://playset.dev/r/playset-card.json

Manual Installation

Copy the playset-card.tsx component into your components folder.

Dependencies

npm install lucide-react next-themes

CSS Variables

Add the glow animation keyframes to your globals.css:

@keyframes glow-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}