Next.js Setup

NOTE

This guide assumes that you've finished the installation step.

Root Provider

This library exports a QuiRoot component which provides context for global notifications and alerts. It should wrap your component tree.

App Router

All exported QUI Components are currently client-only. This will change in the future. For now, please ensure that you're using them in Client components.

Create a Client-only layout component:

"use client"

import {ReactNode} from "react"
import {QuiRoot} from "@qui/react"

interface Props {
  children: ReactNode
}

export function ClientLayout({children}: Props) {
  return <QuiRoot>{children}</QuiRoot>
}

In your root layout, import the ClientLayout component:

import "./globals.css"
import {ReactNode} from "react"
import type {Metadata} from "next"
import {ClientLayout} from "./client-layout"

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
}

interface Props {
  children: ReactNode
}

export default function RootLayout({children}: Readonly<Props>) {
  return (
    <html lang="en">
      <body>
        <ClientLayout>{children}</ClientLayout>
      </body>
    </html>
  )
}

Pages Router

import {ReactNode} from "react"
import {AppProps} from "next/app"
import {QuiRoot} from "@qui/react"

export default function App({Component, pageProps}: AppProps): ReactNode {
  return (
    <QuiRoot>
      <Component {...pageProps} />
    </QuiRoot>
  )
}

Fonts

We recommend using next/font for optimized fonts.

import {Roboto_Flex, Roboto_Mono} from "next/font/google"

const robotoFlex = Roboto_Flex({
  axes: [
    "wdth",
    "GRAD",
    "slnt",
    "XTRA",
    "YOPQ",
    "YTLC",
    "YTUC",
    "YTAS",
    "YTDE",
    "YTFI",
  ],
  subsets: ["latin"],
  weight: "variable",
  variable: "--q-font-family",
})

const robotoMono = Roboto_Mono({
  preload: true,
  subsets: ["latin"],
  weight: "variable",
  variable: "--q-font-mono",
})

// then, in your root layout or _app.tsx
<html className={`${robotoFlex.variable} ${monoFont.variable}`}>
  // the rest of your app
</html>

Next, edit your application's global styles:

:root {
  font-family: var(--q-font-family);
}

/* Optional className to apply mono font directly */
.font-mono {
  font-family: var(--q-font-mono);
}

Theme

All components ship with dark and light variants.

TIP

The @qui/styles package applies CSS variables based on the presence of a dark or light className on the nearest ancestor element. We recommend installing the next-themes helper library, which handles this process for you automatically.

App Router

import "./globals.css"
import {ReactNode} from "react"
import type {Metadata} from "next"
import {ClientLayout} from "./client-layout"

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
}

interface Props {
  children: ReactNode
}

export default function RootLayout({children}: Readonly<Props>) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="dark"
          storageKey="qui-react-theme"
          themes={["light", "dark"]}
        >
          <ClientLayout>{children}</ClientLayout>
        </ThemeProvider>
      </body>
    </html>
  )
}

Pages Router

import {ReactNode} from "react"
import {AppProps} from "next/app"
import {ThemeProvider} from "next-themes"
import {QuiRoot} from "@qui/react"

export default function App({Component, pageProps}: AppProps): ReactNode {
  return (
    <QuiRoot>
      <ThemeProvider
        attribute="class"
        defaultTheme="dark"
        storageKey="qui-react-theme"
        themes={["light", "dark"]}
      >
        <Component {...pageProps} />
      </ThemeProvider>
    </QuiRoot>
  )
}

Import Styles

Next, import the QUI styles in your application's global styles:

@import "@qui/styles/dist/all.min.css";
@import "@qui/base/dist/all.min.css";

Setup Complete

Now you're ready to start importing and using our components. Continue on to our Component Documentation.

Installation

React Router