Component

Sheet

Slide-in panel from the edge of the screen for secondary content.

tsx

import { Sheet, SidePanel, BottomSheet } from 'wss3-forge'

Usage

•

Use for secondary content, forms, and settings

•

SidePanel alias for Sheet

•

BottomSheet for mobile-friendly bottom panels

•

Closes on backdrop click and Escape key

Examples

Settings Sheet (Right Position)

Settings

Manage your preferences

Appearance

Dark Mode

Notifications

Email notificationsPush notifications

tsx

1<Sheet
2  open={isOpen}
3  onClose={() => setIsOpen(false)}
4  position="right"
5  title="Settings"
6  subtitle="Manage your preferences"
7>
8  <VStack gap="lg">
9    <Switch label="Dark Mode" />
10    <Switch label="Notifications" />
11    <Switch label="Auto-save" />
12  </VStack>
13</Sheet>

Sheet with Footer Actions

Edit Profile

Name

tsx

1<Sheet
2  open={isOpen}
3  onClose={() => setIsOpen(false)}
4  title="Edit Profile"
5  footer={
6    <HStack gap="sm" style={{ justifyContent: 'flex-end' }}>
7      <Button variant="secondary">Cancel</Button>
8      <Button>Save</Button>
9    </HStack>
10  }
11>
12  <Input label="Name" />
13  <Input label="Email" />
14</Sheet>

Popover

Tooltip

Last updated: December 2025