Component
ActionSheet
ActionSheet is intentionally narrower than a general context menu. Use it for short, immediate action sets on touch surfaces.
Preview
Grouped actions use comfortable, touch-sized targets.
Installation
pnpm dlx shadcn@latest add https://pwaui.com/r/action-sheet.jsonUsage
import { ActionSheet } from "@/components/ui/action-sheet"
export function Actions() { return ( <ActionSheet> <ActionSheet.Trigger>Actions</ActionSheet.Trigger> <ActionSheet.Content> <ActionSheet.Group> <ActionSheet.Item>Share</ActionSheet.Item> <ActionSheet.Item variant="destructive">Delete</ActionSheet.Item> </ActionSheet.Group> <ActionSheet.Cancel>Cancel</ActionSheet.Cancel> </ActionSheet.Content> </ActionSheet> )}Anatomy
ActionSheetTriggerContentHeaderGroupItemCancelBehavior notes
- Items close the sheet by default.
- Set closeOnSelect={false} for actions that keep the sheet open.
- Groups, items, and Cancel provide deliberate 56px touch targets.
Accessibility
Use specific action labels and reserve the destructive variant for irreversible or difficult-to-recover operations.