|
| 1 | +--- |
| 2 | +title: CLI |
| 3 | +description: Use the CLI to add components to your project. |
| 4 | +--- |
| 5 | + |
| 6 | +## init |
| 7 | + |
| 8 | +Use the `init` command to initialize configuration and dependencies for a new project. |
| 9 | + |
| 10 | +The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.js`, and CSS variables for the project. |
| 11 | + |
| 12 | +```bash |
| 13 | +npx buidl-cli@latest init |
| 14 | +``` |
| 15 | + |
| 16 | +You will be asked a few questions to configure `components.json`: |
| 17 | + |
| 18 | +```txt showLineNumbers |
| 19 | +Would you like to use TypeScript (recommended)? no/yes |
| 20 | +Which style would you like to use? › Default |
| 21 | +Which color would you like to use as base color? › Slate |
| 22 | +Where is your global CSS file? › › app/globals.css |
| 23 | +Do you want to use CSS variables for colors? › no / yes |
| 24 | +Where is your tailwind.config.js located? › tailwind.config.js |
| 25 | +Configure the import alias for components: › @/components |
| 26 | +Configure the import alias for utils: › @/lib/utils |
| 27 | +Are you using React Server Components? › no / yes |
| 28 | +``` |
| 29 | + |
| 30 | +### Options |
| 31 | + |
| 32 | +```txt |
| 33 | +Usage: buidl-cli init [options] |
| 34 | +
|
| 35 | +initialize your project and install dependencies |
| 36 | +
|
| 37 | +Options: |
| 38 | + -y, --yes skip confirmation prompt. (default: false) |
| 39 | + -c, --cwd <cwd> the working directory. defaults to the current directory. |
| 40 | + -h, --help display help for command |
| 41 | +``` |
| 42 | + |
| 43 | +## add |
| 44 | + |
| 45 | +Use the `add` command to add components and dependencies to your project. |
| 46 | + |
| 47 | +```bash |
| 48 | +npx buidl-cli@latest add [component] |
| 49 | +``` |
| 50 | + |
| 51 | +You will be presented with a list of components to choose from: |
| 52 | + |
| 53 | +```txt |
| 54 | +Which components would you like to add? › Space to select. A to toggle all. |
| 55 | +Enter to submit. |
| 56 | +
|
| 57 | +◯ address |
| 58 | +◯ balance |
| 59 | +◯ block-explorer-link |
| 60 | +◯ block-number |
| 61 | +◯ nonce |
| 62 | +◯ transaction |
| 63 | +◯ transaction-status |
| 64 | +◯ fee-data |
| 65 | +◯ sign-message-button |
| 66 | +◯ blockie |
| 67 | +``` |
| 68 | + |
| 69 | +### Options |
| 70 | + |
| 71 | +```txt |
| 72 | +Usage: buidl-cli add [options] [components...] |
| 73 | +
|
| 74 | +add a component to your project |
| 75 | +
|
| 76 | +Arguments: |
| 77 | + components the components to add |
| 78 | +
|
| 79 | +Options: |
| 80 | + -y, --yes skip confirmation prompt. (default: false) |
| 81 | + -o, --overwrite overwrite existing files. (default: false) |
| 82 | + -c, --cwd <cwd> the working directory. defaults to the current directory. |
| 83 | + -p, --path <path> the path to add the component to. |
| 84 | + -h, --help display help for command |
| 85 | +``` |
| 86 | + |
| 87 | +## diff (experimental) |
| 88 | + |
| 89 | +You can use the diff command to check for updates against the registry. |
| 90 | + |
| 91 | +Run the following command to get a list of components that have updates available: |
| 92 | + |
| 93 | +```bash |
| 94 | +npx buidl-cli diff |
| 95 | +``` |
| 96 | + |
| 97 | +```txt |
| 98 | +The following components have updates available: |
| 99 | +- address |
| 100 | + - /path/to/my-app/components/buidl/address.tsx |
| 101 | +- balance |
| 102 | + - /path/to/my-app/components/buidl/balance.tsx |
| 103 | +- transaction |
| 104 | + - /path/to/my-app/components/buidl/transaction.tsx |
| 105 | +``` |
| 106 | + |
| 107 | +Then run `diff [component]` to see the changes: |
| 108 | + |
| 109 | +```bash |
| 110 | +npx buidl-cli diff alert |
| 111 | +``` |
| 112 | + |
| 113 | +```diff /pl-12/ |
| 114 | +const alertVariants = cva( |
| 115 | +- "relative w-full rounded-lg border", |
| 116 | ++ "relative w-full pl-12 rounded-lg border" |
| 117 | +) |
| 118 | +``` |
| 119 | + |
| 120 | +### Options |
| 121 | + |
| 122 | +```txt |
| 123 | +Usage: buidl-cli diff [options] [component] |
| 124 | +
|
| 125 | +check for updates against the registry |
| 126 | +
|
| 127 | +Arguments: |
| 128 | + component the component name |
| 129 | +
|
| 130 | +Options: |
| 131 | + -y, --yes skip confirmation prompt. (default: false) |
| 132 | + -c, --cwd <cwd> the working directory. defaults to the current directory. |
| 133 | + -h, --help display help for command |
| 134 | +``` |
0 commit comments