Installation

Get Playset running in your project. Two paths: a one-line shadcn registry install, or copy the file manually.

Prerequisites

A Next.js project with Tailwind CSS v4 and shadcn/ui already configured. The component is themed via standard CSS variables and works in any framework that supports React, but the install command below assumes the shadcn CLI.

Option A — shadcn registry

The component is published as a shadcn registry item at /r/playset-card.json. Once this site is deployed at playset.dev (or any host you point at it), the CLI can pull it directly:

terminalbash

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

If you're self-hosting, replace the URL with https://your-domain.com/r/playset-card.json.

Option B — manual

Copy components/playset-card.tsx from the GitHub repo into your project, then install the peer dependencies.

terminalbash

1# 1. Copy components/playset-card.tsx into your project
2# 2. Install peer deps
3npm install lucide-react next-themes
4# 3. Add the keyframes below to your globals.css

Dependencies

terminalbash

1npm install lucide-react next-themes

Animations

Add the glow keyframes to your globals.css. The reduced-motion block disables the rotating glow for users who've opted out of animation.

globals.csscss

1@keyframes glow-rotate {
2  from { transform: translate(-50%, -50%) rotate(0deg); }
3  to { transform: translate(-50%, -50%) rotate(360deg); }
4}
5 
6@keyframes glow-pulse {
7  0%, 100% { opacity: 0.6; }
8  50% { opacity: 1; }
9}
10 
11@media (prefers-reduced-motion: reduce) {
12  [data-card-glow] { animation: none !important; }
13}