> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trophy.so/llms.txt
> Use this file to discover all available pages before exploring further.

# Kit de UI de Gamificación

<Frame>
  <img height="200" width="100%" noZoom src="https://mintcdn.com/trophy/JOJaZjMfoGXpwyRq/assets/uikit/hero.png?fit=max&auto=format&n=JOJaZjMfoGXpwyRq&q=85&s=5d90b4d5ccd3130d1199052c4c419a6e" data-path="assets/uikit/hero.png" />
</Frame>

El [Kit de UI de Gamificación](https://ui.trophy.so) de Trophy es una biblioteca de componentes construida sobre [shadcn/ui](https://ui.shadcn.com) que te ayuda a crear experiencias de gamificación más rápido. Proporciona componentes prediseñados para rachas, logros, clasificaciones, puntos y más.

El Kit de UI está diseñado para funcionar con cualquier plataforma de gamificación, pero todas las props y estructuras de datos están diseñadas intencionalmente para trabajar sin problemas con Trophy.

<h2 id="prerequisites">
  Requisitos previos
</h2>

* **React 18+** — Los componentes son React del lado del cliente.
* **Tailwind v4+** — El estilado usa clases de utilidad de Tailwind. Configura Tailwind para que esas clases se compilen, y añade los [tokens de tema semántico](https://ui.trophy.so/docs/styles) que Trophy espera (o mapéalos a tu sistema de diseño).
* **Estructura shadcn/ui** — Mantén un proyecto que ya siga la configuración de [shadcn/ui](https://ui.shadcn.com/docs/installation) (`components.json`, alias y diseño `src/` opcional).

<h2 id="getting-started">
  Comenzar
</h2>

Los componentes están disponibles a través del CLI de shadcn:

```bash theme={null}
npx shadcn@latest add https://ui.trophy.so/<component>
```

Por ejemplo, para instalar el componente Streak Badge:

```bash theme={null}
npx shadcn@latest add https://ui.trophy.so/streak-badge
```

Una vez instalado un componente, puedes importarlo y usarlo como cualquier otro componente de React. Los archivos se agregan a tu proyecto (el mismo modelo de [código abierto](https://ui.shadcn.com/docs) que shadcn/ui), por lo que puedes ajustar el marcado y alinear los estilos con tu sistema de diseño.

Por ejemplo, después de instalar el componente [Streak Badge](https://ui.trophy.so/streak-badge), puedes componerlo en una página como la siguiente:

```tsx theme={null}
"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>
  )
}
```

La ruta de importación predeterminada es `@/components/ui/<component>`. Si tu `components.json` usa otro directorio o alias, actualiza la importación para que coincida.

Para props, variantes y estructuras de datos, consulta la sección API de cada componente en su página de documentación—ve [Todos los componentes](https://ui.trophy.so/docs/components) para la lista completa.


## Related topics

- [Bienvenido a Trophy](/es/getting-started/introduction.md)
- [Multi-Tenencia](/es/platform/multi-tenancy.md)
- [Descripción General](/es/features/overview.md)
- [Puntos](/es/features/points.md)
- [Cómo Crear un Rastreador de Fitness Gamificado](/es/guides/gamified-fitness-platform.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.