macOS Sidebar

A sidebar with a macOS-style design that expands and collapses smoothly. It shows items in a list with hover and selection effects. It is used in applications needing a responsive, interactive sidebar.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/macos-sidebar

npx layro-cli add @watermeloncorp/macos-sidebar

npx layro-cli add @watermeloncorp/macos-sidebar

bunx layro-cli add @watermeloncorp/macos-sidebar

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

Code

Demo

"use client";

import { PlusSignIcon, SidebarLeftIcon } from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
import { motion, AnimatePresence } from "motion/react";
import { useState, type ReactNode } from "react";

export interface MacOSSidebarProps {
  items: string[];
  defaultOpen?: boolean;
  initialSelectedIndex?: number;
  children?: ReactNode;
  className?: string;
}