Getting Started

This guide will help you get started with RetroUI, a retro styled UI library based on Tailwind CSS.


1. Add the fonts

We are useing Archivo Black for headings and Share Tech for everything else.

Installation form Google Fonts:


<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=Share+Tech&display=swap" rel="stylesheet">              
              

Save the fonts in global.css:


:root {
  --font-head: "Archivo Black", sans-serif;
  --font-sans: "Share Tech", sans-serif;
}         
            
2. Add the theme to your tailwind.config.js file.
import type { Config } from "tailwindcss";

const config = {
  theme: {
    extend: {
      fontFamily: {
        head: ["var(--font-head)"],
        sans: ["var(--font-sans)"],
      },
      boxShadow: {
        "xs": "1px 1px 0 0 #000",
        "md": "3px 3px 0 0 #000",
        "3xl": "10px 10px 0 0 #000",
      },
      colors: {
        primary: {
          50: "#FFFEF0",
          100: "#FEF9C3",
          200: "#FEF08A",
          300: "#FDE047",
          400: "#FACC15",
          500: "#EAB308",
          600: "#CA8A04",
          700: "#A16207",
          800: "#854D0E",
          900: "#713F12",
        },
      },
    },
  },
};
export default config;
3. Now start copy-pasting the components!