@corvu-next/drawer

Bottom sheet/drawer component for SolidJS 2.0 built on top of the dialog primitive with snap points and drag-to-dismiss.

Note: This is the Solid 2.0 fork of corvu. It targets [email protected].

Features

• Built on the dialog primitive — inherits focus trap, scroll lock, and accessibility
• Configurable snap points
• Drag-to-dismiss with velocity-based snapping
• Smooth spring animations
• Portal rendering
• Controlled and uncontrolled state

Installation

npm install @corvu-next/drawer
# or
pnpm add @corvu-next/drawer

Usage

import Drawer from '@corvu-next/drawer'

function MyDrawer() {
  return (
    <Drawer.Root snapPoints={[0, 0.5, 1]}>
      <Drawer.Trigger>Open Drawer</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay />
        <Drawer.Content>
          <Drawer.Label>Drawer Title</Drawer.Label>
          <Drawer.Description>
            Drag to resize or dismiss this drawer.
          </Drawer.Description>
          <Drawer.Close>Close</Drawer.Close>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  )
}

API

| Component | Description | |-----------|-------------| | Drawer.Root | Container. Props: snapPoints, activeSnapPoint/onActiveSnapPointChange, dismissible, open/onOpenChange. | | Drawer.Trigger | Button that opens the drawer. | | Drawer.Portal | Renders children into a portal. | | Drawer.Overlay | Backdrop overlay with opacity tied to drawer position. | | Drawer.Content | Drawer content panel. Handles drag gestures and velocity snapping. | | Drawer.Label | Accessible title (aria-labelledby). | | Drawer.Description | Accessible description (aria-describedby). | | Drawer.Close | Button that closes the drawer. |

Further Reading

This package is part of corvu-next, a collection of unstyled, accessible and customizable UI primitives for SolidJS 2.0.