Matte Sidebar Navigation

A collapsible icon-rail sidebar that switches between workspace sections (Projects, Files, Saved) and animates its active-item marker and content panel.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Matte Sidebar Navigation to your project and fits it to your theme.

import MatteSidebarNavigation from "@/components/ui/matte-sidebar-navigation";

export default function MatteSidebarNavigationDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-[#edf0f1] p-8">
      <MatteSidebarNavigation />
    </div>
  );
}