UI kit page

docs.json

@@ -48,6 +48,30 @@
       {
         "language": "en",
         "default": true,
+        "global": {
+          "anchors": [
+            {
+              "anchor": "GitHub",
+              "href": "https://github.com/trophyso",
+              "icon": "github"
+            },
+            {
+              "anchor": "Status",
+              "href": "https://status.trophy.so",
+              "icon": "radio-tower"
+            },
+            {
+              "anchor": "llms.txt",
+              "href": "https://docs.trophy.so/llms-full.txt",
+              "icon": "bot"
+            },
+            {
+              "anchor": "Help",
+              "href": "mailto:support@trophy.so",
+              "icon": "life-buoy"
+            }
+          ]
+        },
         "tabs": [
           {
             "tab": "Home",
@@ -330,28 +354,13 @@
                 ]
               }
             ]
-          }
-        ],
-        "anchors": [
-          {
-            "anchor": "GitHub",
-            "href": "https://github.com/trophyso",
-            "icon": "github"
-          },
-          {
-            "anchor": "Status",
-            "href": "https://status.trophy.so",
-            "icon": "radio-tower"
           },
           {
-            "anchor": "llms.txt",
-            "href": "https://docs.trophy.so/llms-full.txt",
-            "icon": "bot"
-          },
-          {
-            "anchor": "Help",
-            "href": "mailto:support@trophy.so",
-            "icon": "life-buoy"
+            "tab": "UI Kit",
+            "icon": "shapes",
+            "pages": [
+              "uikit/overview"
+            ]
           }
         ],
         "navbar": {
@@ -370,6 +379,30 @@
       },
       {
         "language": "es",
+        "global": {
+          "anchors": [
+            {
+              "anchor": "GitHub",
+              "href": "https://github.com/trophyso",
+              "icon": "github"
+            },
+            {
+              "anchor": "Estado",
+              "href": "https://status.trophy.so",
+              "icon": "radio-tower"
+            },
+            {
+              "anchor": "llms.txt",
+              "href": "https://docs.trophy.so/llms-full.txt",
+              "icon": "bot"
+            },
+            {
+              "anchor": "Ayuda",
+              "href": "mailto:support@trophy.so",
+              "icon": "life-buoy"
+            }
+          ]
+        },
         "tabs": [
           {
             "tab": "Inicio",
@@ -652,28 +685,13 @@
                 ]
               }
             ]
-          }
-        ],
-        "anchors": [
-          {
-            "anchor": "GitHub",
-            "href": "https://github.com/trophyso",
-            "icon": "github"
-          },
-          {
-            "anchor": "Estado",
-            "href": "https://status.trophy.so",
-            "icon": "radio-tower"
           },
           {
-            "anchor": "llms.txt",
-            "href": "https://docs.trophy.so/llms-full.txt",
-            "icon": "bot"
-          },
-          {
-            "anchor": "Ayuda",
-            "href": "mailto:support@trophy.so",
-            "icon": "life-buoy"
+            "tab": "Kit de UI",
+            "icon": "shapes",
+            "pages": [
+              "es/uikit/overview"
+            ]
           }
         ],
         "navbar": {

es/uikit/overview.mdx

@@ -0,0 +1,60 @@
+---
+title: Kit de UI de Gamificación
+---
+
+<Frame>
+    <img
+        height="200"
+        width="100%"
+        noZoom
+        src="../../assets/uikit/hero.png"
+    />
+</Frame>
+
+El Kit de UI de Gamificación 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 formas de datos están diseñadas intencionalmente para trabajar sin problemas con Trophy.
+
+## Requisitos Previos {#prerequisites}
+
+- **React 18+** — Los componentes son React del lado del cliente.
+- **Tailwind v4+** — El estilo utiliza clases de utilidad de Tailwind. Configura Tailwind para que esas clases se compilen, y agrega 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 de 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 opcional `src/`).
+
+## Comenzar {#getting-started}
+
+Los componentes están disponibles a través del CLI de shadcn:
+
+```bash
+npx shadcn@latest add https://ui.trophy.so/<component>
+```
+
+Por ejemplo, para instalar el componente Insignia de Racha:
+
+```bash
+npx shadcn@latest add https://ui.trophy.so/streak-badge
+```
+
+Una vez que un componente está instalado, 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 [Insignia de Racha](https://ui.trophy.so/streak-badge), puedes componerlo en una página como la siguiente:
+
+```tsx
+"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 formas de datos, usa la sección API de cada componente en su página de documentación—consulta [Todos los componentes](https://ui.trophy.so/docs/components) para ver la lista completa.

i18n.json

@@ -33,7 +33,8 @@
         "webhooks/events/achievements/*.mdx",
         "webhooks/events/leaderboards/*.mdx",
         "webhooks/events/points/*.mdx",
-        "webhooks/events/streaks/*.mdx"
+        "webhooks/events/streaks/*.mdx",
+        "uikit/*.mdx"
       ],
       "exclude": [
         "snippets/*.mdx",

i18n.lock

@@ -3908,3 +3908,21 @@ checksums:
     content/36: 11d9354aad0938839619ea2cd6bfc84e
     content/37: 10e8e9a59847ddd720c6d06b12c7b120
     content/38: 9799b973234bf2d10d5c971b267f55a5
+  f88bb06e37f2be82f58b7d21aea2fe12:
+    meta/title: 2b3d02ff56b5f77b272637252681667c
+    meta/mode: a6cca5f712b7678312ceb49c46ffcb9d
+    content/0: 1555401e851bd6d479e2e36e6687a71d
+    content/1: c4ef90329fd83d07df032f692a7050f6
+    content/2: c4c0244c4b4fcca018bbb9032318b161
+    content/3: c6db7efc321794d0986f60cc02c849cb
+    content/4: 1b7803dd632c88fb68ac5771e43b1e67
+    content/5: dd5c8b58f93ed0bd38958d9d79f75822
+    content/6: aa62f0c8be91f77935d44319fa3fceff
+    content/7: 72f96436175045df70316598955c59aa
+    content/8: f7fbf729aa0f2e8cc83ef8147da52c3d
+    content/9: 99d873b2bf99292be94504028a60d59e
+    content/10: 9039522c2b3618714202c30c34332e9d
+    content/11: f1b31adcd18d3a5ba1910f43a7ff6152
+    content/12: 8ea8277db62ca77a99cdfed5c411ad61
+    content/13: 93bbdcf95ad6354d6c69125734abb2a8
+    content/14: fc6449de67653e33298100f149b39bd8

styles/config/vocabularies/Trophy/accept.txt

@@ -19,6 +19,7 @@ APNs
 Strava
 grayscale
 localStorage
+shadcn
 
 # Markdown rich text
 _[\w\s]+_

uikit/overview.mdx

@@ -0,0 +1,60 @@
+---
+title: Gamification UI Kit
+---
+
+<Frame>
+    <img
+        height="200"
+        width="100%"
+        noZoom
+        src="../assets/uikit/hero.png"
+    />
+</Frame>
+
+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.
+
+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.
+
+## Prerequisites {#prerequisites}
+
+- **React 18+** — Components are client-side React.
+- **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).
+- **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).
+
+## Getting Started {#getting-started}
+
+Components are available via the shadcn CLI:
+
+```bash
+npx shadcn@latest add https://ui.trophy.so/<component>
+```
+
+For example, to install the Streak Badge component:
+
+```bash
+npx shadcn@latest add https://ui.trophy.so/streak-badge
+```
+
+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.
+
+For example, after installing the [Streak Badge](https://ui.trophy.so/streak-badge) component, you can compose it on a page like the following:
+
+```tsx
+"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](https://ui.trophy.so/docs/components) for the full list.