> ## Documentation Index
> Fetch the complete documentation index at: https://sunpeak.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# UI Components

> Production-ready components in the framework.

## Overview

The sunpeak framework includes pre-built [MCP resources](/mcp-apps/mcp/resources) in your project's `src/resources/` directory. Each resource lives in its own folder with its component, metadata, and related components.

These components follow MCP App design best practices and use sunpeak's built-in component primitives.

## Resources

[Resources](/mcp-apps/mcp/resources) (from MCP) are top-level components that can be simulated or shipped to production.

Each resource lives in its own folder under `src/resources/{name}/`:

* `{name}.tsx` - React component + resource metadata (`export const resource: ResourceConfig`)
* `components/` - Optional resource-specific components

Tool files live in `src/tools/` and simulation files live in `tests/simulations/`.

See the [Resource Library API Reference](/app-framework/resources/albums) for
all pre-packaged sunpeak resources.

## High-Level Components

Sunpeak resources are built out of higher-level components that live alongside each resource in `src/resources/{name}/components/`.

### Customization

These components are included in your project source code, so you can modify them to fit your needs:

* **Edit directly**: Components are in each resource's `components/` folder.
* **Add variants**: Extend with new props or styles.
* **Create new components**: Use these as templates.

### Design Principles

All components follow MCP App design best practices:

<Card horizontal title="Theme Support" icon="palette">
  Automatic light/dark theme adaptation.
</Card>

<Card horizontal title="Responsive" icon="mobile">
  Works on mobile, tablet, and desktop.
</Card>

<Card horizontal title="Accessible" icon="universal-access">
  WCAG 2.1 AA compliant.
</Card>

<Card horizontal title="Simple" icon="check">
  UI reduced to the absolute minimum to support the context.
</Card>

For host-provided styling integration (CSS variables, fonts, theme), see [MCP Apps Styling](/mcp-apps/styling/theme).

## Low-Level Components

Beyond the framework components, you can build your own primitives using standard React patterns and Tailwind CSS. The framework provides semantic design tokens that work across light and dark themes.

<Card horizontal title="Component Library API Reference" icon="code" href="/app-framework/resources/albums">
  All components provided by sunpeak.
</Card>