CLI
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 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