Live preview from the library's source
Install
From shadcn/ui
npx shadcn@latest add https://ui.shadcn.com/r/styles/new-york-v4/sidebar-16.jsonFrom this collection
npx shadcn@latest add https://allcomps.vercel.app/r/ui-shadcn--sidebar-16.jsonCode
import { AppSidebar } from "@/registry/new-york-v4/blocks/sidebar-16/components/app-sidebar"
import { SiteHeader } from "@/registry/new-york-v4/blocks/sidebar-16/components/site-header"
import {
SidebarInset,
SidebarProvider,
} from "@/registry/new-york-v4/ui/sidebar"
export const iframeHeight = "800px"
export const description = "A sidebar with a header and a search form."
export default function Page() {
return (
<div className="[--header-height:calc(--spacing(14))]">
<SidebarProvider className="flex flex-col">
<SiteHeader />
<div className="flex flex-1">
<AppSidebar />
<SidebarInset>
<div className="flex flex-1 flex-col gap-4 p-4">
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
<div className="aspect-video rounded-xl bg-muted/50" />
<div className="aspect-video rounded-xl bg-muted/50" />
<div className="aspect-video rounded-xl bg-muted/50" />
</div>
<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
</div>
</SidebarInset>
</div>
</SidebarProvider>
</div>
)
}
Other sidebars
The same kind of component from the other libraries in the collection.