# Showcase component add-ins (the "drop in cool components" pass)

Run this AFTER the core Showcase app works. Purpose: show everyone how easy it is to drop in premium, animated components from a component library (21st.dev) and wire them into the real app. This is the component-libraries pillar made live: professional design for about $12 to $19 a month, installed with one command.

Keep it a SECOND pass. Build the working app first, then make it beautiful. That order is itself a lesson.

Pairs with power-design (`power-design-polish.md`), the design skill from the website day: components drop in premium prebuilt pieces, power-design gives the whole app one premium brand language. Run the components first, then power-design last.

## The two components

1. Video Upload Card (isaiahbjork): a slick drag-and-drop video upload card with a vending-machine drop animation. Slots into the board editor as the item-upload UI.
   - Install: `npx shadcn@latest add https://21st.dev/r/isaiahbjork/video-upload-card`
   - Deps: framer-motion, lucide-react, and the shadcn `cn` util.
   - Note: the stock component only SIMULATES upload (it makes a local object URL). To make it real, its file handler has to upload to Convex file storage (request an upload URL, POST the file, store the returned storageId on a new item).

2. Flip Reveal (paceui): a GSAP Flip filterable grid that animates items in and out as you filter. Slots into the client gallery at /b/[slug] for section and favorites/approved filtering.
   - Install: `npx shadcn@latest add https://21st.dev/r/paceui/flip-reveal`
   - Deps: gsap and @gsap/react (the component registers the Flip plugin).

Prereq: the project must be shadcn-initialized (`npx shadcn@latest init`) with Tailwind and the `cn` util at `@/lib/utils`. Reference copies of both component sources are saved in `build-assets/components/` in case the registry URL changes.

## The integration prompt (paste after the core app works)

The core Showcase app works. Now make it look premium by dropping in two components from 21st.dev. Install each, then wire it into the real app. Do not leave them as isolated demos.

1. Video upload card, replacing the current add-item upload UI in the board editor:
   npx shadcn@latest add https://21st.dev/r/isaiahbjork/video-upload-card
   The stock component only simulates upload with a local object URL. Rewire its file handling to the EXISTING Convex upload path (request an upload URL, POST the file, store the returned storageId on a new item), while keeping the drop animation. Install framer-motion if needed. The card uses shadcn theme tokens (bg-card, text-foreground, border-border, bg-destructive) and the cn util at @/lib/utils, so if the project is not shadcn-initialized, run npx shadcn@latest init (or /impeccable init) or map those tokens to the Tailwind v4 theme, or the card renders unstyled.

2. Flip-reveal grid, for the client gallery at /b/[slug]:
   npx shadcn@latest add https://21st.dev/r/paceui/flip-reveal
   Use it so that when the client filters the gallery by section (or toggles favorites-only or approved-only), the items animate into place with the GSAP Flip transition. Install gsap and @gsap/react if needed.

Keep everything else working. Then prove it: upload a video through the new card and confirm it lands in Convex file storage, then open the share link and filter the gallery to watch the items animate.

## Why this is a strong teaching beat

- It is the "swipe file" move from Day 1: find a component you love, copy one command, it installs and builds into your app.
- It cleanly separates make-it-work (the core build) from make-it-beautiful (drop-in components). That is the right order, and naming it teaches the discipline.
- It is the highest visible-polish-per-minute move in the entire day, so it lands as a wow without much time cost.

## Honest caveats for the instructor

- These are real third-party components. Expect a small amount of wiring (installing framer-motion, gsap, @gsap/react; mapping the upload handler to Convex file storage). That friction is part of the lesson: a library component gets you 90 percent, you direct Claude to finish the last 10 percent.
- The video card's animation assumes a single upload at a time. For many items, use it as the add-one-item control, not a bulk uploader.
- Token gotcha: the video card depends on shadcn theme tokens and the cn util. The flip-reveal grid does not (it is plain GSAP + divs with classes you pass in), so it drops in cleaner. If only one component is misbehaving, it is almost always the card's missing shadcn tokens.