Install React components from a shadcn registry

The shadcn CLI is best known for installing shadcn/ui, but it can install from any registry: a server that answers with JSON describing a component, its files and its dependencies. Mekai UI runs one at https://ui.mekaigames.com/r/, so every free component installs with a single command and ends up as a file you own.

What a registry item is

Each component has a JSON file at a stable address. It lists the npm packages the component needs, other registry items it depends on, and the source files with their target paths. You can open one in the browser to see exactly what the CLI will write:

https://ui.mekaigames.com/r/xp-bar.json

• dependencies: npm packages to install. Most Mekai components need only motion.
• registryDependencies: other items installed first. Every Mekai component points at theme.json, which carries the colors, fonts and utilities the components use.
• files: the source, written to components/ui/ in your project.

Set up the CLI once

The CLI needs a components.json file at the root of the project. It records where components go and which import alias points at them. If you already use shadcn/ui you have it; otherwise run init and accept the defaults:

npx shadcn@latest init

Mekai UI needs React 19 and Tailwind CSS 4. It works the same in Next.js, Vite, React Router and other setups, as long as the @/ alias in components.json resolves to your source folder.

Add a component

Pass the registry URL instead of a component name. The address is shown on every free component's page, for example XP Bar:

npx shadcn@latest add https://ui.mekaigames.com/r/xp-bar.json

The CLI installs motion if it's missing, adds the Mekai theme to your global CSS the first time, and writes components/ui/xp-bar.tsx. Then import it like any local file:

import { XpBar } from "@/components/ui/xp-bar";

export function Profile({ xp }: { xp: number }) {
  return <XpBar xp={xp} perLevel={100} />;
}

You can add several at once by listing more URLs in the same command.

What the theme adds

The theme item adds CSS variables for the Mekai palette (ink, bone, ember, gold), two font variables (--font-display for Montserrat and --font-pixel for Silkscreen) and three small utilities. Components use them through regular Tailwind classes such as bg-ink-900 or text-ember, so changing a variable restyles every component that uses it.

Fonts are not downloaded for you. Load Montserrat and Silkscreen the way your project loads fonts, or set --font-display and --font-pixel to fonts you already use.

Edit, update and remove

• Edit: the component is plain TypeScript in your repo. Change props, markup or animation timing directly; there is no package to fork.
• Update: run the same add command with --overwrite to replace your copy with the latest version. Commit first if you changed the file, so you can merge your edits back.
• Remove: delete the file. Nothing else references it.

Without the CLI

Every free component page has a Code tab with the full source and a copy button. Install motion, paste the file into components/ui, and add the theme variables to your CSS. A few game components also import icons.tsx; for those, the CLI is simpler because it adds that file automatically.

Pro components

Pro components don't come through the public registry. After checkout you connect your GitHub account and get an invite to a private repository with every component, the theme as a CSS file and a README. Copy the files you need, and pull the repository to get new components and fixes.