Next.js

RetroUI ❤️ Next.js

1. Create Project

Run the init command to create a new Next.js project or to setup an existing one:

pnpm dlx shadcn@latest init

2. Install utilities

If the libs/utils.ts file is not present in your project, you can install it using the following command:

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

3. 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>;
}


Optional

You are free to pick your own fonts and theme, but if you'd like to use RetroUI theme then use the following guide.


1. Add Fonts

We are using Archivo Black for headings and Space Grotesk for everything else. You can install them from Nextjs fonts or manually from Google fonts.

import { Archivo_Black, Space_Grotesk } from "next/font/google";
 
const archivoBlack = Archivo_Black({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-head",
  display: "swap",
});
 
const space = Space_Grotesk({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-sans",
  display: "swap",
});
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${archivoBlack.variable} ${space.variable}`}>
        {children}
      </body>
    </html>
  );
}

2. Add Theme

Save your theme as CSS variables in global.css:

@theme {
  --font-head: var(--font-head);
  --font-sans: var(--font-sans);
 
  --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: #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;
}

If you need any additional help, you can feel free to ask it in our Discord community.

Last Updated: 06 Mar, 2024