Skip to main content

​
Overview

The sunpeak Starter Kit includes pre-built React components in your project’s src/components/ directory. These components are built on openai/apps-sdk-ui and follow ChatGPT’s design guidelines.

​
Top-Level Components

  • Card - A versatile card component for displaying rich content with images, headers, metadata, and action buttons.
  • Carousel - A horizontal scrolling carousel for displaying multiple cards with navigation arrows and smooth transitions.

​
Quick Example

import '../../styles/globals.css';
import { Card } from "../card";

export function App() {
  return (
    <Card
      image="https://images.unsplash.com/photo-1520950237264-dfe336995c34"
      imageAlt="Lady Bird Lake"
      header="Lady Bird Lake"
      metadata="⭐ 4.5 • Austin, TX"
      button1={{ children: "Visit", isPrimary: true, onClick: () => {} }}
      button2={{ children: "Learn More", onClick: () => {} }}
    >
      Scenic lake perfect for kayaking, paddleboarding, and trails.
    </Card>
  );
}

​
Customization

These components are included in your project source code, so you can modify them to fit your needs:
  • Edit directly: Components are in src/components/
  • Add variants: Extend with new props or styles
  • Create new components: Use these as templates

​
Design Principles

All components follow (and are required to follow) ChatGPT’s design guidelines:

Theme Support

Automatic light/dark theme adaptation

Responsive

Works on mobile, tablet, and desktop

Accessible

WCAG 2.1 AA compliant

Simple

Information and UI should be reduced to the absolute minimum to support the context

​
Low-Level Components

Beyond the Starter Kit components, you can use any component from @openai/apps-sdk-ui: 
import { Button, Input, Select } from '@openai/apps-sdk-ui/components';
See the OpenAI apps-sdk-ui documentation for the full low-level component library.