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

# Modal

> Learn how to use Modal with Uniwind className props

## Overview

The `Modal` component presents content above the rest of your app. Uniwind provides className prop support for styling this component.

## Styling Convention

<Info>
  **For `style` props:** Use regular Tailwind classes directly (e.g., `className="p-4"`).

  **For non-style props** (like `color`): Use the `accent-` prefix (e.g., `colorClassName="accent-blue-500"`).
</Info>

## Uniwind Bindings

<ParamField path="className" type="string">
  Maps to the `style` prop. Use any Tailwind utility classes.
</ParamField>

<ParamField path="backdropColorClassName" type="string">
  Maps to the `backdropColor` prop. Requires `accent-` prefix for color values.
</ParamField>

## Usage Example

```tsx  theme={null}
import { Modal, View, Text, Button } from 'react-native'

<Modal
  visible={isVisible}
  transparent
  animationType="slide"
  backdropColorClassName="accent-black/50"
>
  <View className="flex-1 justify-center items-center">
    <View className="bg-white rounded-lg p-6 w-4/5">
      <Text className="text-xl font-bold mb-4">Modal Title</Text>
      <Button title="Close" onPress={() => setIsVisible(false)} />
    </View>
  </View>
</Modal>
```