mitame 見た目

Old UI, brought back to life.

Copy-paste React components that wear any look: 17 themes, a timeline from 1-bit 1984 through beveled 1995, Aqua gel and 2012 skeuomorphism to liquid glass, plus brutalist, terminal, neon, ink and more. Mitame (見た目) is Japanese for "the way it looks". Same code, new 見た目.

mitame.dev · Components · Themes

npx @lazizbekio/mitame init
npx @lazizbekio/mitame add button dialog select

The source lands in your project and it's yours to edit. Nothing is hidden in node_modules.

Why mitame

• You own the code. Components are copied into your repo, not installed as a dependency.
• Nothing to install but React. Menus, dialogs, popovers and tooltips are built on the browser's own <dialog>, the Popover API and real form inputs. No Radix, no Floating UI, no tailwind-merge.
• Every era, one API. Change data-theme and the same markup goes from Aqua gel to liquid glass. Light and dark come with each theme.
• Phones are first class. 44px touch targets, no iOS zoom on focus, no hover stuck after a tap.
• Designed in Figma, generated into code. Tokens and icons come from a Figma file, so the design and the CSS can't drift apart.

Themes

Two shelves: eras that really existed, and styles that are just looks.

Shelf	Theme	Status
Y2K · 2000 to 2012	aqua — gel buttons, pinstripes, the blue ⇅ popup button, midnight dark mode	✅ default
Now · 2025 and later	liquid — frosted glass, rim light, deep soft shadows	✅
Vintage · 1997	platinum — Mac OS 8/9 gray, bevels, hard shadows, square corners, graphite dark mode	✅
Vintage · 1984	system — 1-bit black and white, dither instead of gray, inverted selection	✅
Styles	brutalist — thick outlines, hard shadows, zero radius, loud flats	✅
Styles	urban — near black with grain, acid accent, heavy uppercase	✅
Styles	paper — warm stock, serif headings, clay accent, ruled inputs	✅
Styles	terminal — monospace, bracketed buttons, phosphor glow	✅
Styles	neon — violet black, magenta and cyan glow, lit controls	✅
Y2K · 2009	aero — Frutiger Aero glass, wet highlights, sky blue	✅
Remix	blend — old structure on new material	planned

Quick start

1. Initialize. Writes mitame.json and copies the helpers and theme CSS.

npx @lazizbekio/mitame init                  # aqua, the default
npx @lazizbekio/mitame init --theme liquid   # or liquid glass

2. Import the styles once, in your global CSS:

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

/* Using Tailwind v4? Add the bridge 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 -->

4. Add components and use them:

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

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

<Button variant="primary">Save</Button>;

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

Already using the shadcn CLI? It can install mitame straight from this repository, into the same src/components/mitame tree:

npx shadcn@latest add lazizbekravshanov/mitame/theme-aqua
npx shadcn@latest add lazizbekravshanov/mitame/button
npx shadcn@latest add lazizbekravshanov/mitame/sign-in   # blocks too

Pin a version with ...mitame/button#v0.1.1. That path needs an existing components.json; in a project without one, use the mitame CLI above.

Working with a coding agent? mitame ships for that case:

npx @lazizbekio/mitame mcp     # an MCP server on stdio: list, read source, install

There is also a Claude Code plugin in this repository (a skill plus that MCP server wired up), a machine readable index at mitame.dev/llms.txt, a markdown twin of every component page at /docs/components/<name>.md, and every component's props and keyboard map as data in registry/meta.json.

Components

Button · Card · TextField · Checkbox · Switch · Slider · Select · Tabs · Menu · Dialog · Popover · Tooltip · Toast, plus 14 icons.

Each one has a page on mitame.dev with a live demo you can switch between eras, the source, props and keyboard shortcuts.

Blocks

Whole pages built from the same components, in any theme:

npx @lazizbekio/mitame add sign-in
npx @lazizbekio/mitame add pricing
npx @lazizbekio/mitame add dashboard

They bring their own layout CSS (tokens only, no utility framework), so they look right with or without Tailwind. Import it once alongside your theme:

@import "./components/mitame/blocks/blocks.css";

See them live at mitame.dev/blocks.

Customizing

• Edit the file. It's in your repo now.
• Override with classes. Theme styles live in @layer components, so any class you pass wins without !important.
• Target slots. Every part has a data-slot (select-trigger, menu-item, dialog-panel…) and state attributes (data-state, data-variant, data-size).
• Change tokens. Colors, glass, radius, spacing and motion are CSS variables:

[data-theme="aqua"] {
  --mi-accent: #e8559b;
  --mi-radius-lg: 16px;
}

Requirements

React 19, and Chrome/Edge 114+, Safari 17+ or Firefox 125+ (the Popover API). Tailwind is optional. Web only.

Design source: Figma

Tokens and icons live in a Figma file (one variable collection per theme, plus an icon page) and are generated into code:

1. Pull with scripts/figma/export.js (through the Figma MCP or a plugin console) into tokens/*.json and icons/svg/*.svg.
2. npm run tokens → registry/themes/<era>/<theme>.tokens.css
3. npm run icons → registry/icons/*.tsx

CI fails if the generated files drift from the Figma exports.

Develop

npm install
npm run site:dev   # the docs website, http://localhost:4321
npm run dev        # playground with every component, http://localhost:5173
npm test           # components, CLI and generators
npm run typecheck
npm run build      # builds the CLI into dist/cli
npm run social     # renders the social images from the live site
npm run clip       # records the era switch as a GIF

registry/   what users can add: ui/, blocks/, hooks/, lib/, icons/, themes/
cli/        the mitame command (init, add, list)
site/       the docs website (Astro), deployed on Vercel
tokens/     design tokens pulled from Figma
icons/svg/  icons pulled from Figma
scripts/    token and icon generators, Figma export script
playground/ local showcase, not shipped
docs/specs/ design decisions
docs/launch/ launch copy and asset notes

Roadmap

• Page templates (sign in, pricing, dashboard) in every era
• More blocks: settings, empty states, marketing hero
• Figma Code Connect

License

MIT