A floating off-canvas panel with row actions, linked counts and a status badge.
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: Issue details beside the record: assignees with owner and remove actions, linked work, an activity feed and an Open in board button
When to use
- The persistent navigation column of an app, which can narrow to an icon rail or slide off screen
- Documentation trees with collapsible sections and sub-pages, or project lists narrowed by a search field
- A right side inspector that shows the details of the record open beside it
When not to use
- A details panel laid over the page and closed by a click outside: use the Sheet component
- Page navigation for the whole app along the left edge: use the Sidebar Workspace Switcher example
- A complete multi page product layout with header, nav and content area already built: use the App Shell blocks
- Account settings pages that switch between personal details, billing and team panels: use the Profile blocks
- A shop catalog facet panel with price range, brand counts, color swatches and sizes: use the Filter Sidebar blocks
Agent notes
- Render
SidebarInsetbeforeSidebar:sideright only pins the panel, and the child order decides which edge reserves its column - Replace
ASSIGNEES,LINKEDandACTIVITY; the In reviewBadge, the ENG-2481 key and the issue text are fixed in the markup - Make owner, Notify, Remove, the add assignee
SidebarGroupActionand Open in board run nothing yet; wire each to your API - Menu links are anchors passed through
renderon the base twin andasChildon radix; point each #hrefat your route SidebarProviderlistens for Cmd or Ctrl+B on the whole window, so pressing it in a text editor on the page toggles itsopenstate too
https://web.dev.reui.io/components/sidebar/c-sidebar-4.mdget_example("c-sidebar-4")npx shadcn@latest add @reui/c-sidebar-4Shadcn Components in Sidebar Inspector Panel
About Shadcn Sidebar Inspector Panel
Right-hand inspector panel. Built by composing Avatar, Badge, Button, Dropdown Menu, Sidebar. A free, open source shadcn sidebar example you can install with npx shadcn@latest add @reui/c-sidebar-4 and edit as your own code.
What You Can Build With Shadcn Sidebar Inspector Panel
- Composes Avatar, Badge, Button, Dropdown Menu, Sidebar, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-sidebar-4
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Sidebar Examples
- Workspace Switcher Application shell with a workspace switcher
- Icon Rail Icon rail that collapses
- Docs Navigation Documentation nav with sub-menus
- Filter & Loading Filtering, loading and empty states
Related Shadcn Component Categories
Open-source shadcn signature pad components for e-signature forms, agreements, and proof of delivery.
Open-source shadcn skeleton components for loading placeholders, perceived performance, and content previews.
Open-source shadcn slider components for range filters, pricing controls, and media settings.
Open-source shadcn Sonner toast components for success feedback, error states, and non-blocking updates.
Open-source shadcn sortable components for drag-and-drop lists, priority ranking, and reordering rows.
Open-source shadcn spinner components for loading indicators, async actions, and button states.
Frequently Asked Questions
When should I use Shadcn Sidebar Inspector Panel?
Use it for issue details beside the record: assignees with owner and remove actions, linked work, an activity feed and an Open in board button.
Shadcn Sidebar as a whole fits:
- The persistent navigation column of an app, which can narrow to an icon rail or slide off screen
- Documentation trees with collapsible sections and sub-pages, or project lists narrowed by a search field
- A right side inspector that shows the details of the record open beside it
For a details panel laid over the page and closed by a click outside, use the Sheet component. For page navigation for the whole app along the left edge, use the Sidebar Workspace Switcher example. For a complete multi page product layout with header, nav and content area already built, use the App Shell blocks. For account settings pages that switch between personal details, billing and team panels, use the Profile blocks. For a shop catalog facet panel with price range, brand counts, color swatches and sizes, use the Filter Sidebar blocks.
How do I install Shadcn Sidebar Inspector Panel?
Is Shadcn Sidebar Inspector Panel free to use?
Which components does Shadcn Sidebar Inspector Panel use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.