Svelte sidebar blocks.

They are 100 React sidebar layouts built on the catalog Sidebar, in 16 groups: variants, icon rails, folds and trees, headers and sections, app content, state and theming, mail and chat, docs and knowledge, commerce and admin, data and ops, projects and planning, media and creative, switchers, rail controls, footers and accounts, rail state. Each sits in a fixed-height window beside a page, so you see the rail and its content together.

Floating Variant Sidebar and Right Side Sidebar change where the rail sits, Offcanvas Sidebar slides it fully out of view, and Compact Icon Rail Sidebar keeps a narrow static column of icons over captions. Custom Width Sidebar sets the width through the `--sidebar-width` variable.

Collapsible Groups Sidebar folds docs sections with Expand all and Collapse all, File Tree Sidebar opens a tree, and Workspace Switcher Sidebar swaps the rail's content from a menu at its top. Footer User Menu Sidebar keeps the signed-in person in the foot with an account menu.

The pages, groups and sample content are typed data in the file, and the page beside the rail is the chosen page in typed text. Nothing is fetched or saved, so you replace the menu data with your routes and render your pages in the main area.

The provider's `open` and `onOpenChange` can be controlled, as Controlled State Sidebar does: buttons, a switch and the Ctrl or Command B shortcut all go through them, and every call is logged. Pass your own state to the provider to keep the rail open or closed from anywhere in your app.

The catalog Sidebar's provider writes the desktop state to a `sidebar_state` cookie by default (`persist`), but the blocks switch that off with `persist={false}`. Remove that prop in your layout, then read the cookie on the server and pass it as `defaultOpen` so the next load starts as the user left it.

Each menu button takes `isActive`, and the blocks set it from the current page held in state. In your app derive it from the route, for example by comparing the current pathname with the item's href, and keep one source of truth for the active item.

The catalog Sidebar turns into a Sheet below the medium breakpoint, and the blocks note which behave differently there: Controlled State Sidebar drives that Sheet separately from `open`, Custom Width Sidebar's Sheet ignores the width preset, and Compact Icon Rail Sidebar stays beside the page. Use the same provider and menu and let the component switch.

Set `collapsible` on the Sidebar: `"icon"` folds to an icon strip with tooltips (what most blocks use), `"offcanvas"` slides the rail out completely, and `"none"` keeps it static, as Compact Icon Rail Sidebar does. Pair it with a trigger; the provider also binds Ctrl or Command B unless you turn that off.

This page lists 100 of the category's 100 sidebar blocks for Svelte. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The Svelte sidebar blocks are the React ones ported to Svelte, on Ark UI's Svelte primitives. They keep the layout, the copy and the theme tokens, and install with shadcn-svelte (/r/svelte/sidebar-accounting-app.json).

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens. Svelte needs svelte @ark-ui/svelte lucide-svelte installed once, and the CLI fetches the components a block imports.

Open a block and copy its command: `shadcn-svelte@latest add` with the block's registry URL, such as /r/svelte/sidebar-accounting-app.json for Accounting App Sidebar. Run the project setup once first, and the code is yours to edit.

The block's file and the components it imports, installed before it, each as its own registry item. Nothing else changes in your project.

Use the filters above the grid: 16 kinds of sidebar block, led by commerce and admin (18), docs and knowledge (9), projects and planning (8) and folds and trees (7), and sort by popular or name. A good first look: Accounting App Sidebar, Action Buttons Sidebar and Admin Panel Sidebar. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a sidebar block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the layouts, menus and content and state kinds.

Open its page and use the full-screen viewer (/view/sidebar/svelte/accounting-app) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each sidebar block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Ark UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the sidebar blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 sidebar blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a sidebar block, read it with get_block and install it on your Svelte stack.

Pass `category: "sidebar"` to search_blocks to search only the 100 sidebar blocks, or to list_blocks for the 16 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "sidebar", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.