# Family Button > Family app-inspired floating button for React and shadcn/ui that expands from a plus icon into a panel of custom content. Source: https://www.cult-ui.com/docs/components/family-button ## Example ```tsx title="family-button-demo.tsx" "use client" import { useMemo, useState } from "react" import { AnimatePresence, motion, MotionConfig } from "motion/react" import useMeasure from "react-use-measure" import FamilyButton from "../ui/family-button" export default function FamilyButtonDemo() { return (
) } let tabs = [ { id: 0, label: "Apple" }, { id: 1, label: "Spotify" }, ] export function MusicPlayerExample() { const [activeTab, setActiveTab] = useState(0) const [direction, setDirection] = useState(0) const [isAnimating, setIsAnimating] = useState(false) const [ref, bounds] = useMeasure() const content = useMemo(() => { switch (activeTab) { case 0: return (
) case 1: return (
) default: return null } }, [activeTab]) const handleTabClick = (newTabId: number) => { if (newTabId !== activeTab && !isAnimating) { const newDirection = newTabId > activeTab ? 1 : -1 setDirection(newDirection) setActiveTab(newTabId) } } const variants = { initial: (direction: number) => ({ x: 300 * direction, opacity: 0, filter: "blur(4px)", }), active: { x: 0, opacity: 1, filter: "blur(0px)", }, exit: (direction: number) => ({ x: -300 * direction, opacity: 0, filter: "blur(4px)", }), } return (
{tabs.map((tab, i) => ( ))}
setIsAnimating(false)} > setIsAnimating(true)} onAnimationComplete={() => setIsAnimating(false)} > {content}
) } ``` FamilyButton is a React button component for shadcn/ui, built with Motion. Use it for floating action menus, quick-create shortcuts, or compact share options on mobile-style interfaces. ## Installation ### CLI ```bash npx shadcn@latest add @cult-ui/family-button ``` ### Manual **Copy and paste the following code into your project.** ```tsx title="family-button.tsx" "use client" import { FC, ReactNode, useState } from "react" import { PlusIcon, XIcon } from "lucide-react" import { motion } from "motion/react" import { cn } from "@/lib/utils" const CONTAINER_SIZE = 200 interface FamilyButtonProps { children: React.ReactNode } const FamilyButton: React.FC = ({ children }) => { const [isExpanded, setIsExpanded] = useState(false) const toggleExpand = () => setIsExpanded(!isExpanded) return (
{isExpanded ? ( {children} ) : null}
) } // A container that wraps content and handles animations interface FamilyButtonContainerProps { isExpanded: boolean toggleExpand: () => void children: ReactNode } const FamilyButtonContainer: FC = ({ isExpanded, toggleExpand, children, }) => { return ( {children} {isExpanded ? ( ) : ( )} ) } export { FamilyButton } export default FamilyButton ``` **Update the import paths to match your project setup.** ## Usage ```tsx

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum eos quia incidunt perspiciatis, ut, deleniti fugit a aliquam sequi, voluptatum pariatur quaerat. Temporibus sed facere at, voluptas dolorem officiis incidunt!

Texture card

```