Recipe
Share sheet
Mobile share targets in a bottom sheet with copy link.
Parts
- Bottom SheetA panel that rises from the bottom edge—common on mobile for actions and details.
- Scrim / Overlay / BackdropA translucent layer under an overlay that dims the page and blocks clicks.
- Button / Action ButtonA semantic control for an action, with hierarchy expressed through its visual variant.
Avoid
- · Modal Dialog
Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling). Product task: Share sheet Mobile share targets in a bottom sheet with copy link. Compose these UI patterns: - Bottom Sheet: A panel that rises from the bottom edge—common on mobile for actions and details.; use Vaul / shadcn Drawer (bottom) - Scrim / Overlay / Backdrop: A translucent layer under an overlay that dims the page and blocks clicks.; use Dialog overlay / fixed inset-0 bg-black/45 - Button / Action Button: A semantic control for an action, with hierarchy expressed through its visual variant.; use shadcn Button (variants) Avoid: - Do not use Modal Dialog: A centered window that blocks the page until the user responds. Brief: Share action sheet: 1. Trigger opens a Bottom sheet (not a center Modal) with Scrim. 2. Grid of share targets + "Copy link" row; after copy, optional short Toast "Link copied". 3. Esc / scrim closes; return focus to trigger. 4. Keep options scannable; no multi-step form inside the sheet unless necessary. Phone-first layout. Implement as a minimal, coherent flow. Match existing project style.