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

pnpm

npm

yarn

bun

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

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

/* styles/tailwind.css */
@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.

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

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>
  )
}