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

1. Install the package

npm install @openai/apps-sdk-ui

2. Setup styles

Add the foundation styles and Tailwind layers to the top of your global stylesheet (e.g. main.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:

// Must be imported first to ensure Tailwind layers and style foundations are defined before any potential component stylesimport"./main.css"import{StrictMode}from"react"import{createRoot}from"react-dom/client"import{App}from"./App"createRoot(document.getElementById("root")!).render(<StrictMode><App/></StrictMode>,)

3. Configure router (optional)

<AppsSDKUIProvider> helps define your default router link component, used in components like <TextLink> and <ButtonLink>.

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

// Must be imported first to ensure Tailwind layers and style foundations are defined before component stylesimport"./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 {interfaceAppsSDKUIConfig{LinkComponent: typeofLink}}createRoot(document.getElementById("root")!).render(<StrictMode><AppsSDKUIProviderlinkComponent={Link}><App/></AppsSDKUIProvider></StrictMode>,)

Start building

Your project is now ready to use Apps SDK UI!

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

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"exportfunctionReservationCard(){return(<divclassName="w-full max-w-sm rounded-2xl border border-default bg-surface shadow-lg p-4"><divclassName="flex items-start justify-between gap-3"><div><pclassName="text-secondary text-sm">Reservation</p><h2className="mt-1 heading-lg">La Luna Bistro</h2></div><Badgecolor="success">Confirmed</Badge></div><div><dlclassName="mt-4 grid grid-cols-[auto_1fr] gap-x-3 gap-y-2 text-sm"><dtclassName="flex items-center gap-1.5 font-medium text-secondary"><CalendarclassName="size-4"/>
Date
</dt><ddclassName="text-right">Apr 12 · 7:30 PM</dd><dtclassName="flex items-center gap-1.5 font-medium text-secondary"><MembersclassName="size-4"/>
Guests
</dt><ddclassName="text-right">Party of 2</dd><dtclassName="flex items-center gap-1.5 font-medium text-secondary"><InvoiceclassName="size-4"/>
Reference
</dt><ddclassName="text-right uppercase">4F9Q2K</dd></dl></div><divclassName="mt-4 grid gap-3 border-t border-subtle pt-4 sm:grid-cols-2"><Buttonvariant="soft"color="secondary"block><Phone/>
Call
</Button><Buttoncolor="primary"block><Maps/>
Directions
</Button></div></div>)}

License

MIT © OpenAI