Vite

RetroUI ❤️ Vite

1. Create Project

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

pnpm create vite@latest

2. Install Tailwind CSS

Install Tailwind CSS using the following command:

pnpm install tailwindcss @tailwindcss/vite

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

@import "tailwindcss";

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:

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

4. 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/*"
      ]
    }
    // ...
  }
}

5. Update vite.config.ts

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

pnpm install -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"
 
// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

6. Install Shadcn

Run the shadcn init command to setup your project:

pnpm dlx shadcn@latest init

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


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:

<!-- 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,

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

2. Add Theme

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

@theme {
  --font-head: 'Archivo Black', sans-serif;
  --font-sans: 'Space Grotesk', sans-serif;
  --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 {
  --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 {
  --background: #000000;
  --foreground: #eaeaea;
  --card: #1e1e1e;
  --card-foreground: #eaeaea;
  --primary: #ffcc00;
  --primary-hover: #ffdb33;
  --primary-foreground: #000;
  --secondary: #fff;
  --secondary-foreground: #000;
  --muted: #5a5a5a;
  --muted-foreground: #aeaeae;
  --accent: #ffd966;
  --accent-foreground: #000;
  --destructive: #e63946;
  --destructive-foreground: #fff;
  --border: #eee;
}

8. That's it!

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


pnpm dlx shadcn@latest add 'https://retroui.dev/r/button.json'

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

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.

Last Updated: 30 May, 2025