Setup

Learn how to setup your Nuxt 3 project with UI Thing.

So you want to use UI Thing in your Nuxt 3 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 3 project. If you don't have one yet, you can create one with the following command:

npx nuxi@latest init my-nuxt3-project

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

cd my-nuxt3-project && npm run dev

Initialization

Once you have a Nuxt 3 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 Nuxt version are you using? › Nuxt 4
✔ Which theme do you want to start with? › Zinc
✔ Where is your tailwind.css file located? … app/assets/css/tailwind.css
✔ Where is your tailwind.config file located? … tailwind.config.js
✔ 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

After answering these questions, UI Thing will:

• Create a tailwind.config.js file
• Update your nuxt.config.ts file
• Add the necessary dependencies
• Create a ui-thing.config.ts file with the default configuration
• Create a components directory ( based on your answer)
• Create a composables directory ( based on your answer)
• Create a utils directory ( based on your answer)
• Create a tailwind.css file ( based on your answer) & add the starting theme to it
• Create a prettierrc file & then format your code.

Adding components

Now that you have initialized UI Thing in your project, you can start adding components. You can do this with the following command:

npx ui-thing@latest add

This command will then ask you to select the components that you want to add to your project.

Once you have selected the components you want to add, UI Thing will:

• Add the components to your components directory
• Add the composables to your composables directory
• Add the utils to your utils directory
• Add the plugins to your plugins directory
• Install the necessary dependencies
• Add the necessary configuration to your nuxt.config.ts file

Adding themes

UI Thing comes with a few themes out of the box. You can add a theme to your project with the following command:

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 dont 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! 🙏