CLI
Use the MadUI CLI to add components to your project.
init
Use the init command to initialize configuration and dependencies for a new project.
The init command installs dependencies, adds the cn util and configures CSS variables for the project.
npx madui@latest initpnpm dlx madui@latest initnpx madui@latest initbunx madui@latest initOptions
Usage: madui init [options] [components...]
initialize your project and install dependencies
Arguments:
components name, url or local path to component
Options:
-b, --base-color <base-color> the base color to use. (neutral, gray, zinc, stone, slate)
-y, --yes skip confirmation prompt. (default: true)
-f, --force force overwrite of existing configuration. (default: false)
-c, --cwd <cwd> the working directory. defaults to the current directory.
-s, --silent mute output. (default: false)
--src-dir use the src directory when creating a new project. (default: false)
--no-src-dir do not use the src directory when creating a new project.
--css-variables use css variables for theming. (default: true)
--no-css-variables do not use css variables for theming.
-h, --help display help for command
-V, --Verbose To display verbose leveladd
Use the add command to add components and dependencies to your project.
npx madui@latest add [component]pnpm dlx madui@latest add [component]npx madui@latest add [component]bunx madui@latest add [component]You will be presented with a list of components to choose from:
Which components would you like to add? › Space to select. A to toggle all.
Enter to submit.
◯ accordion
◯ alert
◯ avatar
◯ badge
◯ button
◯ calendar
◯ card
◯ checkboxOptions
Usage: madui add [options] [components...]
add a component to your project
Arguments:
components name, url or local path to component
Options:
-y, --yes skip confirmation prompt. (default: false)
-o, --overwrite overwrite existing files. (default: false)
-c, --cwd <cwd> the working directory. defaults to the current directory.
-a, --all add all available components (default: false)
-p, --path <path> the path to add the component to.
-s, --silent mute output. (default: false)
--src-dir use the src directory when creating a new project. (default: false)
--no-src-dir do not use the src directory when creating a new project.
--css-variables use css variables for theming. (default: true)
--no-css-variables do not use css variables for theming.
-h, --help display help for commandExamples
Add a single component:
npx madui@latest add buttonpnpm dlx madui@latest add buttonnpx madui@latest add buttonbunx madui@latest add buttonAdd multiple components:
npx madui@latest add button card alertpnpm dlx madui@latest add button card alertnpx madui@latest add button card alertbunx madui@latest add button card alertAdd all components:
npx madui@latest add --allpnpm dlx madui@latest add --allnpx madui@latest add --allbunx madui@latest add --alldiff
Use the diff command to check for updates against the registry.
The diff command will show you the differences between the local version of a component and the registry version.
npx madui@latest diff [component]pnpm dlx madui@latest diff [component]npx madui@latest diff [component]bunx madui@latest diff [component]Options
Usage: madui diff [options] [component]
check for updates against the registry
Arguments:
component the component name
Options:
-y, --yes skip confirmation prompt. (default: false)
-c, --cwd <cwd> the working directory. defaults to the current directory.
-h, --help display help for commandExamples
Check for updates for a single component:
npx madui@latest diff buttonpnpm dlx madui@latest diff buttonnpx madui@latest diff buttonbunx madui@latest diff buttonCheck for updates for all components:
npx madui@latest diffpnpm dlx madui@latest diffnpx madui@latest diffbunx madui@latest diff