Contextual settings
Background sync is enabled.
Android bottom sheet
A native modal bottom sheet with Material geometry, accessible naming and focus restoration.
Preview
In action
When to use
Use it for
- Contextual Android controls that temporarily cover the lower screen.
- A focused choice or short task with a clear way to dismiss it.
Not for
- Permanent side navigation or long documents.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { AndroidSheet, AndroidSheetTitle, AndroidSheetBody } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/android-sheet.
2. Vendor the source
npx @noorddev/vlak-cli add android-sheet
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/android-sheet.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { AndroidSheet, AndroidSheetTitle, AndroidSheetBody } from "@noorddev/vlak-react";
<AndroidSheet open={open} onOpenChange={setOpen}>
<AndroidSheetTitle>Connection settings</AndroidSheetTitle>
<AndroidSheetBody>Choose how this device connects.</AndroidSheetBody>
</AndroidSheet>Props
AndroidSheet
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | ||
defaultOpen | boolean | false | |
onOpenChange | (open: boolean) => void | ||
onClose | () => void | ||
dismissable | boolean | true | |
lightDismiss | boolean | true | |
closeLabel | string | "Close" |
Also accepts Omit< DialogHTMLAttributes<HTMLDialogElement>, "open" | "onClose" >.
AndroidSheetBody
Also accepts HTMLAttributes<HTMLParagraphElement>.
AndroidSheetTitle
Also accepts HTMLAttributes<HTMLHeadingElement>.
Keyboard
| Keys | Does |
|---|---|
| Tab or Shift+Tab | Moves through the modal's controls using native dialog focus containment. |
| Escape | Requests dismissal when dismissable is enabled. |
| Enter or Space | Activates the focused control. |
Accessibility
- Native dialog showModal supplies the top layer, inert background and focus containment.
- Title and body parts connect aria-labelledby and aria-describedby automatically.
- Closing returns focus to the connected opener.
- The handle is decorative; this sheet does not promise a drag gesture.
- Supports controlled open state or defaultOpen; onOpenChange reports dismissal.
Markup
<dialog class="rs-android-sheet" aria-labelledby="android-sheet-title"><span class="rs-android-sheet-handle" aria-hidden="true"></span><button class="rs-android-sheet-close" type="button" aria-label="Close">×</button><h2 class="rs-android-sheet-title" id="android-sheet-title">Connection settings</h2><p class="rs-android-sheet-body">Choose how this device connects.</p></dialog>
Classes
.rs-android-sheet.rs-android-sheet-open.rs-android-sheet-handle.rs-android-sheet-close.rs-android-sheet-title.rs-android-sheet-body