Sidebar

A composable, themeable and customizable sidebar component.

Installation

npx shadcn@latest add https://spoke.georgedrury.co.uk/r/sidebar

Lineage

Shadcn

Docs

Spoke

Anatomy

import {
	Sidebar,
	SidebarContent,
	SidebarGroup,
	SidebarGroupContent,
	SidebarMenu,
	SidebarMenuItem,
	SidebarMenuButton,
	SidebarProvider,
	SidebarTrigger,
} from "@/components/ui/sidebar"

export default () => (
	<SidebarProvider>
		<Sidebar>
			<SidebarContent>
				<SidebarGroup>
					<SidebarGroupContent>
						<SidebarMenu>
							<SidebarMenuItem>
								<SidebarMenuButton />
							</SidebarMenuItem>
						</SidebarMenu>
					</SidebarGroupContent>
				</SidebarGroup>
			</SidebarContent>
		</Sidebar>
		<SidebarTrigger />
	</SidebarProvider>
)

Spoke utility classes

Class	Fallback chain	Description
`--sidebar`	`var(--background)`	Colour for sidebar
`--sidebar-foreground`	`var(--foreground)`	Text/icon colour for sidebar
`--sidebar-primary`	`var(--primary)`	Colour for primary sidebar variant
`--sidebar-primary-foreground`	`var(--primary-foreground)`	Text/icon colour for primary sidebar variant
`--sidebar-accent`	`var(--accent)`	Colour for accent sidebar variant
`--sidebar-accent-foreground`	`var(--accent-foreground)`	Text/icon colour for accent sidebar variant
`--sidebar-border`	`var(--border)`	Border colour for sidebar
`--sidebar-ring`	`var(--ring)`	Colour for ring sidebar variant