Glass SidebarCollapsible glassmorphism sidebar with icon-only and full label states, spring-animated expand and collapse.
.png)
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/glass-sidebarFor dark mode, add the dark class to your <html> element:
<html class="dark">Install with AI Canvas MCP
With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.
About Glass Sidebar
Glass Sidebar is a collapsible glassmorphism rail that animates between an icon-only and a fully-labeled state with a single spring-driven transition. Each row stays touch-friendly in both modes, and the labels fade in with a slight stagger so the expansion feels intentional. The glass surface uses backdrop-filter, so it always picks up the background color of the app beneath. It is the default left rail for SaaS dashboards, admin panels, and any web app where you want a clean primary navigation that gets out of the way on demand.
Built with
Frequently asked questions
- Is Glass Sidebar free to use?
- Yes. Glass Sidebar is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
- How do I install Glass Sidebar?
- One command: npx shadcn@latest add https://aicanvas.me/r/glass-sidebar.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Glass Sidebar for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
- What is Glass Sidebar built with?
- Glass Sidebar is built with React and TypeScript, using Motion and Tailwind CSS.
- Where would I use Glass Sidebar?
- Common uses include Dashboard, Admin panel, and SaaS. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Glass Sidebar with AI?
- Yes. Glass Sidebar ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas