# Share access

A share panel: invite people as validated email chips with suggestions, change roles from a compact menu, remove with undo, switch link access and copy the link, with every change landing in place.

- ID: `share-access`
- Import: `animui/share-access`
- Category: Disclosure
- Runtime exports: `ShareAccess`
- Declaration: `types/pro/share-access.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: popover, tag-input, dropdown-menu, copy-button, combobox

```tsx
import { ShareAccess } from 'animui/share-access';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info share-access` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export type ShareRole = 'viewer' | 'commenter' | 'editor';
export interface ShareAccessMember { id: string; name: string; email?: string; avatar?: string; role: ShareRole; }
export interface ShareAccessContact { id: string; name: string; email: string; avatar?: string; }
export interface ShareGeneralAccess { role: ShareRole; enabled: boolean; }
export interface ShareAccessProps {
  title?: string;
  members?: readonly ShareAccessMember[];
  defaultMembers?: readonly ShareAccessMember[];
  onMembersChange?: (members: ShareAccessMember[]) => void;
  access?: "restricted" | "link";
  defaultAccess?: "restricted" | "link";
  onAccessChange?: (access: ShareGeneralAccess) => void;
  linkRole?: "viewer" | "commenter" | "editor";
  defaultLinkRole?: ShareRole;
  onLinkRoleChange?: (role: ShareRole) => void;
  directory?: readonly ShareAccessContact[];
  link?: string;
  selfId?: string;
  defaultInviteRole?: ShareRole;
  onInvite?: (people: ShareAccessContact[], role: ShareRole) => void | Promise<void>;
  onCopyLink?: (link: string) => void;
  onDone?: () => void;
  className?: string;
  style?: CSSProperties;
}

export declare const ShareAccess: ComponentType<ShareAccessProps>;

export default ShareAccess;
```