Setup

So you want to use UI Thing in your Nuxt project? Great! This guide will walk you through the steps to get started.

Prerequisites

Before you can use UI Thing, you need to have a Nuxt project. If you don't have one yet, you can create one with the following command:

npx nuxi@latest init my-app

This will create a new Nuxt project in the my-app directory. You can then navigate to that directory and start the development server:

cd my-app && npm run dev

Initialization

Once you have a Nuxt project, you can initialize UI Thing with the following command:

npx ui-thing@latest init

This command will ask you a bunch of question the first time you run it

✔ Which theme do you want to start with? › Violet
✔ Where is your tailwind.css file located? … app/assets/css/tailwind.css
✔ Where should your components be stored? … app/components/Ui
✔ Where should your composables be stored? … app/composables
✔ Where should your plugins be stored? … app/plugins
✔ Where should your utils be stored? … app/utils
✔ Should we just replace component files if they already exist? … yes
✔ Would you like to use the default filename when adding components? … yes
✔ Which package manager do you use? › Npm

Adding components

Once initialized, add components by running:

npx ui-thing@latest add

You'll be prompted to select the components you want.

UI Thing will then:

• Copy the selected components into your components directory
• Add any required composables, utils, and plugins
• Install missing dependencies
• Update nuxt.config with necessary configuration

Adding themes

UI Thing ships with several pre-made themes.

Add one to your project with:

npx ui-thing@latest theme

This will ask you to select the theme you want to add to your project. Once you have selected a theme, UI Thing will ask you if you want to overwrite your tailwind.css file. If you answer yes, it will overwrite your tailwind.css file with the theme you selected.

⚠️ Please note that this will overwrite your tailwind.css file. If you have made any changes to this file, you will lose them.

Theme source

The themes included in this cli all come from shadcn/ui theme page.

So if you don't want to use this CLI to add themes, you can just customize your theme on that page and copy the code into your tailwind.css file.

Thanks shadcn for making these themes available for free! 🙏