# Mobile Bottom Sheet

Order detail with delivery tracking opened from a card on mobile.

- id: `mobile-bottom-sheet`
- Page: https://agentic-ui-kit.com/components/mobile-bottom-sheet
- Live preview: https://agentic-ui-kit.com/live/component/mobile-bottom-sheet

## Install

```bash
agentic-ui add mobile-bottom-sheet
npx shadcn@4.17.0 add @agentic-ui/mobile-bottom-sheet
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** snap-points, drag-to-dismiss, drag-handle, keyboard-snap-controls, focus-trap, escape-dismiss, snap-point-announcement, controlled-and-uncontrolled, empty-state-handling, error-recovery, scrollable-body, footer-actions
- **Intents:** explore-detail, track-status, configure, execute-flow
- **Suits domains:** ecommerce, logistics, saas, personal-productivity, operations
- **Interaction:** drag, snap-to-height, keyboard-navigation, escape-dismiss, focus-trap, tap
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** order detail with delivery tracking opened from a card on mobile, filter sheet that expands to half height and then to full screen, confirmation of an action with primary actions pinned to the sheet footer, detail panel with no content yet that shows its empty state inside the sheet
- **Avoid when:** long-form reading content, where a full detail page is appropriate, permanent navigation between sections, which corresponds to a bottom destinations bar
- **Preserve when adapting:** snap-point-model, focus-and-dismiss-behaviour, handle-affordance, keyboard-snap-controls
- **Replace when adapting:** domain-copy, body-content, footer-actions, icon-set
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** badge, button
- **npm dependencies:** vaul, lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** clsx@^2.1.1, lucide-react@0.577.0, tailwind-merge@3.5.0, vaul@1.1.2