Install @opengovsg/oui, @opengovsg/oui-theme and its peer dependencies.

pnpm add @opengovsg/oui @opengovsg/oui-theme tailwindcss react-aria-components motion

Add @opengovsg/oui-theme/tailwind.css to your tailwind CSS file.

@import "@opengovsg/oui-theme/tailwind.css";

Read the respective framework guides for specific instructions on how to consume TailwindCSS in your project.

If you are using oui in a monorepo, you might need to add the following @source directive to point to the installation directory @opengovsg/oui-theme, or Tailwind might not detect the class names of oui components.

@import "@opengovsg/oui-theme/tailwind.css";
@source "../path/to/node_modules/@opengovsg/oui-theme";

Install and configure the Inter font.

OUI is configured to work with the Inter font by default. The importing of the fonts differs based on your project setup. You can either self-host the font files or use a CDN like Google Fonts.

Look at the specific framework guides for instructions on how to set up the Inter font in your project:

• Next.js Guide
• Vite Guide

After the font is set up, ensure that your Tailwind configuration uses the Inter font for the --font-sans CSS variable.

@import "@opengovsg/oui-theme/tailwind.css";
@source "../path/to/node_modules/@opengovsg/oui-theme";
 
@theme {
  /* 
   * This assignment will differ depending on how the font is set up.
   * The important part is to ensure that --font-sans is defined with the Inter font.
   */
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
}

Done! Start importing and using OUI components alongside TailwindCSS in your project.

import { Button } from "@opengovsg/oui"
 
const Demo = () => {
  return (
    <div className="flex flex-row gap-4">
      <Button>Click me</Button>
      <Button>Click me</Button>
    </div>
  )
}