|
| 1 | +--- |
| 2 | +title: Gamification UI Kit |
| 3 | +--- |
| 4 | + |
| 5 | +<Frame> |
| 6 | + <img |
| 7 | + height="200" |
| 8 | + width="100%" |
| 9 | + noZoom |
| 10 | + src="../assets/uikit/hero.png" |
| 11 | + /> |
| 12 | +</Frame> |
| 13 | + |
| 14 | +Trophy's Gamification UI Kit is a component library built on top of [shadcn/ui](https://ui.shadcn.com) that helps you build gamification experiences faster. It provides pre-built components for streaks, achievements, leaderboards, points, and more. |
| 15 | + |
| 16 | +The UI Kit is designed to work with any gamification platform, but all props and data shapes are designed intentionally to work seamlessly with Trophy. |
| 17 | + |
| 18 | +## Prerequisites {#prerequisites} |
| 19 | + |
| 20 | +- **React 18+** — Components are client-side React. |
| 21 | +- **Tailwind v4+** — Styling is Tailwind utility classes. Configure Tailwind so those classes compile, and add the [semantic theme tokens](https://ui.trophy.so/docs/styles) Trophy expects (or map them to your design system). |
| 22 | +- **shadcn/ui structure** — Maintain a project that already follows the [shadcn/ui](https://ui.shadcn.com/docs/installation) setup (`components.json`, aliases, and optional `src/` layout). |
| 23 | + |
| 24 | +## Getting Started {#getting-started} |
| 25 | + |
| 26 | +Components are available via the shadcn CLI: |
| 27 | + |
| 28 | +```bash |
| 29 | +npx shadcn@latest add https://ui.trophy.so/<component> |
| 30 | +``` |
| 31 | + |
| 32 | +For example, to install the Streak Badge component: |
| 33 | + |
| 34 | +```bash |
| 35 | +npx shadcn@latest add https://ui.trophy.so/streak-badge |
| 36 | +``` |
| 37 | + |
| 38 | +Once a component is installed, you can import and use it like any other React component. Files are added into your project (the same [open-code](https://ui.shadcn.com/docs) model as shadcn/ui), so you can adjust markup and align styles with your design system. |
| 39 | + |
| 40 | +For example, after installing the [Streak Badge](https://ui.trophy.so/streak-badge) component, you can compose it on a page like the following: |
| 41 | + |
| 42 | +```tsx |
| 43 | +"use client" |
| 44 | + |
| 45 | +import { StreakBadge } from "@/components/ui/streak-badge" |
| 46 | + |
| 47 | +export default function Page() { |
| 48 | + const streak = 7 |
| 49 | + |
| 50 | + return ( |
| 51 | + <div className="flex items-center justify-center p-8"> |
| 52 | + <StreakBadge length={streak} /> |
| 53 | + </div> |
| 54 | + ) |
| 55 | +} |
| 56 | +``` |
| 57 | + |
| 58 | +The default import path is `@/components/ui/<component>`. If your `components.json` uses another directory or alias, update the import to match. |
| 59 | + |
| 60 | +For props, variants, and data shapes, use each component’s API section on its doc page—see [All components](https://ui.trophy.so/docs/components) for the full list. |
0 commit comments