Apps SDK UI

Apps SDK UI is a lightweight, accessible design system for building high-quality ChatGPT apps with the Apps SDK. It provides Tailwind-integrated design tokens, a curated React component library, and utilities optimized for consistent experiences inside ChatGPT.

Features

- Design tokens for colors, typography, spacing, sizing, shadows, surfaces, and more.
- Tailwind 4 integration pre-configured with Apps SDK UI's design tokens.
- Accessible components, built on Radix primitives with consistent styling.
- Utilities for dark mode, responsive layouts, and ChatGPT-optimized behaviors.
- Minimal boilerplate — import styles, wrap with a provider, start building.

Prerequisites

Apps SDK UI requires React 18 or 19 and Tailwind 4.

- React: https://react.dev/learn/installation
- Tailwind 4: https://tailwindcss.com/docs/installation

Installation

$3

``bash
npm install @openai/apps-sdk-ui
`

$3

Add the foundation styles and Tailwind layers to the top of your global stylesheet (e.g. main.css):

`css
@import "tailwindcss";
@import "@openai/apps-sdk-ui/css";
/ Required for Tailwind to find class references in Apps SDK UI components. /
@source "../node_modules/@openai/apps-sdk-ui";

/ The rest of your application CSS /
`

Then import your stylesheet _before_ rendering any components:

`tsx
// Must be imported first to ensure Tailwind layers and style foundations are defined before any potential component styles
import "./main.css"

import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { App } from "./App"

createRoot(document.getElementById("root")!).render(


,
)
`

$3

helps define your default router link component, used in components like and .

This provider is optional - router links can also be passed directly to components via the as prop.

`tsx
// Must be imported first to ensure Tailwind layers and style foundations are defined before component styles
import "./main.css"

import { AppsSDKUIProvider } from "@openai/apps-sdk-ui/components/AppsSDKUIProvider"
import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { Link } from "react-router"
import { App } from "./App"

declare global {
interface AppsSDKUIConfig {
LinkComponent: typeof Link
}
}

createRoot(document.getElementById("root")!).render(




,
)
`

$3

Your project is now ready to use Apps SDK UI!

Here's an example of a simple reservation card, using Tailwind classes and components.

`tsx
import { Badge } from "@openai/apps-sdk-ui/components/Badge"
import { Button } from "@openai/apps-sdk-ui/components/Button"
import { Calendar, Invoice, Maps, Members, Phone } from "@openai/apps-sdk-ui/components/Icon"

export function ReservationCard() {
return (


License

MIT © OpenAI