Skip to main content

CLI

Use the MateUI CLI to initialize your project, add, update, remove, and list components directly from the terminal.

The MateUI CLI is the fastest way to manage components in your project. It connects to the official registry and lets you install, update, and remove components without leaving your terminal.

Installation

You don't need to install anything globally. Use pnpm dlx or npx to run the CLI on demand:
1pnpm dlx mateui <command>
2# or
3npx mateui <command>

Commands

init

Initializes MateUI in your project. This is the first command you should run. It will:
  1. Fetch the available themes from the registry.
  2. Ask you to select a theme interactively.
  3. Create a mateui.json configuration file in the root of your project.
  4. Inject the CSS design tokens into your stylesheet (src/app/globals.css for Next.js or src/index.css for Vite).
  5. Generate the cn utility function in the path defined by aliases.utils.
1pnpm dlx mateui init
After running init, your project will contain a mateui.json file like this:
1{
2  "$schema": "...",
3  "style": "default",
4  "tailwind": {
5    "config": "",
6    "baseColor": "zinc",
7    "css": "src/app/globals.css"
8  },
9  "aliases": {
10    "components": "@/components/ui",
11    "utils": "@/lib/utils"
12  }
13}
Info
If mateui.json already exists, init will detect it and skip re-injecting tokens to avoid duplicates.

add

Adds a component from the registry to your project. Requires mateui.json to exist (run init first).
1pnpm dlx mateui add <component>
Example:
1pnpm dlx mateui add button
What it does:
  • Fetches the component source code from the registry.
  • Writes the component file to the path defined in aliases.components (e.g., src/components/ui/button.tsx).
  • Checks if the component has external dependencies.
  • If missing dependencies are found, prompts you to install them automatically using your package manager (npm, pnpm, yarn, or bun — auto-detected).
Tip
Use pnpm dlx mateui list to see all available component slugs.

list

Lists all components currently available in the MateUI registry.
1pnpm dlx mateui list
Output example:
1→ Button   (button)
2→ Input    (input)
3    Deps: react-hook-form
4→ Dialog   (dialog)
Each entry shows the component name, its slug (used with add/update/remove), and any required dependencies.

update

Fetches the latest version of an already-installed component from the registry and overwrites the local file.
1pnpm dlx mateui update <component>
Example:
1pnpm dlx mateui update button
The command will:
  1. Verify the component is installed (the file exists in aliases.components).
  2. Fetch the latest code from the registry.
  3. Ask for confirmation before writing.
  4. Replace the local file with the updated version.

remove

Removes an installed component from your project by deleting its file (or folder) from the components directory.
1pnpm dlx mateui remove <component>
Example:
1pnpm dlx mateui remove button
The command looks for button.tsx (or a button/ folder) inside src/components/ui/. If found, it asks for confirmation before permanently deleting the file.

Typical workflow

1# 1. Initialize MateUI in your project
2pnpm dlx mateui init
3 
4# 2. Browse available components
5pnpm dlx mateui list
6 
7# 3. Add a component
8pnpm dlx mateui add button
9 
10# 4. Update a component to the latest version
11pnpm dlx mateui update button
12 
13# 5. Remove a component you no longer need
14pnpm dlx mateui remove button

Configuration file

The mateui.json file is created by init and is required by the add, update, and remove commands. It controls where components and utilities are placed inside your project.
FieldDescription
styleThe selected theme style
tailwind.cssPath to your main CSS file
aliases.componentsImport alias for the components directory
aliases.utilsImport alias for the cn utility
If this file is missing, most commands will fail and ask you to run mateui init first.
PreviousDark ModeNextAccordion