UI Thing CLI

A CLI for adding UI Thing components to your Nuxt project. Pick only the components you need — no bloat, no lock-in.

Credits

• shadcn/ui — design inspiration
• Reka UI — headless primitives
• TailwindCSS
• Nuxt

Thanks to the maintainers of all third-party libraries used in this project.

💸 Support

If you find this useful 😊

Getting Started

1. Create a Nuxt project

npx nuxi@latest init my-app
cd my-app

2. Run the init command

npx ui-thing@latest init

This sets up TailwindCSS, installs core dependencies, writes the theme CSS, and saves a ui-thing.config.ts to your project.

3. Start adding components

npx ui-thing@latest add

Package Manager Support

The CLI works with all major package managers. You will be asked to choose one during init.

| Manager | Supported | |---------|-----------| | npm | ✅ | | yarn | ✅ | | pnpm | ✅ | | bun | ✅ | | deno | ✅ |

Commands

init

npx ui-thing@latest init

Bootstraps your Nuxt project for UI Thing. This command:

• Installs all core dependencies (reka-ui, tailwind-variants, @nuxt/fonts, @vueuse/nuxt, etc.)
• Writes the Tailwind CSS theme file
• Registers required Nuxt modules
• Creates ui-thing.config.ts with your chosen paths and package manager

Options

| Flag | Description | |------|-------------| | -y, --yes | Skip all prompts and use defaults |

add

npx ui-thing@latest add [componentNames...]

Adds one or more components to your project. If no names are passed, an interactive search lets you pick from the full library.

# interactive selection
npx ui-thing@latest add

# add specific components
npx ui-thing@latest add button input popover

# add every component at once
npx ui-thing@latest add --all

After a component is added, the CLI prints a link to its documentation page.

Options

| Flag | Description | |------|-------------| | -a, --all | Add every available component in one shot | | --skip-config | Add components without a ui-thing.config.ts file. Auto-detects the Nuxt version and uses its default paths | | --package-manager <pm> | Set the package manager when using --skip-config (skips the PM prompt) |

--skip-config example

Useful when you just want the files without committing to the full config workflow:

# prompts for package manager, uses Nuxt 4 defaults
npx ui-thing@latest add popover --skip-config

# fully non-interactive
npx ui-thing@latest add popover --skip-config --package-manager bun

Note: Shared utility files installed by one component are also used by others. Removing them manually may break components that depend on them.

list

npx ui-thing@latest list

Lists all components available in the UI Thing library.

# show all available components
npx ui-thing@latest list

# show only components already installed in your project
npx ui-thing@latest list --installed

Options

| Flag | Description | |------|-------------| | --installed | Filter to components whose files are already present in your project |

update

npx ui-thing@latest update [componentNames...]

Re-fetches component files from the API and overwrites them with the latest version. Useful after a UI Thing release.

# update specific components
npx ui-thing@latest update button input

# pick from installed components interactively
npx ui-thing@latest update

remove

npx ui-thing@latest remove [componentNames...]

Deletes installed component files from your project (component files, utils, and composables). Prompts for confirmation before deleting anything.

# remove specific components
npx ui-thing@latest remove button

# pick from installed components interactively
npx ui-thing@latest remove

Note: Shared utility files used by multiple components will be deleted. Any other components that depend on them may stop working and will need to be re-added.

prose

npx ui-thing@latest prose

Adds prose components (typography styles for rendered markdown content). Select from the available prose components interactively.

block

npx ui-thing@latest block

Adds pre-built UI blocks (page sections, layouts, etc.) to your project. You can filter by category.

theme

npx ui-thing@latest theme

Swaps your project's color theme. Overwrites the Tailwind CSS theme file with the chosen theme.

prettier

npx ui-thing@latest prettier

Adds a Prettier configuration pre-configured for Tailwind CSS class sorting. Safe to run on an existing project — it will offer to merge with your current .prettierrc if one exists.

shortcuts

npx ui-thing@latest shortcuts

Adds a useShortcuts composable to your project for registering keyboard shortcuts.

Configuration

Running init creates a ui-thing.config.ts file at the root of your project:

export default {
  theme: "zinc",
  tailwindCSSLocation: "app/assets/css/tailwind.css",
  componentsLocation: "app/components/Ui",
  composablesLocation: "app/composables",
  pluginsLocation: "app/plugins",
  utilsLocation: "app/utils",
  force: true,
  useDefaultFilename: true,
  packageManager: "bun",
};

| Key | Description | |-----|-------------| | theme | Color theme (zinc, slate, rose, blue, etc.) | | tailwindCSSLocation | Path to your Tailwind CSS file | | componentsLocation | Where component .vue files are written | | composablesLocation | Where composable files are written | | pluginsLocation | Where plugin files are written | | utilsLocation | Where utility files are written | | force | Overwrite existing files without prompting | | useDefaultFilename | Skip per-file path prompts when adding components | | packageManager | Package manager used for installing dependencies |