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

# Bottom sheet

`bottomSheet` hosts content in a native bottom-sheet presentation. It is experimental and may
change in a future runtime.

## Properties

| Property                | Accepted value     | Description                                                    |
| ----------------------- | ------------------ | -------------------------------------------------------------- |
| `visible`               | `boolean`          | Controlled visibility. Set it to `false` in `onDismiss`.       |
| `skipPartiallyExpanded` | `boolean`          | Starts fully expanded instead of using a half-expanded detent. |
| `onDismiss`             | `() => void`       | Called after swipe-down or scrim dismissal.                    |
| `style`                 | `StyleProperties`  | Layout and appearance values.                                  |
| `children`              | `ReactNode`        | Sheet content.                                                 |
| `key`                   | `string \| number` | React key for dynamic sheets.                                  |
| `class`                 | `string`           | Registered style name for this node only.                      |

## Example

```tsx theme={null}
const [visible, setVisible] = useState(false);

<column>
  <button text="Open filters" onClick={() => setVisible(true)} />
  <bottomSheet
    visible={visible}
    skipPartiallyExpanded
    onDismiss={() => setVisible(false)}
    style={{ padding: 20 }}
  >
    <column style={{ spacing: 16 }}>
      <text style={{ fontSize: 20, fontWeight: 700 }}>Filters</text>
      <button text="Apply" onClick={() => setVisible(false)} />
    </column>
  </bottomSheet>
</column>
```

Keep `visible` controlled so React state stays synchronized with native dismissal.