Sheet

Sheet

<SheetTrigger>
  <Button>Filters</Button>
  <Sheet side="end" title="Filters">
    {/* form */}
  </Sheet>
</SheetTrigger>

Install: @helixui/core

import { Sheet, SheetTrigger } from '@helixui/core'

status: stable · since: 0.1.0

Tags: drawer, side-panel, mobile, modal

Anatomy

┌─ overlay ────────────────────┐
│ ┌─ Sheet (side=start) ──┐    │
│ │  content              │    │  ← slides in from left/right/top/bottom
│ │                       │    │
│ └───────────────────────┘    │
└──────────────────────────────┘

Layout

• display — portal
• width — content
• height — fill
• intrinsicSize — fills 1 dimension; size by side“
• stackable — false
• fullBleed — true

Visual

A panel that slides in from the chosen edge over a dimmed overlay. Common sides are start (drawer), end (right inspector), bottom (mobile filters).

Props

Name	Type	Default	Description
side	'start' | 'end' | 'top' | 'bottom'	end	Edge the sheet enters from.
title	ReactNode	—	Sheet title.
description	ReactNode	—	Lead paragraph.
isDismissable	boolean	true	Close via overlay click and Escape.
isOpen	boolean	—	Controlled open state.
defaultOpen	boolean	false	Uncontrolled initial open.
onOpenChange	(open: boolean) => void	—	Open change handler.

Slots

• SheetTrigger child — the trigger button
• Sheet children — render-prop receives { close }

Tokens used

color.bg.surface.default, color.text.primary, color.text.secondary, radius.xl, space.4, space.6, font.family.sans, font.size.sm, font.size.xl, font.weight.semibold, shadow.lg

Accessibility

Role: dialog

Notes

• Same focus trapping and dismiss semantics as Dialog. The visual difference is the slide-in animation from a screen edge.
• On bottom and top sides, the sheet has rounded corners only on the entering edge.

Composes with

Component	Relation	Note
Sidebar	child	Used as the mobile drawer body.
Dialog	alternative	Dialog for centered tasks; Sheet for edge-anchored.
ActionSheet	alternative	ActionSheet is the iOS-style action menu.
Popover	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

mobile sidebar drawer

“left drawer with the main nav”

<Sheet side="start" isOpen={open} onOpenChange={setOpen}>
  <Sidebar>...</Sidebar>
</Sheet>

filter panel

“right side filter sheet”

<SheetTrigger>
  <Button>Filter</Button>
  <Sheet side="end">…</Sheet>
</SheetTrigger>

Related

• Dialog
• Popover