Sidebar-1

Live preview

Install it

Source

1import { AppSidebar } from "../../components/app-sidebar"
2import { SiteHeader } from "../../components/site-header"
3import {
4    SidebarInset,
5    SidebarProvider,
6} from "@/components/ui/sidebar"
7 
8export default function Page() {
9    return (
10        <SidebarProvider>
11            <AppSidebar />
12            <SidebarInset>
13                <SiteHeader />
14                <div className="flex flex-1 flex-col p-4">
15                    {/* Placeholder canvas for the page content preview. */}
16                    <div className="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min" />
17                </div>
18            </SidebarInset>
19        </SidebarProvider>
20    )
21}

What it pulls in

npm packages

• lucide-react

Other registry items

• button
• dropdown-menu
• sidebar

Files it writes

• registry/blocks/sidebar/sidebar-1/source/app/sidebar/page.tsx
• registry/blocks/sidebar/sidebar-1/source/components/app-sidebar.tsx
• registry/blocks/sidebar/sidebar-1/source/components/nav-favorites.tsx
• registry/blocks/sidebar/sidebar-1/source/components/nav-main.tsx
• registry/blocks/sidebar/sidebar-1/source/components/nav-private.tsx
• registry/blocks/sidebar/sidebar-1/source/components/nav-recents.tsx
• registry/blocks/sidebar/sidebar-1/source/components/nav-secondary.tsx
• registry/blocks/sidebar/sidebar-1/source/components/site-header.tsx
• registry/blocks/sidebar/sidebar-1/source/components/workspaces-switcher.tsx