installation

Vite Installation

Install and configure Vite.

Create Project

Run the init command to create a new Vite project:


Configure components.json

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


components.json

Add Components

You can now start adding components to your project.



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


app.tsx

In existing Project

Install TailwindCSS


Replace everything in src/index.css with following


src/index.css

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:


tsconfig.json

Edit tsconfig.app.json file

tsconfig.app.json

Update vite.config.ts

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



vite.config.ts

Run the CLI

Run the radian init command to setup your project:



Add Components

You can now start adding components to your project.



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


app.tsx