Share Sheet

Pro

In-app share panel with an item preview, copy link, people and share options. Pick people, add a note and send; the button confirms who it went to before the panel closes.

Preview

Installation

npx @lumioui/cli add pro/share-sheet

Usage

import { ShareSheet } from "@/components/ui/share-sheet/share-sheet";
<ShareSheet />

Examples

Invite link

Inviting people to a design studio's workspace.

Listing share

Sharing a second-hand listing in neutral ink.

Playlist share

Sharing a playlist from its detail page.

Post share

Sharing a beach photo from a feed.

API reference

Prop Type Default
open boolean —
defaultOpen boolean false
onOpenChange (open: boolean) => void —
title string

Sheet title. Default "Share".

 "Share"
item ShareItem

What is being shared.

 —
link string

Link row with a Copy pill.

 —
onCopyLink (link: string) => void

Called when Copy is pressed (do the clipboard write here).

 —
people SharePerson[]

People row.

 []
onSendToPeople (ids: string[], message: string) => void

Send to the selected people (with the optional note). Fires on the tap; the sheet closes after the sent result has held.

 —
actions ShareAction[]

Target row — generic share destinations.

 —
footer React.ReactNode

Extra content under the targets (a toggle, fine print).

 —
className string —