Family Drawer

Renders a drawer with multiple views and smooth animations. It shows different content based on the current view and animates transitions between views. Use it to display layered content in a compact space.

byjordan from Cult UI

Installation

terminal

pnpm dlx layro-cli add @nolly-studio/family-drawer

npx layro-cli add @nolly-studio/family-drawer

npx layro-cli add @nolly-studio/family-drawer

bunx layro-cli add @nolly-studio/family-drawer

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

Code

Demo

"use client"

import {
  createContext,
  useContext,
  useMemo,
  useRef,
  useState,
  type ReactNode,
} from "react"
import { Slot } from "@radix-ui/react-slot"
import { AnimatePresence, motion } from "motion/react"
import useMeasure from "react-use-measure"
import { Drawer } from "vaul"