Skip to Content
OUI
GitHub

Vite

How to install and set up OUI in a Vite project

This guide will help you set up OUI in a new or existing Vite project with React and Tailwind CSS v4.

OUI has been tested with the following dependency versions:

Create a new Vite project

If you're starting from scratch, create a new Vite project with React and TypeScript:

pnpm create vite@latest my-app -- --template react-ts
cd my-app

Installation

Install dependencies

Install OUI packages and peer dependencies:

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

Install Tailwind CSS v4

Install Tailwind CSS v4 and the Vite plugin:

pnpm add tailwindcss @tailwindcss/vite

Configure Vite

Add the Tailwind CSS plugin to your vite.config.ts:

vite.config.ts
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
 
export default defineConfig({
  plugins: [
    // Add Tailwind CSS plugin
    tailwindcss(),
    react(),
  ],
})

Set up your CSS file

Create or update your main CSS file (e.g., src/globals.css) to import the OUI theme:

src/globals.css
@import "@opengovsg/oui-theme/tailwind.css";
/* 
 * Note: You may need to change the path relative to this css file to fit your
 * project structure, especially in a monorepo.
 */
@source "../path/to/node_modules/@opengovsg/oui-theme";

This import includes:

  • Tailwind CSS v4 base styles
  • OUI design tokens and theme variables
  • React Aria Components integration via tailwindcss-react-aria-components
  • Animation utilities via tw-animate-css

Set up the Inter font

Using the Inter NPM package

You can use the inter-ui NPM package to add the Inter font to your project.

Install the package:

pnpm add inter-ui

Then, import the font CSS in your global CSS file:

src/globals.css
@import "@opengovsg/oui-theme/tailwind.css";
@source "../path/to/node_modules/@opengovsg/oui-theme";
 
@import "inter-ui/inter.css";
@import "inter-ui/inter-variable.css";
 
@layer base {
  :root {
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
 
    @supports (font-variation-settings: normal) {
      --font-sans: "InterVariable", ui-sans-serif, system-ui, sans-serif;
    }
  }
}

Using Google Fonts

Alternatively, you can use Google Fonts to include the Inter font. Add the following <link> tag to the <head> of your index.html:

public/index.html
<head>
  <!-- ... -->
  <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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
    rel="stylesheet"
  />
  <!-- ... -->
</head>

Then, ensure your Tailwind configuration uses the Inter font for the --font-sans CSS variable:

src/globals.css
@import "@opengovsg/oui-theme/tailwind.css";
@source "../path/to/node_modules/@opengovsg/oui-theme";
 
@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

Import CSS in your app

Make sure your CSS file is imported in your app entry point:

src/main.tsx
import React from "react"
 
import "./globals.css"
 
import ReactDOM from "react-dom/client"
 
import App from "./App"
 
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

(Optional) Add react-aria-component Link provider

If your app uses routing (e.g., with Tanstack Router), wrap your app with the LinkProvider from react-aria-components to have proper routing behavior when using react-aria-components Link component:

app/providers.tsx (or wherever your providers are defined)
import { RouterProvider } from "react-aria-components"
import { useHref, useNavigate } from "your-router"
 
export function Providers() {
  let navigate = useNavigate()
 
  return (
    <RouterProvider navigate={navigate} useHref={useHref}>
      <OtherProviders>{/* ... */}</OtherProviders>
    </RouterProvider>
  )
}
app/layout.tsx (or wherever your root layout is defined)
import { Providers } from "./providers"
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className="antialiased">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

Read more about Client Side Routing with react-aria-components here.

Start using OUI components

You're all set! Start using OUI components in your app:

src/some-component.tsx
import { Button } from "@opengovsg/oui"
 
function SomeComponent() {
  return (
    <div className="flex min-h-screen items-center justify-center gap-4">
      <Button>Default</Button>
      <Button color="main">Main</Button>
      <Button variant="outline">Outline</Button>
    </div>
  )
}

TypeScript configuration

For the best TypeScript experience, ensure your tsconfig.json includes:

tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "jsx": "react-jsx"
  }
}

Next steps

  • Browse the Components documentation to explore available components
  • Check out the Theming guide to customize the design system
GitHubEdit page