add command adds components to your project. It fetches components from the registry, transforms them based on your configuration, and installs them with all dependencies.
Usage
Arguments
string[]
Names, URL, or local path to components. If not provided, you’ll see an interactive component selector.
Options
boolean
default:"false"
Skip confirmation prompt.
boolean
default:"false"
Overwrite existing files.
string
The working directory. Defaults to the current directory.
boolean
default:"false"
Add all available components.
string
The path to add the component to.
boolean
default:"false"
Mute output.
boolean
default:"false"
Use the src directory when creating a new project.
boolean
Do not use the src directory when creating a new project.
boolean
default:"true"
Use CSS variables for theming.
boolean
Do not use CSS variables for theming.
Examples
Add a single component
Add multiple components
Add with interactive selector
Add all components
Add and overwrite existing files
Add from a URL
Add from local path
Add to a specific path
Silent mode
What it does
- Checks for
components.json(runsinitif missing) - Fetches component from the registry
- Resolves all component dependencies
- Transforms component code based on your configuration:
- Updates import paths
- Applies CSS variables or inline colors
- Adjusts for TypeScript/JavaScript
- Handles RSC (React Server Components)
- Installs npm dependencies
- Writes component files to your project
Registry types
Theadd command supports different registry item types:
registry:ui- UI componentsregistry:block- Larger UI blocks/sectionsregistry:hook- React hooksregistry:lib- Library utilitiesregistry:theme- Theme configurationsregistry:style- Complete style systemsregistry:base- Base configurations
Special handling
Styles and themes
When adding aregistry:style or registry:theme, you’ll be warned that:
- Existing CSS variables will be overwritten
- Existing components may be affected
--yes).