Installation

Install the Aqqo-ui or/and Aqqo-ui-brand packages

Pre-requisites

Next.js project
Tailwind CSS installed

Create .npmrc file

Create a .npmrc file in the root of your project and add the following line:

@aqqo:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken={token}

Replace token with your personal access token. You can create a personal access token by following the instructions here.

Install the packages

Install the packages using npm or yarn:

npm install

Change root layout.jsx

Adjust the root layout file to include the custom fonts. This will make sure the fonts are loaded before the rest of the page is rendered.

layout.jsx

import { Instrument_Sans, Poppins, Roboto } from 'next/font/google'
import './globals.css'
import '@aqqo/aqqo-ui-brand/style'
import '@aqqo/aqqo-ui/style'

const instrumentSans = Instrument_Sans({
    weight: ['400', '500', '600', '700'],
    subsets: ['latin'],
    variable: '--font-instrument-sans',
})

const poppins = Poppins({
    weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
    subsets: ['latin'],
    variable: '--font-poppins',
})

const roboto = Roboto({
    weight: ['100', '300', '400', '500', '700', '900'],
    subsets: ['latin'],
    variable: '--font-roboto',
})

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body
                className={`${poppins.variable} ${instrumentSans.variable} ${roboto.variable}`}>
                {children}
            </body>
        </html>
    )
}

Change tailwind.config.js

Adjust the tailwind.config.js file to include the custom fonts and colors.

tailwind.config.json

theme: {
    extend: {
      colors: {
        brand: {
          "dark-green": "#032622",
          "light-green": "#01D868 ",
          "off-white": "#f4f2ef"
        }
      },
      fontFamily: {
        "instrument-sans": "var(--font-instrument-sans)",
        "poppins": "var(--font-poppins)",
        "roboto": "var(--font-roboto)",
      }
    },
  },

Change the globals.css

Add default styles to the globals.css file. This includes the font-family and text styles.

globals.css

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

  @tailwind base {
    body {
      @apply font-roboto text-sm;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply font-poppins !font-medium;
    }

    a {
        @apply font-medium !text-blue-600 transition-colors hover:!text-blue-700;
    }
  }