OUI Design System

https://oui.open.gov.sg/docs
Admin
OUI is a comprehensive design system providing accessible and consistent React components built for...
Tokens:35,806
Snippets:427
Trust Score:9.6
Update:9 months ago
Show doc for...
Tokens:
Raw
### Install Inter UI NPM Package

Source: https://oui.open.gov.sg/docs/getting-started/next

Installs the `inter-ui` NPM package for font integration.

```bash
pnpm add inter-ui
```

--------------------------------

### Install Tailwind CSS v4

Source: https://oui.open.gov.sg/docs/getting-started/next

Installs Tailwind CSS v4 and the necessary PostCSS plugin for integration.

```bash
pnpm add tailwindcss @tailwindcss/postcss
```

--------------------------------

### Install OUI Dependencies

Source: https://oui.open.gov.sg/docs/getting-started/next

Installs OUI packages and their peer dependencies for use in a Next.js project.

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

--------------------------------

### Create Next.js Project

Source: https://oui.open.gov.sg/docs/getting-started/next

Command to create a new Next.js project with TypeScript and ESLint enabled.

```bash
pnpm create next-app@latest my-app --typescript --eslint
cd my-app
```

--------------------------------

### Install OUI Packages (pnpm)

Source: https://oui.open.gov.sg/docs/getting-started/installation

Installs the core OUI library, the theme, and peer dependencies like Tailwind CSS, React Aria Components, and Motion using pnpm. Ensure Node.js version 20.x or later is used.

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

--------------------------------

### Import and Use OUI Button Component (React)

Source: https://oui.open.gov.sg/docs/getting-started/installation

Demonstrates how to import and use the OUI Button component within a React application after installation and configuration. This example shows basic usage with styling applied via Tailwind CSS classes.

```jsx
import { Button } from "@opengovsg/oui"

const Demo = () => {
  return (
    <div className="flex flex-row gap-4">
      <Button>Click me</Button>
      <Button>Click me</Button>
    </div>
  )
}
```

--------------------------------

### Import OUI Theme CSS

Source: https://oui.open.gov.sg/docs/getting-started/next

Imports the OUI theme into the global CSS file, including base styles and design tokens.

```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";
```

--------------------------------

### Import Global CSS in Layout

Source: https://oui.open.gov.sg/docs/getting-started/next

Ensures the global CSS file is imported into the root layout of the Next.js application.

```javascript
import type { Metadata } from "next"
 
import "./globals.css"
 
export const metadata: Metadata = {
  title: "My App",
  description: "My app description",
}
 
export default function RootLayout({
  children,
}: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}
```

--------------------------------

### Install Tailwind CSS v4 and Vite Plugin (pnpm)

Source: https://oui.open.gov.sg/docs/getting-started/vite

Installs Tailwind CSS v4 and its associated Vite plugin using pnpm. These are required for styling within the Vite project.

```bash
pnpm add tailwindcss @tailwindcss/vite
```

--------------------------------

### Set up React Aria Link Provider

Source: https://oui.open.gov.sg/docs/getting-started/next

Wraps the application with `RouterProvider` to enable client-side navigation with `react-aria-component`'s Link component.

```javascript
"use client"
 
import { useRouter } from "next/navigation"
import { RouterProvider } from "react-aria-components"
 
export function Providers({ children }: { children: React.ReactNode }) {
  const router = useRouter()
 
  return <RouterProvider navigate={router.push}>{children}</RouterProvider>
}
```

```javascript
import type { Metadata } from "next"
 
import { Providers } from "./providers"
 
import "./globals.css"
 
export const metadata: Metadata = {
  title: "My App",
  description: "My app description",
}
 
export default function RootLayout({
  children,
}: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}
```

--------------------------------

### Configure PostCSS for Tailwind CSS

Source: https://oui.open.gov.sg/docs/getting-started/next

Configures the PostCSS build process to use the Tailwind CSS plugin.

```javascript
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}
 
export default config
```

--------------------------------

### Configure Inter Font with next/font

Source: https://oui.open.gov.sg/docs/getting-started/next

Sets up the Inter font using `next/font` and configures Tailwind CSS to use it as the primary sans-serif font.

```javascript
import { Inter } from "next/font/google"
 
const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
})

```

```javascript
<html lang="en" className={inter.variable}>
  <body>{children}</body>
</html>
```

```css
@import "@opengovsg/oui-theme/tailwind.css";
@source "../path/to/node_modules/@opengovsg/oui-theme";
 
@theme {
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
}
```

--------------------------------

### Use OUI Button Components in Next.js App Router

Source: https://oui.open.gov.sg/docs/getting-started/next

Demonstrates how to import and use OUI Button components within a Next.js application's App Router. Requires the 'use client' directive for components that interact with the browser. This example shows basic button usage with different color and variant options.

```typescript
"use client"

import { Button } from "@opengovsg/oui"

export default function Home() {
  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>
  )
}
```

--------------------------------

### Optional: React Aria LinkProvider Setup

Source: https://oui.open.gov.sg/docs/getting-started/vite

Configures the `LinkProvider` from `react-aria-components` in `app/providers.tsx` (or equivalent) to enable proper routing behavior with the `Link` component, especially when using client-side routing libraries.

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

--------------------------------

### Use Oui Button Components (React/TSX)

Source: https://oui.open.gov.sg/docs/getting-started/vite

Demonstrates how to import and use various Button components from the '@opengovsg/oui' library in a React TSX file. It shows examples of default, main colored, and outlined buttons within a flex container.

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

--------------------------------

### Import Global CSS in App Entry Point

Source: https://oui.open.gov.sg/docs/getting-started/vite

Imports the global CSS file (`src/globals.css`) into the application's main entry point (`src/main.tsx`). This ensures all global styles are applied.

```typescript
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>,
)
```

--------------------------------

### Configure Next.js Pages Router with OUI Providers

Source: https://oui.open.gov.sg/docs/getting-started/next

Sets up a Next.js application using the Pages Router to integrate OUI components. This involves importing global styles and wrapping the application with necessary providers like `RouterProvider` in `pages/_app.tsx`. Ensures compatibility with `react-aria-components` for accessibility.

```typescript
import type { AppProps } from "next/app"
import { useRouter } from "next/router"
import { RouterProvider } from "react-aria-components"

import "../styles/globals.css"

export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter()

  return (
    <RouterProvider navigate={router.push}>
      <Component {...pageProps} />
    </RouterProvider>
  )
}
```

--------------------------------

### Configure Inter Font with NPM Package

Source: https://oui.open.gov.sg/docs/getting-started/next

Imports Inter font CSS from the NPM package and sets CSS variables for font families.

```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;
    }
  }
}
```

--------------------------------

### Create Vite Project with React and TypeScript (pnpm)

Source: https://oui.open.gov.sg/docs/getting-started/vite

Command to create a new Vite project using pnpm with the React and TypeScript template. Navigates into the newly created project directory.

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

--------------------------------

### OUI Toast Setup and Usage (React)

Source: https://oui.open.gov.sg/docs/components/toast

Demonstrates how to set up the `Toaster` component in your root layout and use the `toast` function to trigger notifications within a React component. Requires the `@opengovsg/oui` package.

```tsx
import { toast, Toaster } from "@opengovsg/oui"

// In your root layout (e.g., layout.tsx)
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

// In a page or component (e.g., page.tsx)
import { Button } from "@opengovsg/oui"
import { toast } from "@opengovsg/oui"

function MyComponent() {
  return (
    <Button onPress={() => toast("This is a toast message")}>Show toast</Button>
  )
}
```

--------------------------------

### TypeScript Configuration for OUI Components

Source: https://oui.open.gov.sg/docs/getting-started/next

Essential TypeScript configuration for optimal integration with OUI components and Next.js. Ensures correct module resolution and JSX rendering. This configuration should be included in your `tsconfig.json` file.

```json
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "jsx": "preserve"
  }
}
```

--------------------------------

### FileDropzone for Multiple Files

Source: https://oui.open.gov.sg/docs/components/file-dropzone

Demonstrates how to configure the FileDropzone to accept multiple files simultaneously using the `maxFiles` prop. This example allows up to 5 files.

```jsx
<FileDropzone
  label="Upload multiple files"
  maxFiles={5}
/>
```

--------------------------------

### Optional: Wrap App with Providers

Source: https://oui.open.gov.sg/docs/getting-started/vite

Wraps the application's root layout (`app/layout.tsx`) with the defined `Providers` component. This ensures that the `LinkProvider` and other necessary context providers are available throughout the app.

```typescript
import { Providers } from "./providers"
 
export default function RootLayout({
  children,
}: { children: React.ReactNode }) {
  return (
    <html lang="en" className="antialiased">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}
```

--------------------------------

### Install @internationalized/date for DateField

Source: https://oui.open.gov.sg/docs/components/date-field

Installs the @internationalized/date library, which provides essential utilities for handling date and time parsing and manipulation within the DateField component.

```bash
pnpm add @internationalized/date
```

```bash
npm install @internationalized/date
```

```bash
yarn add @internationalized/date
```

```bash
bun add @internationalized/date
```

--------------------------------

### FileDropzone Showing Rejected Files

Source: https://oui.open.gov.sg/docs/components/file-dropzone

Shows how to display files that failed validation using the `showRejectedFiles` prop. This example is configured to accept only text files and demonstrates rejecting an image.

```jsx
<FileDropzone
  label="Upload text files only"
  allowedMimeTypes={["text/*"]}
  showRejectedFiles={true}
/>
```

--------------------------------

### Include Inter Font via Google Fonts

Source: https://oui.open.gov.sg/docs/getting-started/vite

Adds Google Fonts links to the `index.html` to include the Inter font. This is an alternative to using the NPM package.

```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>
```

--------------------------------

### Configure Tailwind CSS for Monorepo with OUI Theme

Source: https://oui.open.gov.sg/docs/getting-started/installation

When using OUI within a monorepo, this configuration ensures Tailwind CSS correctly detects OUI component class names by adding a `@source` directive pointing to the theme's installation directory.

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

--------------------------------

### Import OUI Theme CSS

Source: https://oui.open.gov.sg/docs/getting-started/vite

Imports the OUI theme into the main CSS file (`src/globals.css`). This includes Tailwind CSS base styles, OUI design tokens, and integrations for React Aria Components and animation utilities.

```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";
```

--------------------------------

### Import and Use FileDropzone Component

Source: https://oui.open.gov.sg/docs/components/file-dropzone

Demonstrates how to import the FileDropzone component from the @opengovsg/oui library and use it in a React application. This is the basic setup for integrating the component.

```jsx
import { FileDropzone } from "@opengovsg/oui"

<FileDropzone aria-label="Upload files" />
```

--------------------------------

### Controlled DateField Example

Source: https://oui.open.gov.sg/docs/components/date-field

Demonstrates a controlled DateField where the date value is managed by the application's state using `value` and `onChange` props.

```jsx
let [date, setDate] = useState(parseDate("2024-04-04"));

<>
  <DateField
    label="Date (controlled)"
    value={date}
    onChange={setDate}
  />
  <p>
    Selected date: {date.toDate(getLocalTimeZone()).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
  </p>
</>
```

--------------------------------

### Controlled Accordion Example (React)

Source: https://oui.open.gov.sg/docs/components/accordion

Demonstrates how to control the expanded state of accordion items programmatically. The 'expandedKeys' prop manages the currently expanded items, and 'onExpandedChange' handles state updates.

```jsx
const [expanded, setExpanded] = React.useState(['item-1']);

<Accordion expandedKeys={expanded} onExpandedChange={setExpanded}>
  <AccordionItem key="item-1" title="First controlled item">
    <AccordionContent>Content for the first item.</AccordionContent>
  </AccordionItem>
  <AccordionItem key="item-2" title="Second controlled item">
    <AccordionContent>Content for the second item.</AccordionContent>
  </AccordionItem>
</Accordion>
```

--------------------------------

### Read Only DateField Example

Source: https://oui.open.gov.sg/docs/components/date-field

Demonstrates a read-only DateField, displaying a date value without allowing any user modifications.

```jsx
<DateField label="Birth date" isReadOnly value={parseDate('2019-07-27')} />
```

--------------------------------

### FileDropzone with File Size Limits

Source: https://oui.open.gov.sg/docs/components/file-dropzone

Shows how to enforce file size restrictions on uploads using `maxFileSize` and `minFileSize` props. Sizes are specified in bytes, with this example setting limits for documents.

```jsx
<FileDropzone
  label="Upload documents"
  minFileSize={10000} // Approx 9.77 KB
  maxFileSize={2000000} // Approx 1.91 MB
/>
```

--------------------------------

### FileDropzone with Allowed MIME Types

Source: https://oui.open.gov.sg/docs/components/file-dropzone

Illustrates how to restrict uploaded file types using the `allowedMimeTypes` prop. This example specifically allows only image files, supporting wildcards.

```jsx
<FileDropzone
  label="Upload images"
  allowedMimeTypes={["image/*"]}
/>
```

--------------------------------

### NumberField with Start and End Content (React)

Source: https://oui.open.gov.sg/docs/components/number-field

Illustrates adding custom content, such as currency symbols or units, to the start or end of the NumberField input using the `startContent` and `endContent` props.

```javascript
<NumberField
  label="Price"
  startContent="$"
  endContent="SGD"
/>

```

--------------------------------

### FileDropzone with Error Handling

Source: https://oui.open.gov.sg/docs/components/file-dropzone

Illustrates how to handle file validation errors using the `onError` callback. This example specifically focuses on accepting only PDF files and includes size validation.

```jsx
<FileDropzone
  label="Upload PDF only"
  allowedMimeTypes={["application/pdf"]}
  maxFileSize={1000000} // Approx 976.56 KB
  onError={(error) => console.log(error)}
/>
```

--------------------------------

### Draggable Modal Example

Source: https://oui.open.gov.sg/docs/components/modal

Shows how to make a Modal draggable using the `useDraggable` hook. It's recommended to use `fade` or `none` animation for a smoother experience, as `zoom` animation might interfere with dragging.

```jsx
import {
  Modal,
  ModalTrigger,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Button,
} from "@/components/ui/modal";
import { useDraggable } from "@react-dnd/core"; // Assuming a library like react-dnd or a custom hook

export default function DraggableModalDemo() {
  const { setNodeRef } = useDraggable({
    id: "draggable-modal",
    // ... other draggable configurations
  });

  return (
    <Modal animation="fade">
      <ModalTrigger asChild>
        <Button variant="outline">Open Draggable Modal</Button>
      </ModalTrigger>
      <ModalContent ref={setNodeRef}>
        <ModalHeader>Draggable Modal</ModalHeader>
        <ModalBody>You can drag this modal around.</ModalBody>
        <ModalFooter>
          <Button>Close</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
}
```

--------------------------------

### Basic Navbar Structure in React JSX

Source: https://oui.open.gov.sg/docs/components/navbar

This JSX example demonstrates the basic structure of a Navbar using OUI components. It includes a brand element and navigation content with items, suitable for desktop or general navigation.

```jsx
<Navbar>
  <NavbarBrand>
    <p className="font-bold">OUI</p>
  </NavbarBrand>
  <NavbarContent justify="center">
    <NavbarItem>
      <Link href="#">Features</Link>
    </NavbarItem>
    <NavbarItem isActive>
      <Link href="#">Customers</Link>
    </NavbarItem>
  </NavbarContent>
  <NavbarContent justify="end">
    <NavbarItem>
      <Link href="#">Login</Link>
    </NavbarItem>
  </NavbarContent>
</Navbar>

```

--------------------------------

### Set Controlled Date Range with RangeCalendar

Source: https://oui.open.gov.sg/docs/components/range-calendar

Demonstrates how to set a controlled date range in a RangeCalendar component. This example shows how to pre-select a date range, impacting the calendar's initial view and selected dates. It does not require external libraries beyond the RangeCalendar component itself.

```javascript
import {
  RangeCalendar,
  useRangeCalendar,
} from '@react-aria/calendar';
import {
  useDateFormatter,
  getLocalTimeZone,
} from '@react-aria/i18n';
import * as React from 'react';

function DatePickerWithCalendar() {
  let { calendarProps, dateProps, month, nextMonth, prevMonth, weekStartDay } = useRangeCalendar({
    locale: 'en-SG',
    createCalendar: createCalendar('gregory'),
    numberOfMonths: 2
  });

  let formatter = useDateFormatter({
    dateStyle: 'full',
    locale: 'en-SG'
  });

  return (
    <div style={{ padding: '20px', display: 'flex', gap: '20px', flexDirection: 'column' }}>
      <p>Selected dates: {formatter.formatRange(dateProps.startDate.toDate(getLocalTimeZone()), dateProps.endDate.toDate(getLocalTimeZone()))}</p>
      <RangeCalendar
        {...calendarProps}
        errorMessage={dateProps.errorMessage}
        isDateUnavailable={(date) => date.day === 14 && date.month === 1 && date.year === 2026}
        onUpdate:nextMonth={nextMonth}
        onUpdate:prevMonth={prevMonth}
        month={month}
        weekStartDay={weekStartDay}
      >
        <CalendarGrid...
      </RangeCalendar>
    </div>
  );
}
```

--------------------------------

### TypeScript Configuration for Oui Components (JSON)

Source: https://oui.open.gov.sg/docs/getting-started/vite

Provides the essential TypeScript configuration for 'tsconfig.json' to ensure compatibility and best practices when using Oui components. It specifies 'moduleResolution' as 'bundler' and 'jsx' as 'react-jsx'.

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

--------------------------------

### Configure Vite with Tailwind CSS Plugin

Source: https://oui.open.gov.sg/docs/getting-started/vite

Adds the Tailwind CSS plugin to the Vite configuration file (`vite.config.ts`). This enables Tailwind CSS processing within the Vite build.

```typescript
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(),
  ],
})
```

--------------------------------

### Button Component: Variant Styles

Source: https://oui.open.gov.sg/docs/components/button

Shows how to alter the visual style of the Button component using the 'variant' prop. Examples include 'solid' and 'outline'.

```javascript
<Button variant="solid">Solid</Button>
<Button variant="outline">Outline</Button>
```

--------------------------------

### Import OUI Theme and Custom CSS

Source: https://oui.open.gov.sg/docs/getting-started/theming

This snippet shows how to integrate the generated OUI theme into your application's Tailwind CSS configuration. It includes importing the base OUI theme, defining font variables, and importing the custom generated theme file.

```css
@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;
}

@import "path/to/generated-Postman.css";
/* Alternatively, you can directly inline the contents of the generated CSS file 
 * into your Tailwind CSS file. 
 */
```

--------------------------------

### Button Component: Spinner Placement

Source: https://oui.open.gov.sg/docs/components/button

Demonstrates how to control the placement of the loading spinner within the Button component using the 'spinnerPlacement' prop. Options include 'start' and 'end'.

```javascript
<Button isPending spinnerPlacement="start">Loading</Button>
<Button isPending spinnerPlacement="end">Loading</Button>
```

--------------------------------

### Generate OUI Theme with pnpm

Source: https://oui.open.gov.sg/docs/getting-started/theming

This command uses the OUI token generator to create a custom theme based on your product's branding. It prompts the user to select a theme and generates a CSS file containing theme variables.

```shell
pnpm dlx @opengovsg/oui-token-gen generate
```

--------------------------------

### Add OUI Theme to Tailwind CSS

Source: https://oui.open.gov.sg/docs/getting-started/installation

Integrates the OUI theme into your Tailwind CSS setup by importing the theme's CSS file. This step is crucial for applying OUI's styles and should be added to your main Tailwind CSS configuration file.

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

--------------------------------

### Configure Inter Font in Tailwind CSS

Source: https://oui.open.gov.sg/docs/getting-started/installation

Sets up the Inter font as the default sans-serif font (`--font-sans`) in your Tailwind CSS configuration. This step ensures OUI components use the intended typography, requiring either self-hosting or a CDN for the font files.

```css
@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;
}
```

--------------------------------

### FileDropzone with Label and Description

Source: https://oui.open.gov.sg/docs/components/file-dropzone

Shows how to provide a visible label and descriptive text to the FileDropzone component to give users clear instructions. This enhances usability and accessibility.

```jsx
<FileDropzone
  label="Upload your documents"
  description="All file types are accepted"
/>
```

--------------------------------

### Button Component: Start and End Content (Icons)

Source: https://oui.open.gov.sg/docs/components/button

Demonstrates how to include icons at the start or end of the Button component for enhanced visual cues, such as an email or proceed icon.

```javascript
<Button leftIcon={<EmailIcon />} variant="outline">Email</Button>
<Button rightIcon={<ArrowForwardIcon />} variant="solid">Proceed</Button>
```

--------------------------------

### Import and Basic Usage of Button Component

Source: https://oui.open.gov.sg/docs/components/button

Demonstrates how to import the Button component from '@opengovsg/oui' and its basic usage with a simple label.

```javascript
import { Button } from "@opengovsg/oui"

<Button>Click me</Button>
```

--------------------------------

### OUI Toast API - Basic and Advanced Usage (JavaScript)

Source: https://oui.open.gov.sg/docs/components/toast

Illustrates various ways to use the `toast` function, including basic messages, options like description and position, type-specific toasts, promise-based toasts for async operations, and toast dismissal. Leverages the `@opengovsg/oui` library.

```javascript
// Basic usage
t oast("Message")

// With options
t oast("Message", {
  description: "Additional details",
  duration: 5000,
  position: "top-center",
})

// Type-specific toasts
t oast.success("Success message")
t oast.error("Error message")
t oast.warning("Warning message")
t oast.info("Info message")
t oast.loading("Loading message")

// Promise toast
t oast.promise(asyncFunction, {
  loading: "Loading...",
  success: "Success!",
  error: "Error!",
})

// Dismiss a toast
const toastId = toast("Message")
t oast.dismiss(toastId)

// Dismiss all toasts
t oast.dismiss()
```

--------------------------------

### Basic DateField Usage

Source: https://oui.open.gov.sg/docs/components/date-field

Demonstrates the basic structure and usage of the DateField component for users to input date values.

```jsx
<DateField label="Birth date">
  <{
    <DateField label="Birth date">
      <{
        // DateField with default formatting
      }
    />
  }
/>
```

--------------------------------

### Accordion with Start Content (React)

Source: https://oui.open.gov.sg/docs/components/accordion

Adds custom content, such as an icon, before the header title in an AccordionHeader. This is achieved using the 'startContent' prop.

```jsx
<AccordionItem>
  <AccordionHeader startContent={<YourIconComponent />}>Accordion header with icon</AccordionHeader>
  <AccordionContent>Content section.</AccordionContent>
</AccordionItem>
```

--------------------------------

### Disabled DateField Example

Source: https://oui.open.gov.sg/docs/components/date-field

Shows a disabled DateField, preventing user interaction and input, typically used to indicate an unavailable or non-editable date.

```jsx
<DateField label="Birth date" isDisabled />
```

--------------------------------

### Basic Accordion Usage (React)

Source: https://oui.open.gov.sg/docs/components/accordion

Demonstrates the basic structure for using the Accordion component. It includes the main Accordion wrapper, individual AccordionItems, an AccordionHeader for toggling, and an AccordionContent for the collapsible section.

```jsx
<Accordion>
  <AccordionItem>
    <AccordionHeader>Accordion header</AccordionHeader>
    <AccordionContent>Accordion content</AccordionContent>
  </AccordionItem>
</Accordion>
```

--------------------------------

### FileDropzone with Image Previews

Source: https://oui.open.gov.sg/docs/components/file-dropzone

Demonstrates controlling the image preview size or disabling it entirely using the `imagePreview` prop. Options include 'small' (default), 'large', or `false` to disable.

```jsx
/* Small preview (default) */
<FileDropzone />

/* Large preview */
<FileDropzone imagePreview="large" />

/* No preview */
<FileDropzone imagePreview={false} />
```

--------------------------------

### Basic NumberField Usage (React)

Source: https://oui.open.gov.sg/docs/components/number-field

Demonstrates the basic implementation of the NumberField component. It requires an accessible label, which can be provided via the `aria-label` prop if a visible label is not present.

```javascript
<NumberField aria-label="Enter quantity" />

```

--------------------------------

### NumberField with Label and Description (React)

Source: https://oui.open.gov.sg/docs/components/number-field

Illustrates how to use the NumberField with a visible `label` and a `description` prop to provide context and instructions to the user, improving usability.

```javascript
<NumberField
  label="Quantity"
  description="Enter the quantity you want to order"
/>

```

--------------------------------

### Navbar with Collapsible Menu in React JSX

Source: https://oui.open.gov.sg/docs/components/navbar

This JSX example illustrates how to implement a collapsible menu within a Navbar using `NavbarMenuToggle` and `NavbarMenu`. This pattern is commonly used for responsive navigation, especially on mobile devices.

```jsx
<Navbar>
  {/* ... other Navbar content ... */}
  <NavbarMenuToggle />
  <NavbarMenu>
    {/* ... NavbarMenuItem components ... */}
  </NavbarMenu>
</Navbar>

```

--------------------------------

### FileDropzone with Custom File Rendering

Source: https://oui.open.gov.sg/docs/components/file-dropzone

Illustrates how to customize the display of uploaded files using the `children` render prop. This allows for unique formatting or additional information per file.

```jsx
<FileDropzone>
  {({ files }) => (
    <>
      {files.map((file) => (
        <div key={file.name}>{file.name} - {file.size} bytes</div>
      ))}
    </>
  )}
</FileDropzone>
```

--------------------------------

### Configure Tailwind CSS for Inter Font (Google Fonts)

Source: https://oui.open.gov.sg/docs/getting-started/vite

Sets the `--font-sans` CSS variable in `src/globals.css` to use the Inter font when Google Fonts is used. Ensures Tailwind uses the correct font family.

```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;
}
```

--------------------------------

### Customizing FileDropzone with Tailwind CSS Classes

Source: https://oui.open.gov.sg/docs/components/file-dropzone

Demonstrates how to apply custom Tailwind CSS classes to the FileDropzone component and its individual file items. This allows for extensive styling flexibility using utility-first CSS.

```jsx
<FileDropzone
  aria-label="Upload files"
  classNames={{
    dropzone: "border-dashed border-2 border-blue-500",
    icon: "text-blue-500",
    text: "text-sm",
  }}
  itemClassNames={{
    base: "flex items-center space-x-2",
    textContainer: "flex-1",
    imageContainer: "w-12 h-12",
    image: "object-cover",
    name: "font-medium",
    size: "text-sm text-gray-500",
    error: "text-red-500",
    actionButton: "text-blue-500",
  }}
/>
```

--------------------------------

### Modal Usage and Imports (React)

Source: https://oui.open.gov.sg/docs/components/modal

Demonstrates the necessary imports and basic JSX structure for using the OUI Modal component in a React application. It shows how to integrate the Modal with a DialogTrigger and Button.

```javascript
import {
  Button,
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalHeader,
} from "@opengovsg/oui"

<DialogTrigger>
  <Button>Open Modal</Button>
  <Modal>
    <ModalContent>
      {(onClose) => (
        <>
          <ModalHeader>Modal Title</ModalHeader>
          <ModalBody>
            <p>Your modal content here</p>
          </ModalBody>
          <ModalFooter>
            <Button onPress={onClose}>Close</Button>
          </ModalFooter>
        </>
      )}
    </ModalContent>
  </Modal>
</DialogTrigger>
```

--------------------------------

### Custom Initials Logic for Avatar - JavaScript

Source: https://oui.open.gov.sg/docs/components/avatar

Shows how to customize the logic for generating avatar initials using the `getInitials` prop. This allows for more flexible display of user information when an image is not available.

```javascript
<Avatar
  name="John Doe"
  getInitials={(name) =>
    name
      .split(" ")
      .map((n) => n[0])
      .join("")
      .toUpperCase()
  }
>
  <Avatar.Image src="https://example.com/avatar.jpg" />
  <Avatar.Fallback />
</Avatar>
```
Tokens:
Raw