gui/apps/gui.hanzo.ai/data/docs/components/sheet/1.0.0.mdx

---
title: Sheet
description: A simple sheet component
name: sheet
component: Sheet
package: sheet
demoName: Sheet
---

# Sheet

<Description>A bottom sheet that slides up.</Description>

<HeroContainer showAnimationDriverControl>
  <SheetDemo />
</HeroContainer>

```tsx hero template=Sheet

```

<Highlights
  features={[
    `Lightweight implementation with dragging support.`,
    `Multiple snap point points and a handle.`,
    `Automatically adjusts to screen size.`,
    `Accepts animations, themes, size props and more.`,
  ]}
/>

### Anatomy

```tsx
import { Sheet } from '@hanzo/gui' // or '@hanzogui/sheet'

export default () => (
  <Sheet>
    <Sheet.Overlay />
    <Sheet.Handle />
    <Sheet.Frame>{/* ...inner contents */}</Sheet.Frame>
  </Sheet>
)
```

### API

#### &lt;Sheet /&gt;

Contains every component for the sheet.

<PropsTable
  data={[
    { name: 'open', type: 'boolean', description: `Set to use as controlled component.` },
    {
      name: 'defaultOpen',
      type: 'boolean',
      description: `Uncontrolled open state on mount.`,
    },
    {
      name: 'onOpenChange',
      type: '(open: boolean) => void',
      description: `Called on change open, controlled or uncontrolled.`,
    },
    {
      name: 'position',
      type: 'number',
      description: `Controlled position, set to an index of snapPoints.`,
    },
    {
      name: 'defaultPosition',
      type: 'number',
      description: `Uncontrolled default position on mount.`,
    },
    {
      name: 'snapPoints',
      type: 'number[]',
      default: `[80, 10]`,
      description: `Array of numbers, 0-100 that corresponds to % of the screen it should take up. Should go from most visible to least visible in order. Use "open" prop for fully closed.`,
    },
    {
      name: 'onPositionChange',
      type: '(position: number) => void',
      description: `Called on change position, controlled or uncontrolled.`,
    },
    {
      name: 'dismissOnOverlayPress',
      type: 'boolean',
      default: 'true',
      description: `Controls tapping on the overlay to close, defaults to true.`,
    },
    {
      name: 'animationConfig',
      type: 'Animated.SpringAnimationConfig',
      default: 'true',
      description: `Customize the spring used, passed to react-native Animated.spring().`,
    },
    {
      name: 'disableDrag',
      type: 'boolean',
      description: `Disables all touch events to drag the sheet.`,
    },
    {
      name: 'modal',
      type: 'boolean',
      description: `Renders sheet into the root of your app instead of inline.`,
    },
    {
      name: 'dismissOnSnapToBottom',
      type: 'boolean',
      description: `Adds a snap point to the end of your snap points set to "0", that when snapped to will set open to false (uncontrolled) and call onOpenChange with false (controlled).`,
    },
    {
      name: 'forceRemoveScrollEnabled',
      type: 'boolean',
      default: 'false',
      description: `By default. Gui uses react-remove-scroll to prevent anything outside the sheet scrolling. This can cause some issues so you can override the behavior with this prop (either true or false).`,
    },
    {
      name: 'portalProps',
      type: 'Object',
      description: `YStack props that can be passed to the Portal that sheet uses when in modal mode.`,
    },
  ]}
/>

#### &lt;Overlay /&gt;

Displays behind Frame. Extends [YStack](/docs/components/stacks).

#### &lt;Frame /&gt;

Contains the content. Extends [YStack](/docs/components/stacks).

#### &lt;Handle /&gt;

Shows a handle above the frame by default, on tap it will cycle between `snapPoints` but this can be overridden with `onPress`.

Extends [XStack](/docs/components/stacks).

#### &lt;Scrollview /&gt;

Allows scrolling within Sheet. Extends [Scrollview](/docs/components/scroll-view).

### Notes

For Android you need to manually re-propagate any context when using `modal`. This is because React Native doesn't support portals yet.