shadcn.io is not affiliated with official shadcn/ui
Inset Variant Sidebar Block for Vue
An issue tracker in a fixed-height window with an inset sidebar: the rail's tint fills the window and the page is a raised, rounded panel of issues filtered by view and label.
Installation
Overview
Give an app the embedded look of Linear or Notion with this inset variant sidebar for Vue with Ark UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar set to variant="inset": the rail's tint fills the window edge to edge and the page sits inside it as a raised panel with a margin, a radius and a soft shadow. The rail lists four views (all issues, created by me, assigned to me, recently viewed) and three labels, each with a count worked out from ten typed issues; choose one and the panel shows just those issues, each with its number, a stage written out with a ring, dot or eye beside it, a label Badge, its date and an initials Avatar. A label nobody has used shows an Empty state. Fold the rail to icons and the panel grows and gets its margin back on that side; below the medium breakpoint the rail is a sheet and the panel fills the page. It's built from Sidebar, Badge, Avatar, Empty, Button and Guides, with a CSS entrance only. For trackers, boards, notes apps and any tool whose page should look set into its frame.
FAQ
What does the inset variant change, and why is there no SidebarInset?
With variant="inset" the sidebar draws no edge of its own: its tint fills the window and the page is meant to be a panel set into it. The catalog's SidebarInset is a main element that adds the margin, radius and shadow through the rail's state. This block uses a plain div that wears the same classes (md:peer-data-[variant=inset]:m-2, the radius, the shadow and the margin that returns when the rail folds), because the page it sits on already has a main. In a full-page app, use SidebarInset and drop the copied classes.
Where do the counts come from?
From ISSUES, the ten typed issues at the top of the file. A view keeps the issues its rule matches: all of them, the ones created by the signed-in person, the ones assigned to them, or the ones they opened recently. A label keeps the issues tagged with it. The badges, the count above the list and the status line all call the same countIn helper, so nothing is typed twice, and a label with no issues shows no badge and an empty state in the same space. In your app, take the counts from your server and keep the same rule: one source for the rows and the badges.
What stays in the page, and how do I connect it?
Everything. Choosing a view filters the typed issues in the block's own state, and nothing is created, assigned or saved. Replace ISSUES and countIn with your API. The views are links to # whose handler shows the view instead of navigating. Point them at your routes and mark the current one with isActive.
How does it work on a phone?
Below the medium breakpoint the sidebar becomes a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout, and the inset styling steps aside: the panel fills the window, because the margins and the shadow only apply from the medium breakpoint. Escape or choosing a view closes the sheet and focus goes back to the menu button. The window keeps its height, and the status line at its foot says which view is open and how many issues it holds.
What happens when the sidebar collapses?
The menu button or the rail along the sidebar's edge folds it to its icons. Each icon keeps its link's full name for screen readers, and a tooltip shows the view and its count on hover or focus. The panel's margin transition follows the rail, so the tint around it stays even. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on. For a full-page app, remove both to remember the state and get the shortcut, and give the provider your page's height instead of the window's.
Is it accessible?
The sidebar is a navigation landmark named after the product, each group of links is named by its label, and the open view is marked as the current page. Each link's name says its count ("Assigned to me, 3 issues"). An issue's stage is a word with a shape beside it, never a color, and the assignee is read out as "Assigned to Maren Tolliver" or "Unassigned". The list scrolls inside its own region, which takes keyboard focus. One polite status line reports each change, and the titles and counts are isolated so they read right in a right-to-left layout.