Pickers

Share Popover

Share panel: invite by email, people with access, general access and copy link. Put it in a Popover.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/SharePopoverExample.tsx
import { Button, Popover, SharePopover } from '@krackedui/motion';

export function ShareButton() {
  return (
    <Popover.Root>
      <Popover.Trigger asChild><Button variant="ghost">Share</Button></Popover.Trigger>
      <Popover.Content radius="lg" align="end" aria-label="Share">
        <SharePopover
          people={[{ name: 'Ada Lovelace', email: 'ada@example.com', you: true }, { name: 'Alan Turing', email: 'alan@example.com', access: 'Can edit' }]}
          onInvite={() => undefined}
          onCopyLink={() => undefined}
        />
      </Popover.Content>
    </Popover.Root>
  );
}

Examples

In a popover

API Reference

SharePopover

PropTypeDefault
people
{ name: string; email?: string; you?: boolean; access?: string; avatar?: string }[]
[]
generalAccess
{ label: ReactNode; icon?: IconName }
{ label: "Only people invited" }
banner
ReactNode
onInvite
(emails: string) => void
onCopyLink
() => void
publishContent
ReactNode
helpHref
string
onPersonAccess
(person: SharePerson) => void
onGeneralAccess
() => void
onAdvanced
() => void
autoFocus
boolean
false

Accessibility

  • Share / Publish tabs follow the WAI-ARIA tabs pattern.
  • The invite field is labelled "Invite people by email"; Enter submits it.
  • Access buttons name the person they change ("Can edit, change access for Alan Turing").
  • The help link says it opens in a new tab; optional controls render only when you pass their handler.

Usage

  • Use behind a "Share" button for documents and projects.
  • Wire onPersonAccess / onGeneralAccess to a Menu or Select that changes the access level.
© 2026 Motion. Internal documentation.