Sidebar 1 (PRF)

A presentational port of the sis-thesqd/prf4 shell — collapsible aside, sectioned nav, grouped items with nested children, badge counts, a search row, and a pinned footer.

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/sidebar-1-prf-block.json

Usage

Mount the demo shell at full viewport height.

TSImport

import { Sidebar1PrfDemo } from "@/components/blocks/sidebar-1-prf-block";

TSExample

import { Sidebar1PrfDemo } from "@/components/blocks/sidebar-1-prf-block";

export function AppShell() {
  return (
    <div className="h-screen w-full">
      <Sidebar1PrfDemo />
    </div>
  );
}

Composition

Slot layout of the PRF sidebar shell.

Sidebar1Prf
├── SidebarHeader  (brand mark + workspace switcher)
├── SidebarSearch  (search input row)
├── SidebarContent
│   └── SidebarSection[]
│       └── SidebarItem (with optional children + badge counts)
└── SidebarFooter  (pinned profile / actions)

Preview

Click “Open fullscreen” to interact with the full shell.

API Reference

Props for the Sidebar1Prf primitive.

Prop	Type	Default	Description
`sections`	SidebarSection[]	—	Top-level groups; each renders an optional label and a list of items.
`footer`	ReactNode	—	Pinned bottom slot — typically the user / workspace block.
`header`	ReactNode	—	Top brand / switcher slot.
`collapsible`	boolean	true	Allow the aside to collapse to icons-only.
`defaultCollapsed`	boolean	false	Start collapsed.
`className`	string	—	Override the outer aside classes.