fma-ui

App Sidebar

An app-shell sidebar block, collapsible to icons: a team switcher (or a static logo), one navigation section per data.nav entry and a user menu. Driven by an AppSidebarData object, so teams, sections and items are data. Items with sub-items expand inline (variant: "collapse") or open a menu ("dropdown", and always while collapsed to icons). Links are react-aria Links: wrap the app in RouterProvider for client-side routing. onTeamChange, onAddTeam and onUserAction handle the menus. Render inside a SidebarProvider.

originalRegistry JSON

Installation

  1. 1

    Register the @fma-ui namespace in components.json (once)

    components.json
    {
  "registries": {
    "@fma-ui": "https://ui.fmartinsandre.dev.br/r/{name}.json"
  }
}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ui/app-sidebar

    Files land in components/fma-ui/app-sidebar/app-sidebar.tsx and 4 more; npm and registry dependencies are installed along with them.

Dependencies

npm
lucide-react@^1.52.0