Glass Sidebar

A compound sidebar system with glass shell, trigger, input, and menu states.

import {
  GlassSidebar,
  GlassSidebarInput,
  GlassSidebarMenuButton,

Installation

$ npx shadcn add @glasscn/glass-sidebar

API

Prop

Type

Default

Description

GlassSidebarglassVariant

"clear" | "frosted" | "subtle" | "liquid" | "liquid-bold""clear"

Controls the glass surface treatment.

GlassSidebar...props

React.ComponentProps<typeof Sidebar>-

Props from the underlying shadcn/ui primitive.

GlassSidebarTriggerglassVariant

"clear" | "frosted" | "subtle" | "liquid" | "liquid-bold""clear"

Controls the glass surface treatment.

GlassSidebarTrigger...props

React.ComponentProps<typeof SidebarTrigger>-

Props from the underlying shadcn/ui primitive.

GlassSidebarInset...props

React.ComponentProps<typeof SidebarInset>-

Props from the underlying shadcn/ui primitive.

GlassSidebarInput...props

React.ComponentProps<typeof Input>-

Props from the underlying shadcn/ui primitive.

GlassSidebarMenuButton...props

React.ComponentProps<typeof SidebarMenuButton>-

Props from the underlying shadcn/ui primitive.

GlassSidebarMenuSubButton...props

React.ComponentProps<typeof SidebarMenuSubButton>-

Props from the underlying shadcn/ui primitive.

GlassSidebarSeparator...props

React.ComponentProps<typeof GlassSeparator>-

Props from the underlying shadcn/ui primitive.

Variants

clear

frosted

subtle

liquid

liquid-bold