Fabrials UI

Loading state

Installation

Import the control from @fabrials/ui, after setting the app up.

TypeScript

import { SidebarProvider, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuBadge } from "@fabrials/ui";

Or install it under shadcn's name, so code that imports @/components/ui/sidebar gets this control. See shims.
```
npx shadcn@latest add @fabrials/sidebar
```

API reference

Prop / export	Type	Description
`isActive`	`boolean`	Marks the current destination (aria-current page, a fill and a 2 px Stormlight bar).
`SidebarMenuButton size`	`default \| sm \| lg \| touch`	touch is a navigation row: a 44 px target around a 40 px band, the focus ring inside the band, muted icons. Nested rows take depth (0 to 4).
`SidebarMenuButton render`	`ReactElement`	Pass the host's link: render={<a href />} or a router Link.
`SidebarMenuBadge`	`span`	Inside the button it is a count in the row and part of the link's name (a screen reader hears Inbox 12); beside it, it floats over the end of the button.
`SidebarProvider keyboardShortcut`	`string \| false`	The key that toggles the sidebar with Ctrl or Command (default b). It is ignored while a person types in a field or an editor, where Ctrl+B is Bold. false turns it off.
`SidebarProvider persist`	`boolean`	false writes no sidebar_state cookie, for a host that keeps the state.
`Sidebar labels / SidebarTrigger label / SidebarRail label`	`string`	The names screen readers hear (English by default): translate them.

Behavior

Menu rows work without a SidebarProvider: a list of navigation links renders expanded with no shell around it. Below 768px the full sidebar shell becomes a sheet. The host owns routing.

Accessibility

Keyboard and contrast

Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.