'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Overlays
Sheet
A panel that slides in from an edge and follows the finger: swipe it away, or drag it between snap points. From the bottom on phones, centered or from a side on desktop, with a handle, a title, a description and pinned actions.
import { SheetTrigger, Sheet, ActionSheet } from '@alea/ui';
Examples
Bottom sheet
Opens from the bottom with a handle; swipe it down, tap outside or press Escape to close. Actions sit in the footer, where thumbs reach.
Snap points and positions
snapPoints={[0.5, 1]} opens half way and drags to full height; position puts it at the top, a side or the center.
ActionSheet
A short list of actions in a bottom sheet, with Cancel apart. Each action closes it.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-bg…--alea-border…--alea-border-strong…--alea-surface-overlay…--alea-text…--alea-text-muted…
Space
--alea-space-2…
Radius
--alea-radius-lg…--alea-radius-xl…
Type
--alea-font-family-body…--alea-font-size-lg…--alea-font-size-sm…--alea-font-weight-semibold…
Shadow
--alea-shadow-pop…
Layer
--alea-z-modal…
Props
Sheet props
A panel that slides in from an edge and follows the finger: swipe it away, or drag it between snap points. Built for phones; on desktop it works like a drawer.
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | - | Name for screen readers when there is no title. |
children | ReactNode | - | The content. |
className | string | - | Extra class names for the sheet. |
description | ReactNode | - | A line under the title. |
footer | ReactNode | - | Content pinned at the bottom: actions. |
hideHandle | boolean | - | Hides the drag handle (it shows for bottom and top sheets). |
position | "start" | "end" | "bottom" | "center" | "top" | 'bottom' | Where the sheet comes from: bottom (default, phones), top, start, end or center. |
preventDismissal | boolean | - | Swiping and tapping outside do not close it (for unsaved work). |
snapPoints | (string | number)[] | - | Heights it rests at, as fractions of the screen or CSS lengths: [0.5, 1] opens half way and can be dragged to full. |
title | ReactNode | - | The title, read when the sheet opens. |
ActionSheet props
A list of actions in a bottom sheet, with Cancel apart: Share, Duplicate, Delete. The phone way to show a short menu.
| Prop | Type | Default | Description |
|---|---|---|---|
actionsrequired | ActionSheetAction[] | - | The actions, top to bottom. Each one closes the sheet. |
triggerrequired | ReactNode | - | The button that opens it. |
cancelLabel | ReactNode | - | The text of the cancel button. Default "Cancel". |
description | ReactNode | - | A line under the title. |
isOpen | boolean | - | Open state (controlled). |
onOpenChange | ((open: boolean) => void) | - | Called when it opens or closes. |
title | ReactNode | - | A short title over the actions. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
Sheet
- Variants
positionstartendbottomcentertop- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-sheet-overlay.alea-sheet-backdrop.alea-sheet.alea-sheet-content.alea-sheet-handle.alea-sheet-head.alea-sheet-title.alea-sheet-desc.alea-sheet-body.alea-sheet-foot- Data attributes
data-position=bottomdata-position=topdata-position=startdata-position=enddata-position=center
ActionSheet
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-action-sheet
Accessibility
- A modal dialog: focus moves in and stays inside; Escape closes and focus returns to the trigger.
- The title names the dialog; without one, give it an aria-label.
- Swiping is never the only way out: Escape, a tap on the backdrop and your own Close button work too (unless preventDismissal).
- The drag handle is decorative and hidden from screen readers.
Keyboard
| Key | Does |
|---|---|
| Escape | Closes |
| Tab | Cycles inside |
Do and don't
Do
- Use it for short tasks on phones: share, filters, a quick form, an action list.
- Give snap points when the content is long: [0.5, 1] opens half way.
- Keep the main action in the footer, where thumbs reach.
Don't
- Don't stack more than two sheets.
- Don't use preventDismissal unless leaving would lose work.