A mobile menu in a bottom sheet you drag between half and full height, or flick down to dismiss, with quick action tiles above the links. The backdrop darkens with the sheet and focus stays inside while it is open.
$12,480.22
+2.4% this week
npx shadcn@latest add https://hyperblur.dev/r/menu-side-bottom-sheet.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/menu-side-bottom-sheet.tsx.
import { MenuSideBottomSheet } from "@/components/hyperblur/menu-side-bottom-sheet"
<MenuSideBottomSheet onChange={(id) => router.push(`/${id}`)} onAction={(id) => run(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| actions | { id: string; label: string; icon?: MenuSideBottomSheetIconName | ReactNode; tint?: string }[] | Scan, Send, Cards, Rewards | Quick action tiles in a row of four. |
| links | { id: string; label: string; icon?: MenuSideBottomSheetIconName | ReactNode; meta?: string }[] | Home, Activity, Insights, Security, Help center | Menu rows. |
| active | string | Controlled current link id. Pair with onChange. | |
| defaultActive | string | first link | Initially current link when uncontrolled. |
| onChange | (id: string) => void | Called when a menu row is chosen. | |
| onAction | (id: string) => void | Called when a quick action tile is pressed. | |
| open | boolean | Controlled open state. | |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called when the sheet opens or is dismissed. | |
| snaps | number[] | [0.56, 0.92] | Snap heights as fractions of the container. The sheet opens at the lowest. |
| user | { name: string; detail?: string; color?: string } | Jordan Ellis | Person shown in the sheet header. |
| triggerLabel | string | "Menu" | Text of the floating button that opens the sheet. |
| embedded | boolean | false | Position inside the nearest positioned parent instead of the viewport, without scroll lock or focus trap. |
| accent | string | "#2f7bff" | Accent for the current row, badges and focus rings. |