# mitame (見た目)

> "The way it looks" in Japanese. Copy-paste React 19 components with 17 themes, from a 1984 bitmap Mac to 2026 liquid glass. Built on the native <dialog>, the Popover API and real form inputs. No runtime dependencies besides React. Tailwind optional. Web only.

The components are not imported from a package. A CLI copies the source into the project and the files belong to whoever copied them.

## Install

- `npx @lazizbekio/mitame init` writes mitame.json and copies the helpers, base CSS and one theme. `--theme <name>` picks the theme, `--dir <path>` the destination (default src/components/mitame).
- `npx @lazizbekio/mitame add <name...>` copies a component and everything it imports.
- `npx @lazizbekio/mitame list` prints every component, block, hook, icon and theme.
- Through the shadcn CLI instead, in a project that already has components.json: `npx shadcn@latest add lazizbekravshanov/mitame/button` and `npx shadcn@latest add lazizbekravshanov/mitame/theme-aqua`.
- Import the CSS once, in this order: themes/base.css, then the theme's own file. Set the theme with <html data-theme="aqua">, and force a mode with data-mode="light" or "dark".
- Imports look like: import { Button } from "@/components/mitame/ui/button"

## Components

- [Button](https://mitame.dev/docs/components/button.md): The gel pill, the glass pill and everything in between. Built on <button>. Add with `npx @lazizbekio/mitame add button`.
- [Card](https://mitame.dev/docs/components/card.md): The surface everything sits on: pinstripes in Aqua, liquid glass in Now. Built on <div>. Add with `npx @lazizbekio/mitame add card`.
- [TextField](https://mitame.dev/docs/components/text-field.md): Label, hint and error wired together for screen readers. Built on <input>. Add with `npx @lazizbekio/mitame add text-field`.
- [Checkbox](https://mitame.dev/docs/components/checkbox.md): A real checkbox with a custom box, including the indeterminate dash. Built on <input type="checkbox">. Add with `npx @lazizbekio/mitame add checkbox`.
- [Switch](https://mitame.dev/docs/components/switch.md): An on/off toggle. A native checkbox with role switch. Built on <input type="checkbox" role="switch">. Add with `npx @lazizbekio/mitame add switch`.
- [Slider](https://mitame.dev/docs/components/slider.md): A native range input with a filled track. Built on <input type="range">. Add with `npx @lazizbekio/mitame add slider`.
- [Select](https://mitame.dev/docs/components/select.md): The popup button. Opens a listbox in the top layer, works in forms. Built on popover + listbox. Add with `npx @lazizbekio/mitame add select`.
- [Tabs](https://mitame.dev/docs/components/tabs.md): A segmented control that switches panels. Built on tablist / tab / tabpanel. Add with `npx @lazizbekio/mitame add tabs`.
- [Menu](https://mitame.dev/docs/components/menu.md): A dropdown of actions. Built on popover + menu. Add with `npx @lazizbekio/mitame add menu`.
- [Dialog](https://mitame.dev/docs/components/dialog.md): A modal on the native <dialog>: focus trap, Escape and inert page for free. Built on <dialog> showModal(). Add with `npx @lazizbekio/mitame add dialog`.
- [Popover](https://mitame.dev/docs/components/popover.md): Floating content next to a button. The browser handles outside clicks and Escape. Built on popover API. Add with `npx @lazizbekio/mitame add popover`.
- [Tooltip](https://mitame.dev/docs/components/tooltip.md): A short hint. Hover with a mouse, focus with a keyboard, long press on touch. Built on popover (manual). Add with `npx @lazizbekio/mitame add tooltip`.
- [Toast](https://mitame.dev/docs/components/toast.md): Notifications from anywhere with toast(), announced to screen readers. Built on popover (manual) + aria-live. Add with `npx @lazizbekio/mitame add toast`.

## Blocks

- [Sign in](https://mitame.dev/blocks#sign-in): A centered sign in card with email, password, remember me and a magic link fallback. Uses Card, TextField, Checkbox, Button. Add with `npx @lazizbekio/mitame add sign-in`.
- [Pricing](https://mitame.dev/blocks#pricing): Three plans with a monthly and yearly switch, a featured tier and feature lists. Uses Card, Switch, Button. Add with `npx @lazizbekio/mitame add pricing`.
- [Settings](https://mitame.dev/blocks#settings): Sections down the side, grouped fields, switches with help text, and a danger zone whose confirm button waits until you type the account name. Uses Card, TextField, Switch, Select, Tabs, Dialog, Button. Add with `npx @lazizbekio/mitame add settings`.
- [Data table](https://mitame.dev/blocks#data-table): Search and filters, sortable columns, row selection with a bulk action bar, and pagination over the filtered set. Uses Card, TextField, Select, Checkbox, Menu, Button. Add with `npx @lazizbekio/mitame add data-table`.
- [Landing](https://mitame.dev/blocks#landing): Hero, feature grid, logo strip, quote, statistics and a closing call to action, with a sign up dialog on the header button. Uses Button, Card, Dialog, TextField, Checkbox. Add with `npx @lazizbekio/mitame add landing`.
- [Empty states](https://mitame.dev/blocks#empty-states): The five states most libraries skip: nothing yet, no results, an error, offline and permission denied. Uses Card, Button, TextField. Add with `npx @lazizbekio/mitame add empty-states`.
- [Dashboard](https://mitame.dev/blocks#dashboard): Sidebar, search and range filters, stat tiles and a table with share bars. Uses Card, TextField, Select, Menu, Tabs, Button. Add with `npx @lazizbekio/mitame add dashboard`.

## Themes

Each theme is one CSS file keyed by data-theme, with its tokens in a generated sibling. Every theme carries light and dark.

- Eras: system (Vintage, 1984), platinum (Vintage, 1997), aqua (Y2K, 2001), aero (Y2K, 2009), liquid (Now, 2026), bevel (Vintage, 1995), linen (Y2K, 2012)
- Styles: brutalist (Brutalist), urban (Urban), paper (Paper), terminal (Terminal), neon (Neon), sumi (Sumi), pixel (Pixel), clay (Clay), blueprint (Blueprint), notebook (Notebook)

## Rules that are easy to get wrong

- There is no npm install step and no package to import from. `add` copies source into the project and the project owns it.
- The CSS has to be imported once or every component renders unstyled. base.css first, then exactly one theme file.
- The `@/` alias is not configured by mitame. Either map `"@/*": ["./src/*"]` in tsconfig, or import with relative paths.
- Blocks need their layout CSS as well: `@import "./components/mitame/blocks/blocks.css";`

## Styling

- [Theming](https://mitame.dev/docs/theming): --mi-* custom properties hold the tokens. Every part carries a data-slot, and stateful parts carry data-state, data-variant or data-size. Style through those.
- mitame's CSS lives in @layer components, so your own classes and Tailwind utilities win without tailwind-merge and without !important.
- Colours are checked against WCAG AA in both modes on every build, measured from the CSS as it ships.

## For coding agents

- `npx @lazizbekio/mitame mcp` runs an MCP server on stdio: list_items, get_item (source plus props and keyboard), add_items, init_project, get_theme.
- Every component page has a markdown twin at `/docs/components/<name>.md`, which is what these links point at.
- [AGENTS.md](https://github.com/lazizbekravshanov/mitame/blob/main/AGENTS.md): the repository's own conventions, for working on mitame rather than with it.

## Optional

- [Repository](https://github.com/lazizbekravshanov/mitame): MIT licensed. registry.json at the root works with `npx shadcn@latest add lazizbekravshanov/mitame/<item>`.
- [Themes](https://mitame.dev/themes): all 17 looks with live previews.
- [Blocks](https://mitame.dev/blocks): whole pages built from the same components.