Getting started

mitame copies component source into your React project. Three steps, then it's your code.

1. Initialize

Run this in your project root. It writes mitame.json and copies the helpers and the theme CSS.

npx @lazizbekio/mitame init                  # Aqua, the default
npx @lazizbekio/mitame init --theme liquid    # or liquid glass
npx @lazizbekio/mitame init --theme platinum  # or Mac OS 8/9 gray

2. Import the styles once

In your global CSS (paths follow the dir in mitame.json, src/components/mitame by default):

@import "./components/mitame/themes/base.css";
@import "./components/mitame/themes/y2k/aqua.css";

/* Using Tailwind v4? Add the bridge after tailwindcss for bg-mi-accent, rounded-mi-lg, ... */
@import "tailwindcss";
@import "./components/mitame/themes/tailwind.css";

3. Pick the era

<html data-theme="aqua">                   <!-- follows the device light/dark -->
<html data-theme="aqua" data-mode="light">  <!-- always light, strict 2001 -->
<html data-theme="liquid" data-mode="dark"> <!-- always dark -->

Themes also work on any element, so one page can show several eras.

4. Add components

npx @lazizbekio/mitame add button dialog select
npx @lazizbekio/mitame list   # everything you can add

import { Button } from "@/components/mitame/ui/button";

export function Save() {
  return <Button variant="primary">Save</Button>;
}

add follows imports, so select brings the hooks and icons it needs. Files you already have are kept; --overwrite replaces only what you name.

Requirements

React 19. No other runtime dependencies.
Browsers: Chrome and Edge 114+, Safari 17+, Firefox 125+ (Popover API).
Tailwind is optional.