pktmn-ui

pktmn-ui is a React component library inspired by retro game interfaces like Pokémon Emerald. Transpiled with Vite library mode, pktmn-ui ships with styles organized via Tailwind CSS theming, defined in pktmn-ui/foundations.css.

Installation

pktmn-ui ships with tailwindcss as a dependency, so it installs automatically. You only need to install the integration for your bundler, for example:

Using pktmn-ui with Vite

1. Install pktmn-ui

npm install pktmn-ui

2. Add the Tailwind Vite plugin to your config

@tailwindcss/vite is included with pktmn-ui — just register it:

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

3. Import foundations.css in your CSS entry

In your main CSS file (e.g. src/index.css), replace any existing @import "tailwindcss" with:

@import "pktmn-ui/foundations.css";

foundations.css includes @import "tailwindcss" internally — it's all you need. It provides the theme tokens, font faces, and all named themes.

4. Use components

import { FilledButton } from 'pktmn-ui'

<FilledButton theme="legendary-blue" size="medium">Start game</FilledButton>

Component styles are injected automatically — no additional CSS import needed.