Installation
Add CompoDex Pokémon-themed components to your Next.js project via the shadcn registry in three steps.
CompoDex is distributed as a shadcn registry. Components are copied directly into your project (no runtime package to install), which means you own the code and can customize it freely.
Prerequisites
Before you begin, your project must have:
- Next.js (App Router) — v14 or later
- React 19
- Tailwind CSS v4 — installation guide
- shadcn/ui already initialized (pnpm dlx shadcn@latest init) — setup guide
pnpm is recommended throughout this guide, but npm, yarn, and bun work equally well.
Register the @compodex registry
Tell shadcn where to find CompoDex components by adding a registries entry to your project's components.json:
This entry goes alongside your existing components.json fields. If the file already has a registries key, add "@compodex" inside it.
Add the type-color theme first
Every CompoDex component uses --color-type-* CSS variables for Pokémon-type colors. Install the theme token set before adding any component:
This writes --color-type-fire, --color-type-grass, and all 21 type tokens into your Tailwind theme, generating utilities like bg-type-fire, text-type-water, and border-type-electric automatically.
Add a component
Install any CompoDex component with a single command. Here is badge-type as an example:
Then import and use it:
Note
Components automatically pull their registry dependencies — shadcn utils, and any CompoDex items they require (like @compodex/pokemon-type-colors). You do not need to install dependencies by hand; shadcn resolves and copies everything in one pass.
Available components
| Registry name | Install command |
|---|---|
| pokemon-type-colors | pnpm dlx shadcn@latest add @compodex/pokemon-type-colors |
| badge-type | pnpm dlx shadcn@latest add @compodex/badge-type |
| pokemon-card | pnpm dlx shadcn@latest add @compodex/pokemon-card |
| pokemon-sprite | pnpm dlx shadcn@latest add @compodex/pokemon-sprite |
| pokemon-stat | pnpm dlx shadcn@latest add @compodex/pokemon-stat |
| pokedex | pnpm dlx shadcn@latest add @compodex/pokedex |
Next steps
- Browse individual component docs and live previews: Components
- Follow a full worked example: Build a Pokédex
License and attribution
CompoDex is released under the MIT License.
Pokémon trademark notice: Pokémon, all Pokémon names, and all related indicia are trademarks of Nintendo, Game Freak, and The Pokémon Company. CompoDex is an unofficial fan project with no affiliation to or endorsement by those rights holders.
Sprite artwork is served by PokéAPI, which aggregates official and community sprite assets. Please review PokéAPI's terms before using sprites in production.
CompoDex is built on shadcn/ui and Radix UI, both MIT-licensed.