> ## 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.
# Utility Functions
> Utility functions exported by sunpeak: cn() for class name merging, and media query helpers for motion, touch, and hover detection.
sunpeak API
## cn
Merges class names using [clsx](https://github.com/lukeed/clsx) and [tailwind-merge](https://github.com/dcastil/tailwind-merge). Handles conditional classes, arrays, and deduplicates conflicting Tailwind utilities.
### Import
```tsx theme={null}
import { cn } from 'sunpeak';
```
### Signature
```tsx theme={null}
function cn(...inputs: ClassValue[]): string
```
### Usage
```tsx theme={null}
import { cn } from 'sunpeak';
function Card({ active, className }: { active: boolean; className?: string }) {
return (
...
);
}
```
***
## prefersReducedMotion
Returns `true` if the user has enabled the "reduce motion" accessibility setting.
### Import
```tsx theme={null}
import { prefersReducedMotion } from 'sunpeak';
```
### Signature
```tsx theme={null}
function prefersReducedMotion(): boolean
```
### Usage
```tsx theme={null}
import { prefersReducedMotion } from 'sunpeak';
function AnimatedCard() {
const style = prefersReducedMotion()
? {}
: { transition: 'transform 0.3s ease' };
return ...
;
}
```
***
## isPrimarilyTouchDevice
Returns `true` if the primary input mechanism is coarse (touch). Checks the `(pointer: coarse)` media query.
### Import
```tsx theme={null}
import { isPrimarilyTouchDevice } from 'sunpeak';
```
### Signature
```tsx theme={null}
function isPrimarilyTouchDevice(): boolean
```
### Usage
```tsx theme={null}
import { isPrimarilyTouchDevice } from 'sunpeak';
function InteractiveMap() {
const touchMode = isPrimarilyTouchDevice();
return (
...
);
}
```
For host-reported device capabilities, use [`useDeviceCapabilities`](/app-framework/hooks/use-device-capabilities) which reads the `touch` and `hover` values from the host context.
***
## isHoverAvailable
Returns `true` if the primary input mechanism supports hover. Checks the `(hover: hover)` media query.
### Import
```tsx theme={null}
import { isHoverAvailable } from 'sunpeak';
```
### Signature
```tsx theme={null}
function isHoverAvailable(): boolean
```
### Usage
```tsx theme={null}
import { isHoverAvailable } from 'sunpeak';
function Tooltip({ children, text }: { children: ReactNode; text: string }) {
if (!isHoverAvailable()) {
// On touch devices, show tooltip inline instead
return <>{children}{text};
}
return (
{children}
{text}
);
}
```