UI

Get started

Installation

Mekai UI works in any React 19 project with Tailwind CSS 4: Next.js, Vite, React Router and others.

  1. 1

    Set up the shadcn CLI

    Skip this if your project already has a components.json file.

    npx shadcn@latest init
  2. 2

    Add a component

    Use the address shown on a free component's page. The CLI installs its dependencies and writes the file to components/ui.

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

    Import it

    The component is now a file in your project. Change anything you like.

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

Without the CLI

Install motion, then open a component, switch to the Code tab and paste the file into your project. A few game components also import icons.tsx.

Pro components

After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository. Every Pro component is a file there: copy the ones you need into components/ui, and pull the repo to get new components and fixes.

Browse components