Install components in Trophy's Gamification UI Kit in React or Next.js with the shadcn CLI—open-code files, Tailwind v4, and client components you compose in App Router or SPA pages.
Once a component in Trophy's Gamification UI Kit is installed, you can import and use it like any other React component. Files are added into your project (the same open-code model as shadcn/ui), so you can open them, adjust markup, and align styles with your design system.
Example
After installing the Streak Badge component, you can compose it on a page like this:
"use client"
import { StreakBadge } from "@/components/ui/streak-badge"
export default function Page() {
const streak = 7
return (
<div className="flex items-center justify-center p-8">
<StreakBadge length={streak} />
</div>
)
}The default import path is @/components/ui/<component>. If your components.json uses another directory or alias, update the import to match.
For props, variants, and data shapes, use each component’s API section on its doc page—see All components for the full list.
On This Page
Example