āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/logging-studio/retroui/install/vite ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
Start by creating a new React project using vite. Select the React + TypeScript template:
<CliCommand npmCommand="npm create vite@latest" /> <br />Install Tailwind CSS using the following command:
<CliCommand npmCommand="npm install tailwindcss @tailwindcss/vite" />Replace everything in src/index.css with the following:
@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:
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.node.json"
}
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
Add the following code to the tsconfig.app.json file to resolve paths, for your IDE:
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
// ...
}
}
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
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"),
},
},
})
Run the shadcn init command to setup your project:
You will be asked a few questions to configure components.json. Select the option you want to use.
<br />To make your app look like RetroUI, you need to add the theme to your app. You can later customize it to your liking.
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');
Save your theme as CSS variables in styles.css file:
@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;
}
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 /></ComponentInstall.Manual> </ComponentInstall>
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.
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā