CLI

init

Use the init command to initialize configuration and dependencies for a new project.

The init command installs dependencies, adds the ny util, configures tailwind.config.ts, and CSS variables for the project.

npx nyxbui@latest init

You will be asked a few questions to configure nyxbui.json:

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

Usage: nyxbui 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.

npx nyxbui@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
◯  alert-dialog
◯  aspect-ratio
◯  avatar
◯  badge
◯  button
◯  calendar
◯  card
◯  checkbox

Options

Usage: nyxbui 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:

npx nyxbui diff

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:

npx nyxbui diff alert

const alertVariants = cva(
- "relative w-full rounded-lg border",
+ "relative w-full pl-12 rounded-lg border"
)

Options

Usage: nyxbui 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

remove

You can use the remove command to remove nyxb/ui components.

Run the following command to get a list of components that have installed, and choose components to remove:

npx nyxbui remove

? Which components would you like to remove? › Space to select. A to toggle all. Enter to submit.
◯   accordion
◯   alert
◯   alert-dialog
◯   aspect-ratio
◯   avatar
◯   button
◯   input

Then use space to select components to remove, or a to toggle all:

✔ Which components would you like to remove? › button, input
✔ Ready to remove components. Proceed? … yes
✔ Done.

Options

Usage: nyxbui remove [options] [component]
check for updates against the registry
Arguments:
  component        the component name
Options:
  -y, --yes        skip confirmation prompt. (default: false)
  -a, --all        remove all installed components. (default: false)
  -c, --cwd <cwd>  the working directory. defaults to the current directory.
  -d, --dependencies <cwd>  remove dependencies from selected components.
  -p, --path <path>  the path to remove the component.
  -h, --help       display help for command