### 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 (
)
}
```
--------------------------------
### 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 (
{children}
)
}
```
--------------------------------
### 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 {children}
}
```
```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 (
{children}
)
}
```
--------------------------------
### 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
{children}
```
```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 (
)
}
```
--------------------------------
### 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 (
{/* ... */}
)
}
```
--------------------------------
### 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 (
)
}
```
--------------------------------
### 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(
,
)
```
--------------------------------
### 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 (
)
}
```
--------------------------------
### 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 (
{children}
)
}
// In a page or component (e.g., page.tsx)
import { Button } from "@opengovsg/oui"
import { toast } from "@opengovsg/oui"
function MyComponent() {
return (
)
}
```
--------------------------------
### 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
```
--------------------------------
### 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 (
{children}
)
}
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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"
```
--------------------------------
### 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"));
<>
```
--------------------------------
### 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']);
Content for the first item.Content for the second item.
```
--------------------------------
### 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
```
--------------------------------
### 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 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
```
--------------------------------
### 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
```
--------------------------------
### 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
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 (
Draggable ModalYou can drag this modal around.
);
}
```
--------------------------------
### 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
OUI
Features
Customers
Login
```
--------------------------------
### 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 (
);
}
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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
} variant="outline">Email
} variant="solid">Proceed
```
--------------------------------
### 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"
```
--------------------------------
### 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 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
}>Accordion header with icon
Content section.
```
--------------------------------
### 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
```
--------------------------------
### 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 headerAccordion content
```
--------------------------------
### 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) */
/* Large preview */
/* No preview */
```
--------------------------------
### 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 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
```
--------------------------------
### 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
{/* ... other Navbar content ... */}
{/* ... NavbarMenuItem components ... */}
```
--------------------------------
### 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
{({ files }) => (
<>
{files.map((file) => (
{file.name} - {file.size} bytes
))}
)}
```
--------------------------------
### 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
```
--------------------------------
### 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"
{(onClose) => (
<>
Modal Title
Your modal content here
)}
```
--------------------------------
### FileDropzone Sizes
Source: https://oui.open.gov.sg/docs/components/file-dropzone
Demonstrates how to adjust the visual size of the FileDropzone component using the `size` prop. Options include 'sm' for small and 'md' for medium (default).
```jsx
/* Small size */
/* Medium size (default) */
```