Components
Page header
The opening text hierarchy for an application route, with a readable measure for supporting copy.
npx shadcn@latest add https://gpc.example.com/r/page-header.jsonSession 1: AI Foundations
The habits that separate a useful answer from a generic one. Every prompt below is one you can run on real GPC work today.
Gradient background
A responsive WebGL color field for branded image wells and ambient surfaces. It pauses offscreen and renders a static first frame when reduced motion is preferred.
npx shadcn@latest add https://gpc.example.com/r/gpc-gradient-background.jsonStat cards
A summary row. Numbers are tabular so they align down the column, and each delta says which way it moved in words as well as color.
npx shadcn@latest add https://gpc.example.com/r/stat-cards.json184
12 more than last month
61%
4 points down
27
5 more than last month
Data table
A table that only renders rows breaks the first time the API is slow. All four states are here because all four will happen.
npx shadcn@latest add https://gpc.example.com/r/data-table.json| Team | Owner | Stage | Seats |
|---|---|---|---|
| Revenue Ops | Priya Raman | Maintaining | 42 |
| Customer Success | Marcus Bell | Adopting | 61 |
| Legal | Dana Okafor | Blocked | 12 |
| Field Marketing | Sam Iversen | Deploying | 28 |
| Team | Owner | Stage | Seats |
|---|---|---|---|
Settings form
One high-emphasis action. Validation lands beside the field it belongs to, and the save result is announced in place rather than in a toast that vanishes.
npx shadcn@latest add https://gpc.example.com/r/settings-form.jsonDestructive flow
AlertDialog, never Dialog. The confirm button names the action instead of saying Confirm, and the outcome is undoable rather than final.
npx shadcn@latest add https://gpc.example.com/r/destructive-dialog.jsonDownload list
A compact list of downloadable materials. The whole row is the action, and the file type stays visible so nobody downloads the wrong format.
npx shadcn@latest add https://gpc.example.com/r/download-list.jsonPrompt explorer
A continuous prompt library built for ordinary page scrolling. Every entry uses the shared prompt box, with an icon-only copy action and consistent internal spacing.
npx shadcn@latest add https://gpc.example.com/r/prompt-explorer.jsonCanva embed
A responsive presentation embed with a direct Canva fallback. The iframe is lazy-loaded, remains 16:9, and keeps a descriptive title for assistive technology.
npx shadcn@latest add https://gpc.example.com/r/canva-embed.jsonSkill library
A searchable skill catalog with reusable categories and an accessible detail dialog. Purpose and category replace release metadata that does not help someone choose a skill.
npx shadcn@latest add https://gpc.example.com/r/skill-library.jsonAuth screen
Centred, one primary action, a real label on every field. The alternate path is stated rather than hidden behind an icon.
npx shadcn@latest add https://gpc.example.com/r/sign-in-form.json