block / navigation
PREVIEW READYSidebar
A grouped application sidebar with active state and footer slot.
Designed as a complete stateful module
Responsive, keyboard-ready, theme-aware, and owned by your project after installation.
INSTALL / SOURCE REGISTRY
Add Sidebar to your project
The command adds the component source and its DesignOS base dependency.
$
pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/sidebar.jsonregistry/default/blocks/sidebar.tsx
import * as React from "react"
import "@/components/designos/designos.css"
export type SidebarItem = { label: string; href: string; icon?: React.ReactNode; active?: boolean }
export type SidebarSection = { label: string; items: SidebarItem[] }
export function Sidebar({ sections, footer, label = "Sidebar" }: { sections: SidebarSection[]; footer?: React.ReactNode; label?: string }) {
return <aside className="dos-sidebar" aria-label={label}>{sections.map((section) => <nav key={section.label} className="dos-sidebar__section" aria-label={section.label}><div className="dos-sidebar__label">{section.label}</div>{section.items.map((item) => <a key={item.href} className="dos-sidebar__link" href={item.href} aria-current={item.active ? "page" : undefined}>{item.icon}{item.label}</a>)}</nav>)}{footer && <div style={{ marginTop: "auto" }}>{footer}</div>}</aside>
}
Component contract
- Source-owned after installation
- Dark and light theme variables
- Keyboard and visible-focus behavior
- Reduced-motion fallback
- Responsive from 320px upward
- IBM Plex Sans + JetBrains Mono hierarchy