# Family Drawer > Multi-view bottom sheet drawer for React and shadcn/ui built on Vaul and Motion that resizes smoothly as views change. Source: https://www.cult-ui.com/docs/components/family-drawer ## Example ```tsx title="family-drawer-demo.tsx" "use client" import { useCallback, useEffect, useId, useRef, useState } from "react" import { AlertTriangle, ArrowLeft, ArrowRight, CheckCircle, File, Image, Trash, Upload, XCircle, } from "lucide-react" import { FamilyDrawerAnimatedContent, FamilyDrawerAnimatedWrapper, FamilyDrawerButton, FamilyDrawerClose, FamilyDrawerContent, FamilyDrawerDescription, FamilyDrawerHeader, FamilyDrawerOverlay, FamilyDrawerPortal, FamilyDrawerRoot, FamilyDrawerSecondaryButton, FamilyDrawerTitle, FamilyDrawerTrigger, FamilyDrawerViewContent, useFamilyDrawer, type ViewsRegistry, } from "@/components/ui/family-drawer" // ============================================================================ // Example 2: Custom Views via Props // ============================================================================ function CustomDefaultView() { const { setView } = useFamilyDrawer() return ( <>
Custom Menu
setView("settings")}> ⚙ī¸ Settings setView("profile")}> 👤 Profile setView("about")}> ℹī¸ About
) } function CustomSettingsView() { const { setView } = useFamilyDrawer() return (
⚙ī¸} title="Settings" description="Configure your preferences and application settings." />
Notifications
Dark Mode
setView("default")} className="bg-secondary text-secondary-foreground" > Back setView("default")} className="bg-primary text-primary-foreground" > Save
) } function CustomProfileView() { const { setView } = useFamilyDrawer() const nameId = useId() const emailId = useId() return (
👤} title="Profile" description="View and edit your profile information." />
setView("default")} className="bg-secondary text-secondary-foreground" > Cancel setView("default")} className="bg-primary text-primary-foreground" > Update
) } function CustomAboutView() { const { setView } = useFamilyDrawer() return (
ℹī¸} title="About" description="Learn more about this application." />

Version 1.0.0

Built with React and TypeScript

setView("default")} className="bg-secondary text-secondary-foreground" > Close
) } const customViews: ViewsRegistry = { default: CustomDefaultView, settings: CustomSettingsView, profile: CustomProfileView, about: CustomAboutView, } export function CustomViewsExample() { return (

Custom Views via Props

Pass custom views as a prop to FamilyDrawerRoot

Open Custom Drawer
) } // ============================================================================ // Example 4: Composable Pattern (Manual View Control) // ============================================================================ function ComposableView() { const { view, setView } = useFamilyDrawer() return (
🎨} title="Composable Example" description="This view uses the composable pattern with manual view control." />

Current view: {view}

) } function View1() { const { setView } = useFamilyDrawer() return (
1ī¸âƒŖ} title="View 1" description="This is the first view in the composable pattern." />
✓ First step completed
→ Ready to proceed
setView("default")} className="bg-secondary text-secondary-foreground" > Back setView("view2")} className="bg-primary text-primary-foreground" > View 2
) } function View2() { const { setView } = useFamilyDrawer() return (
2ī¸âƒŖ} title="View 2" description="This is the second view in the composable pattern with additional content." />
✓ First step completed
✓ Second step in progress
→ Continue to final step

This view has more content to demonstrate height differences between views.

setView("view1")} className="bg-secondary text-secondary-foreground" > View 1 setView("view3")} className="bg-primary text-primary-foreground" > View 3
) } function View3() { const { setView } = useFamilyDrawer() return (
3ī¸âƒŖ} title="View 3" description="This is the final view in the composable pattern." />
✓ All steps completed
🎉 Ready to finish
setView("view2")} className="bg-secondary text-secondary-foreground" > View 2 setView("default")} className="bg-primary text-primary-foreground" > Back to Menu
) } const composableViews: ViewsRegistry = { default: ComposableView, view1: View1, view2: View2, view3: View3, } export function ComposablePatternExample() { return (

Composable Pattern

Manual view control using useFamilyDrawer hook

Open Composable Drawer
) } // ============================================================================ // Example 5: Minimal Custom View // ============================================================================ function MinimalView() { const { setView } = useFamilyDrawer() return (
Minimal View A simple, minimal view example.
) } const minimalViews: ViewsRegistry = { default: MinimalView, } export function MinimalExample() { return (

Minimal Example

A simple, single-view drawer

Open Minimal Drawer
) } // ============================================================================ // Example 6: File Upload Flow // ============================================================================ interface FileWithPreview extends File { preview?: string } function FileUploadDefaultView() { const { setView } = useFamilyDrawer() const fileInputRef = useRef(null) const [isDragging, setIsDragging] = useState(false) const handleDragEnter = useCallback((e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragging(true) }, []) const handleDragLeave = useCallback((e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragging(false) }, []) const handleDragOver = useCallback((e: React.DragEvent) => { e.preventDefault() e.stopPropagation() }, []) const handleDrop = useCallback( (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragging(false) const files = Array.from(e.dataTransfer.files) if (files.length > 0) { // Store files in a way that can be accessed by other views // For demo purposes, we'll use a simple approach const event = new CustomEvent("filesSelected", { detail: { files } }) window.dispatchEvent(event) setView("preview") } }, [setView] ) const handleFileSelect = useCallback( (e: React.ChangeEvent) => { const files = Array.from(e.target.files || []) if (files.length > 0) { const event = new CustomEvent("filesSelected", { detail: { files } }) window.dispatchEvent(event) setView("preview") } }, [setView] ) return (
} title="Upload Files" description="Drag and drop files here or click to browse" />
) } function FilePreviewView() { const { setView } = useFamilyDrawer() const [files, setFiles] = useState([]) useEffect(() => { const handleFilesSelected = (e: Event) => { const customEvent = e as CustomEvent<{ files: File[] }> const selectedFiles = customEvent.detail.files.map((file, idx) => { const fileWithPreview: FileWithPreview = Object.assign(file, { preview: undefined, }) if (file.type.startsWith("image/")) { const reader = new FileReader() reader.onload = (e) => { fileWithPreview.preview = e.target?.result as string setFiles((prev) => { const updated = [...prev] updated[idx] = fileWithPreview return updated }) } reader.readAsDataURL(file) } return fileWithPreview }) setFiles(selectedFiles) } window.addEventListener("filesSelected", handleFilesSelected) return () => { window.removeEventListener("filesSelected", handleFilesSelected) } }, []) const formatFileSize = (bytes: number) => { if (bytes === 0) return "0 Bytes" const k = 1024 const sizes = ["Bytes", "KB", "MB", "GB"] const i = Math.floor(Math.log(bytes) / Math.log(k)) return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i] } return (
} title="Preview Files" description={`${files.length} file${files.length !== 1 ? "s" : ""} selected`} />
{files.map((file) => { const fileKey = `${file.name}-${file.size}-${file.lastModified}` return (
{file.preview ? (
) : (
)}

{file.name}

{formatFileSize(file.size)}

) })}
setView("default")} className="bg-secondary text-secondary-foreground" > Back setView("edit")} className="bg-primary text-primary-foreground" > Continue
) } function FileEditMetadataView() { const { setView } = useFamilyDrawer() const nameId = useId() const descriptionId = useId() const tagsId = useId() return (
} title="Edit Metadata" description="Add details to your files" />