Ansora sidebar

primitivenavigation

Install

pnpm dlx shadcn@4.23.0 add @ansora/sidebar

Examples

Usage

For a whole application you usually do not want this primitive directly — install @ansora/app-shell, which composes the complete skeleton (AppShell) on top of it.

This item installs the sidebar and the useIsMobile hook, nothing else. In particular it does NOT install readSidebarState() — that helper ships with @ansora/app-shell (registry/ansora/lib/sidebar-state.ts), and it cannot also ship here: two items installing the same file would overwrite each other in your project.

If you compose your own layout, wrap the application in SidebarProvider and give it defaultOpen read on the server. Either install @ansora/app-shell for the helper, or read the cookie yourself:

import { cookies } from "next/headers"

export default async function Layout({ children }: { children: React.ReactNode }) {
  const raw = (await cookies()).get("sidebar_state")?.value
  const defaultOpen = raw === undefined ? true : raw === "true"
  return <SidebarProvider defaultOpen={defaultOpen}>{children}</SidebarProvider>
}

Without it the sidebar re-expands on every navigation: the upstream sidebar writes that cookie but never reads it back.

Files

• registry/ansora/ui/sidebar.tsx → @ui/ansora/sidebar.tsx
• registry/ansora/hooks/use-mobile.ts → @hooks/ansora/use-mobile.ts

Dependencies

• @ansora/base
• https://ui.shadcn.com/r/styles/base-nova/sheet.json
• https://ui.shadcn.com/r/styles/base-nova/tooltip.json
• https://ui.shadcn.com/r/styles/base-nova/skeleton.json
• https://ui.shadcn.com/r/styles/base-nova/separator.json
• https://ui.shadcn.com/r/styles/base-nova/input.json
• https://ui.shadcn.com/r/styles/base-nova/button.json