nanocode/RetroUI/content/docs/install/vite.mdx

---
title: Vite
description: RetroUI ❤️ Vite
lastUpdated: 30 May, 2025
---

### 1. Create Project

Start by creating a new React project using vite. Select the React + TypeScript template:

<CliCommand npmCommand="npm create vite@latest" />

<br />

### 2. Install Tailwind CSS

Install Tailwind CSS using the following command:

<CliCommand npmCommand="npm install tailwindcss @tailwindcss/vite" />

Replace everything in src/index.css with the following:

```css
@import "tailwindcss";
```

<br />

### 3. 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:

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

<br />

### 4. Edit tsconfig.app.json file
Add the following code to the tsconfig.app.json file to resolve paths, for your IDE:

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



<br />

### 5. Update vite.config.ts

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

<CliCommand npmCommand="npm install -D @types/node" />

vite.config.ts
```ts
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})
```

<br />

### 6. Install Shadcn
Run the `shadcn init` command to setup your project:

<CliCommand npmCommand="npx shadcn@latest init" />

You will be asked a few questions to configure components.json. Select the option you want to use.

<br />

### 7. Add RetroUI Theme
To make your app look like RetroUI, you need to add the theme to your app. You can later customize it to your liking.

#### 1. Install fonts

We are using `Archivo Black` for headings and `Space Grotesk` for everything else. You can install them from Google fonts.
Once your have the fonts, import them in your `index.html` or `styles.css` file:

```html
<!-- index.html -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@300..700&display=swap"
      rel="stylesheet"
    />
```
or, 

```css
/* styles.css */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
```
<br />

#### 2. Add Theme

Save your theme as CSS variables in `styles.css` file:

```scss
@theme {
  --font-head: 'Archivo Black', sans-serif;
  --font-sans: 'Space Grotesk', sans-serif;
  --radius: var(--radius);

  --shadow-xs: 1px 1px 0 0 var(--border);
  --shadow-sm: 2px 2px 0 0 var(--border);
  --shadow: 3px 3px 0 0 var(--border);
  --shadow-md: 4px 4px 0 0 var(--border);
  --shadow-lg: 6px 6px 0 0 var(--border);
  --shadow-xl: 10px 10px 0 1px var(--border);
  --shadow-2xl: 16px 16px 0 1px var(--border);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-primary-hover: var(--primary-hover);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
}

:root {
  --radius: 0;
  --background: #fff;
  --foreground: #000;
  --card: #fff;
  --card-foreground: #000;
  --primary: #ffdb33;
  --primary-hover: #ffcc00;
  --primary-foreground: #000;
  --secondary: #000;
  --secondary-foreground: #fff;
  --muted: #aeaeae;
  --muted-foreground: #5a5a5a;
  --accent: #fae583;
  --accent-foreground: #000;
  --destructive: #e63946;
  --destructive-foreground: #fff;
  --border: #000;
}

.dark {
  --radius: 0;
  --background: #1a1a1a;
  --foreground: #f5f5f5;
  --card: #242424;
  --card-foreground: #f5f5f5;
  --primary: #ffdb33;
  --primary-hover: #ffcc00;
  --primary-foreground: #000;
  --secondary: #3a3a3a;
  --secondary-foreground: #f5f5f5;
  --muted: #3f3f46;
  --muted-foreground: #a0a0a0;
  --accent: #fae583;
  --accent-foreground: #000;
  --destructive: #e63946;
  --destructive-foreground: #fff;
  --border: #3a3a3a;
}
```

<br />

### 8. That's it!

Now you can start using RetroUI components in your project. You can install them through CLI or manually.

<br />

<ComponentInstall>
  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/button.json'" />
  <ComponentInstall.Manual>
#### 1. Install dependencies:

<CliCommand npmCommand="npm install class-variance-authority" />

<br />

#### 2. Copy the code 👇 into your project:

<ComponentSource name="button" />

  </ComponentInstall.Manual>
</ComponentInstall>

After installing the component in your project, you can then simply import it like this:

```tsx
import { Button } from "@/components/retroui/Button";

export default function ButtonExample() {
  return <Button>Click Me!</Button>;
}
```

If you need any additional help, you can feel free to ask it in our [Discord community](https://discord.gg/Jum3NJxK6Q).