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

# Third-Party Components

> Learn how to use Uniwind with third-party component libraries

## Overview

Uniwind provides two powerful tools for styling third-party components that don't natively support `className` props.

## Option 1: withUniwind (Recommended)

Wrap third-party components to add `className` support using `withUniwind`:

```tsx theme={null}
import { withUniwind } from 'uniwind'
import { SafeAreaView } from 'react-native-safe-area-context'

const StyledSafeAreaView = withUniwind(SafeAreaView)

// Usage
<StyledSafeAreaView className="flex-1 bg-background p-4">
  {/* Your content */}
</StyledSafeAreaView>
```

<Info>
  **Best for:** Components you use frequently throughout your app. Wrap them once, use them everywhere with `className` support.
</Info>

<Card title="withUniwind Documentation" icon="layer-group" href="/api/with-uniwind">
  Learn how to wrap components and map custom props
</Card>

## Option 2: useResolveClassNames

Convert className strings to style objects at runtime:

```tsx theme={null}
import { useResolveClassNames } from 'uniwind'
import { CustomComponent } from 'some-library'

export const MyComponent = () => {
  const styles = useResolveClassNames('bg-blue-500 p-4 rounded-lg')

  return <CustomComponent style={styles} />
}
```

<Info>
  **Best for:** One-off usage or components with complex style requirements that can't be easily wrapped.
</Info>

<Card title="useResolveClassNames Documentation" icon="code" href="/api/use-resolve-class-names">
  Learn how to convert classNames to style objects
</Card>

## Quick Comparison

| Feature         | withUniwind         | useResolveClassNames |
| --------------- | ------------------- | -------------------- |
| **Setup**       | Once per component  | Per usage            |
| **Performance** | Optimized           | Slightly slower      |
| **Best for**    | Reusable components | One-off cases        |
| **Syntax**      | `className="..."`   | `style={...}`        |

## Example: react-native-paper

```tsx theme={null}
import { withUniwind } from 'uniwind'
import { Button } from 'react-native-paper'

// Wrap once
const StyledButton = withUniwind(Button)

// Use everywhere
<StyledButton
  className="m-4"
  mode="contained"
>
  Press me
</StyledButton>
```

## Example: react-navigation

```tsx theme={null}
import { useResolveClassNames } from 'uniwind'
import { NavigationContainer } from '@react-navigation/native'

export const App = () => {
  const cardStyle = useResolveClassNames('bg-white dark:bg-gray-900')

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ cardStyle }}>
        {/* Your screens */}
      </Stack.Navigator>
    </NavigationContainer>
  )
}
```

<Tip>
  For most third-party components, `withUniwind` is the recommended approach as it provides better performance and cleaner syntax.
</Tip>