SayUI

Recipe

Share sheet

Mobile share targets in a bottom sheet with copy link.

  • 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.
  • · 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.