Getting Started

GlideSheet is a performant React bottom sheet with zero dependencies. Install it and have a working sheet in under a minute.

Quick setup

1

Install the package

npm install glidesheet

Or with your preferred package manager:

pnpm add glidesheet
# or
bun add glidesheet
2

Import the CSS

GlideSheet ships a small stylesheet for overlay transitions and handle styling. Import it once at the root of your app:

import 'glidesheet/style.css';
3

Create your first sheet

GlideSheet uses a compound component pattern. The minimal setup needs Root, Portal, Overlay, Content, and Handle.

App.tsx
import { useState } from 'react';
import { BottomSheet } from 'glidesheet';
import 'glidesheet/style.css';

function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open</button>

      <BottomSheet.Root open={open} onOpenChange={setOpen}>
        <BottomSheet.Portal>
          <BottomSheet.Overlay />
          <BottomSheet.Content>
            <BottomSheet.Handle />
            <BottomSheet.Title>My Sheet</BottomSheet.Title>
            <p>Hello from GlideSheet!</p>
          </BottomSheet.Content>
        </BottomSheet.Portal>
      </BottomSheet.Root>
    </>
  );
}

The open and onOpenChange props give you full control over the sheet state. The overlay is clickable to dismiss, and dragging the handle (or the content) down will close the sheet.

Using Trigger & Close

Instead of managing state yourself, you can use the built-in Trigger and Close components:

<BottomSheet.Root open={open} onOpenChange={setOpen}>
  <BottomSheet.Trigger>Open Sheet</BottomSheet.Trigger>
  <BottomSheet.Portal>
    <BottomSheet.Overlay />
    <BottomSheet.Content>
      <BottomSheet.Handle />
      <BottomSheet.Title>My Sheet</BottomSheet.Title>
      <BottomSheet.Close>Close</BottomSheet.Close>
    </BottomSheet.Content>
  </BottomSheet.Portal>
</BottomSheet.Root>
Compound components — Every part of the sheet is a separate component that you compose together. This gives you full control over the markup and styling.

What's next?

Snap PointsDefine positions where the sheet restsScrollable ContentSeamless scroll-to-drag transitionAPI ReferenceAll components, props and types