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
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:
tailwind.config.js
filenuxt.config.ts
fileui-thing.config.ts
file with the default configurationcomponents
directory ( based on your answer)composables
directory ( based on your answer)utils
directory ( based on your answer)tailwind.css
file ( based on your answer) & add the starting theme to itprettierrc
file & then format your code.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:
components
directorycomposables
directoryutils
directoryplugins
directorynuxt.config.ts
fileUI 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.
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! 🙏