BottomSheet
A modal panel from the bottom edge with a drag handle and a Close button; focus is trapped and returns.
- Pro, mobile
- Version 2.0.0-rc.1
- APG pattern: Dialog (modal)
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
Open
Tokens
The 15 design tokens BottomSheet reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 15 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.border.strong | … | --sd-color-border-strong |
| color.border.subtle | … | --sd-color-border-subtle |
| color.text.secondary | … | --sd-color-text-secondary |
| dialog.bg | … | --sd-dialog-bg |
| dialog.fg | … | --sd-dialog-fg |
| dialog.radius | … | --sd-dialog-radius |
| dialog.scrim | … | --sd-dialog-scrim |
| elevation.3 | … | --sd-elevation-3 |
| layer.modal | … | --sd-layer-modal |
| radius.full | … | --sd-radius-full |
| spacing.gap.sm | … | --sd-spacing-gap-sm |
| spacing.inset.lg | … | --sd-spacing-inset-lg |
| spacing.stack.lg | … | --sd-spacing-stack-lg |
| spacing.stack.md | … | --sd-spacing-stack-md |
| spacing.stack.xs | … | --sd-spacing-stack-xs |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/bottom-sheetThen import it
import { BottomSheet, BottomSheetTrigger } from "@/components/ui/bottom-sheet"Props
| Prop | Type | What it does |
|---|---|---|
titlerequired | string | Required: names the sheet and is its heading. |
description | ReactNode | |
children | ReactNode | ((opts: { close: () => void }) => ReactNode) | |
footer | ReactNode | Actions pinned to the bottom of the sheet. |
isOpen | boolean | |
onOpenChange | (isOpen: boolean) => void | |
className | string |
When to use it
Use it for
- Mobile choices and short forms (sort, share options)
Use something else for
- Desktop tasks: use Dialog
- Two or three actions about one thing: use ActionSheet
Accessibility
Screen readers announce "Sort by, dialog".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6, 2.3.3.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Keep it short; long content belongs on its own screen
Shared patterns it ships with: 2.4.12.
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 40 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 45 text runs: 0 below 7:1, lowest 11.42:1 |
| Target size | 14 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 18 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 4 of 4, Firefox 4 of 4, WebKit 4 of 4 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches the trigger |
| Enter | Enter opens the sheet; focus moves in |
| Tab | Tab cycles inside the sheet only |
| Escape | Esc closes it and focus returns to the trigger |
In Figma
The Figma component is BottomSheet. The Figma library isn’t published yet.
Figma to code: Title → title; Description → description when Show description; Content → children; Footer → footer.