> ## 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.

# useStyles

> Get host style configuration.

<Badge color="yellow">sunpeak API</Badge>

## Overview

The `useStyles` hook returns the host's style configuration. It is a convenience wrapper around `useHostContext`.

<Card horizontal title="Wraps onhostcontextchanged" icon="cube" href="/mcp-apps/app/event-handlers/onhostcontextchanged">
  MCP Apps SDK reference
</Card>

<Tip>For most use cases, prefer the SDK's [`useHostStyleVariables`](/mcp-apps/react/use-host-style-variables) or [`useHostFonts`](/mcp-apps/react/use-host-fonts) hooks which automatically apply styles to the document. Use `useStyles` when you need raw access to the style data.</Tip>

## Import

```tsx theme={null}
import { useStyles } from 'sunpeak';
```

## Signature

```tsx theme={null}
function useStyles(): McpUiHostStyles | undefined
```

## Returns

<ResponseField name="return" type="McpUiHostStyles | undefined">
  The host's style configuration including CSS variables and font settings, or `undefined` if the host does not provide styles.
</ResponseField>

## Usage

```tsx theme={null}
import { useStyles } from 'sunpeak';

function MyResource() {
  const styles = useStyles();

  return (
    <div>
      {styles?.variables?.['--color-text-primary'] && (
        <p>Primary text color: {styles.variables['--color-text-primary']}</p>
      )}
    </div>
  );
}
```