share sheet

A button that expands to show a list of users for sharing. It animates when opened and shows a success state after selection. It is used to let users choose someone to share a link with.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/share-sheet

npx layro-cli add @watermeloncorp/share-sheet

npx layro-cli add @watermeloncorp/share-sheet

bunx layro-cli add @watermeloncorp/share-sheet

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

'use client';

import { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { FiShare } from 'react-icons/fi';
import { cn } from '@/lib/utils';

interface User {
  id: string;
  name: string;
  avatar: string;
}

interface ShareSheetProps {