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:

npx shadcn@latest init

2. Install utilities

Many components rely on the cn utility function. You can install it using the following command:

npx 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.


npx 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 Share Tech for everything else. You can install them from Nextjs fonts or manually from Google fonts.


 
import { Archivo_Black, Share_Tech } from "next/font/google";
 
const archivoBlack = Archivo_Black({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-head",
  display: "swap",
});
 
const shareTech = Share_Tech({
  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} ${shareTech.variable}`}
      >
        {children}
      </body>
    </html>
  );
}

2. Add Theme

Save your theme as CSS variables in global.css:

:root {
  --muted: #606067;
  --background: #fff;
  --foreground: #000;
  --primary-50: #fffef0;
  --primary-100: #fffac2;
  --primary-200: #fff299;
  --primary-300: #ffe766;
  --primary-400: #ffdb33;
  --primary-500: #ffcc00;
  --primary-600: #ffb700;
  --primary-700: #ff9f00;
  --primary-800: #e68a00;
  --primary-900: #b36b00;
}

3. Tailwind Config

Connect your theme to Tailwind in tailwind.config.ts:

import type { Config } from "tailwindcss";
 
const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./preview/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      textColor: {
        muted: "var(--muted)",
      },
      fontFamily: {
        head: ["var(--font-head)"],
        sans: ["var(--font-sans)"],
      },
      boxShadow: {
        xs: "1px 1px 0 0 #000",
        sm: "2px 2px 0 0 #000",
        md: "3px 3px 0 0 #000",
      },
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
        primary: {
          50: "var(--primary-50)",
          100: "var(--primary-100)",
          200: "var(--primary-200)",
          300: "var(--primary-300)",
          400: "var(--primary-400)",
          500: "var(--primary-500)",
          600: "var(--primary-600)",
          700: "var(--primary-700)",
          800: "var(--primary-800)",
          900: "var(--primary-900)",
        },
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};
 
export default config;

Last Updated: 06 Mar, 2024