Vite Installation

Install and configure Vite.

Create Project

Run the init command to create a new Vite project:


pnpm dlx radianui@latest init --vite

Configure components.json

You will be asked a few questions to configure components.json:

components.json

√ No package.json found at C:\\Users\\RadianOS\\Projects. Create a new project? ... yes
√ What would you like to name your project? ... vite-project
√ Which color would you like to use as your brand color? » Cyan
√ Which font would you like to use for your project? » Geist
✔ Creating a new Vite project. This might take some time.
✔ Writing components.json file
✔ Setting up project configuration
✔ Installing dependencies
✔ Updating global CSS variables
 
Success! Project initialization completed. You may now add components.

Add Components

You can now start adding components to your project.


pnpm dlx radianui@latest add button

The command above will add the Button component to your project. You can then include it like this:

app.tsx

import {Button} from "@/components/ui/Button"
 
export default function App() {
  return (
    <div>
        <Button variant="strong" />
            Button
        </Button>
    </div>
  )
}

In existing Project

Install TailwindCSS


pnpm add tailwindcss @tailwindcss/vite

Replace everything in src/index.css with following

src/index.css

@import "tailwindcss";

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:

tsconfig.json

{
	"files": [],
	"references": [
		{
			"path": "./tsconfig.app.json"
		},
		{
			"path": "./tsconfig.node.json"
		}
	],
	"compilerOptions": {
		"baseUrl": ".",
		"paths": {
			"@/*": ["./src/*"]
		}
	}
}

Edit tsconfig.app.json file

tsconfig.app.json

{
	"compilerOptions": {
		// ...
		"baseUrl": ".",
		"paths": {
			"@/*": ["./src/*"]
		}
		// ...
	}
}

Update vite.config.ts

Add the following code to the vite.config.ts so your app can resolve paths without error:


pnpm add -D @types/node

vite.config.ts

import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
 
export default defineConfig({
	plugins: [react(), tailwindcss()],
	resolve: {
		alias: {
			"@": path.resolve(\_\_dirname, "./src")
		}
	}
})

Run the CLI

Run the radian init command to setup your project:


pnpm dlx radianui@latest init

✔ Before init checks completed
✔ Detecting framework. Detected Vite.
✔ Verifying tailwind configuration. Found Tailwind configuration.
✔ Verifying import alias. Found import alias prefix: @
✅ Preflight checks passed
🔍 Framework detected: vite, overriding provided option: next
✔ Writing components.json file
⠋ Setting up project configuration
✅ Vite project setup completed
✔ Project configuration completed
✔ Installing dependencies
 
Success! Project initialization completed. You may now add components.

Add Components

You can now start adding components to your project.


pnpm dlx radianui@latest add button

The command above will add the Button component to your project. You can then include it like this:

app.tsx

import { Button } from "@/components/ui/Button"
 
export default function App() {
  return (
    <div>
        <Button variant="strong"/>
            Button
        </Button>
    </div>
  )
}