mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
15f639161d
- Fix 3D card component demos with proper content in both default and new-york themes - Update all 170+ CLI installation commands from 'npx hanzo-ui@latest' to 'npx @hanzo/ui@latest' - Update CLAUDE.md to reflect correct package naming - Rebuild component registry with updated demos
136 lines
3.1 KiB
Plaintext
136 lines
3.1 KiB
Plaintext
---
|
||
title: CLI
|
||
description: Use the 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, configures `tailwind.config.js`, and CSS variables for the project.
|
||
|
||
```bash
|
||
npx @hanzo/ui@latest init
|
||
```
|
||
|
||
You will be asked a few questions to configure `components.json`:
|
||
|
||
```txt showLineNumbers
|
||
Would you like to use TypeScript (recommended)? no/yes
|
||
Which style would you like to use? › Default
|
||
Which color would you like to use as base color? › Slate
|
||
Where is your global CSS file? › › app/globals.css
|
||
Do you want to use CSS variables for colors? › no / yes
|
||
Where is your tailwind.config.js located? › tailwind.config.js
|
||
Configure the import alias for components: › @/components
|
||
Configure the import alias for utils: › @/lib/utils
|
||
Are you using React Server Components? › no / yes
|
||
```
|
||
|
||
### Options
|
||
|
||
```txt
|
||
Usage: hanzo-ui init [options]
|
||
|
||
initialize your project and install dependencies
|
||
|
||
Options:
|
||
-y, --yes skip confirmation prompt. (default: false)
|
||
-c, --cwd <cwd> the working directory. defaults to the current directory.
|
||
-h, --help display help for command
|
||
```
|
||
|
||
## add
|
||
|
||
Use the `add` command to add components and dependencies to your project.
|
||
|
||
```bash
|
||
npx @hanzo/ui@latest add [component]
|
||
```
|
||
|
||
You will be presented with a list of components to choose from:
|
||
|
||
```txt
|
||
Which components would you like to add? › Space to select. A to toggle all.
|
||
Enter to submit.
|
||
|
||
◯ accordion
|
||
◯ alert
|
||
◯ alert-dialog
|
||
◯ aspect-ratio
|
||
◯ avatar
|
||
◯ badge
|
||
◯ button
|
||
◯ calendar
|
||
◯ card
|
||
◯ checkbox
|
||
```
|
||
|
||
### Options
|
||
|
||
```txt
|
||
Usage: hanzo-ui add [options] [components...]
|
||
|
||
add a component to your project
|
||
|
||
Arguments:
|
||
components the components to add
|
||
|
||
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.
|
||
-p, --path <path> the path to add the component to.
|
||
-h, --help display help for command
|
||
```
|
||
|
||
## diff (experimental)
|
||
|
||
You can use the diff command to check for updates against the registry.
|
||
|
||
Run the following command to get a list of components that have updates available:
|
||
|
||
```bash
|
||
npx @hanzo/ui diff
|
||
```
|
||
|
||
```txt
|
||
The following components have updates available:
|
||
- alert
|
||
- /path/to/my-app/components/ui/alert.tsx
|
||
- button
|
||
- /path/to/my-app/components/ui/button.tsx
|
||
- toast
|
||
- /path/to/my-app/components/ui/use-toast.ts
|
||
- /path/to/my-app/components/ui/toaster.tsx
|
||
```
|
||
|
||
Then run `diff [component]` to see the changes:
|
||
|
||
```bash
|
||
npx @hanzo/ui diff alert
|
||
```
|
||
|
||
```diff /pl-12/
|
||
const alertVariants = cva(
|
||
- "relative w-full rounded-lg border",
|
||
+ "relative w-full pl-12 rounded-lg border"
|
||
)
|
||
```
|
||
|
||
### Options
|
||
|
||
```txt
|
||
Usage: hanzo-ui 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 command
|
||
```
|