Vite
Create project
Start by creating a new Vite project:
npm create vite@latest
Add tailwindcss
Configure Tailwind CSS: Setup Tailwind CSS
TypeScript configuration
Edit tsconfig.json file
The current version of Vite splits TypeScript configuration into three files, two of which need to be edited.
Add the baseUrl
and paths
properties to the compilerOptions
section of the tsconfig.json
and
tsconfig.app.json
files:
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.node.json"
}
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
Edit tsconfig.app.json file
Add the following code to the tsconfig.app.json
file to resolve paths, for your IDE:
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
// ...
}
}
Update vite.config.ts
Run the following command to install the @types/node
package:
# (so you can import "path" without error)
npm i -D @types/node
Then, add the following code to the vite.config.ts so your app can resolve paths without errors:
import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})
Setup
Run the init
command to setup uilabs in your project:
npx uilabs-cli init
You can use the -d
flag for defaults i.e yes
, Tailwind
, @/components
, yes
and yes
.
npx uilabs-cli init -d
Configuration
You will be asked a few questions to configure uilabs.config.json
:
? Would you like to use TypeScript? › no / yes (default)
? Configure the import alias for components: › @/components
? Would you like to install @uilabs/utils package? › no / yes (default)
? Are you using React Server Components? › no / yes (default)
Add components
You can now start adding components to your project.
npx uilabs-cli add [component-id]
The command above will add the component to your project in the directory you specified during the initialization.