43 Pro components and page blocks

Get Pro
uibrik

Floating Sidebar

Pro

Preview

Customize

Width264px

Usage

import { FloatingSidebar } from "@/components/uibrik/floating-sidebar/floating-sidebar";

<FloatingSidebar />

Installation

Pro

Floating Sidebar is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/floating-sidebar

Props

FloatingSidebar
defaultCollapsed
Type boolean
false
Folded to the icon rail at first. When unset, it starts folded on phones and open on larger screens.
shortcut
Type boolean
true
Toggle with ⌘B / Ctrl+B.
resizable
Type boolean
true
Drag the edge to resize; double-click it to reset.
defaultWidth
Type number
264
Width at first.
groups
Type { label?; items: { label; icon?; href?; badge? }[] }[]
sample app navigation
The navigation. Same shape across all sidebars.
brand
Type { name; caption?; logo? }
–
Workspace shown at the top.
user
Type { name; email? }
–
Account shown at the bottom.
current / onNavigate
Type string / (label) => void
–
The current page, and a callback when one is chosen.
collapsed / onCollapsedChange
Type boolean / (collapsed) => void
–
Folded state, controlled.
className
Type string
–
Classes for the sidebar.
minWidth / maxWidth
Type number
208 / 360
Limits when resizing, in px.
onWidthChange
Type (width) => void
–
Called as it's resized, e.g. to save the width.