CLI

Learn how to use the cli that comes with this project.

npx ui-thing@latest

Usage: ui-thing [options] [command]

CLI for adding ui-thing components to your Nuxt application

Options:
  -V, --version                      output the version number
  -h, --help                         display help for command

Commands:
  init [options]                     Initialize UI Thing in your Nuxt project.
  add [options] [componentNames...]  Add a list of components to your project.
  theme                              Add a new theme to your project.
  shortcuts                          Add the shortcuts composable to your project.
  prettier                           Add prettier config to your project.
  help [command]                     display help for command

init

npx ui-thing@latest init

This command will initialize UI Thing in your Nuxt project. This will:

Update your nuxt.config file
Add the necessary dependencies
Create a ui-thing.config.ts file with the default configuration

It is recommended that you run this command in a new Nuxt project before adding any components.

Usage: ui-thing init [options]

Initialize UI Thing in your Nuxt project.

  ✅ Add tailwindcss to your project
  ✅ Update your nuxt.config file
  ✅ Add the necessary dependencies
  ✅ Create a ui-thing.config file with the default configuration

Options:
  -f --force                 Overwrite config file if it exists. (default: false)
  -y --yes                   Skip prompts and use default values. (default: false)
  -n --nuxtVersion <number>  Specify the Nuxt version you are using.
  -h, --help                 display help for command

add

npx ui-thing@latest add

This command will add a list of components to your project. If no argument is passed, it will ask you to select from a list of available components.

? Select the components you want to add >
Instructions:
    ↑/↓: Highlight option
    ←/→/[space]: Toggle selection
    [a,b,c]/delete: Filter choices
    enter/return: Complete answer

Filtered results for: Enter something to filter

◯  Accordion
◯  Alert
◯  Alert Dialog
◯  ApexCharts
◯  Apexcharts
◯  Aspect Ratio
◯  Autocomplete
◯  Avatar
◯  Badge
◯  Border Beam

theme

The theme command allows you to add a new theme to your project.

You can visit the themes page on shadcn to see the available themes.

npx ui-thing@latest theme

Running this command allows you to select a theme from the list

? Which theme do you want to add? »
>   Zinc
    Slate
    Stone
    Gray
    Neutral
    Red
    Rose
    Orange
    Green
  ↓ Blue

prettier

The prettier command allows you to add an opinionated prettier config to your project.

npx ui-thing@latest prettier

This will create a .prettierrc file that looks like this

{
  "arrowParens": "always",
  "endOfLine": "lf",
  "plugins": ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
  "printWidth": 100,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": true,
  "tailwindFunctions": ["tv"],
  "importOrder": ["<BUILTIN_MODULES>", "<THIRD_PARTY_MODULES>", "<TYPES>", "", "^[.]"]
}

It will then instal the necessary dependencies and format your code.

shortcuts

The shortcuts command allows you to add the shortcuts composables to your project.

npx ui-thing@latest shortcuts

This will create a shortcuts.ts file in your composables directory.

Setup

Learn how to setup your Nuxt project with UI Thing.

Starters

Quickly create a Nuxt project with one of the UI Thing starters below.