shadcn.io is not affiliated with official shadcn/ui
Design Tool Sidebar Block for Svelte
A vector design tool in a fixed-height window: a tool list and six layers with eye and lock buttons, a drawn artboard that outlines the chosen layer, and its properties beside it.
Installation
Overview
Give a design tool its layers panel with this design tool sidebar for Svelte with Ark UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar: the product's mark, five tools (Select, Frame, Text, Shape and Pen) and the artboard's six layers. Each layer row is three controls: its name chooses the layer, and an eye button and a lock button at its end are pressed when the layer is hidden or locked, each named for the layer ("Hide Hero image", "Lock Hero image"). The page is the artboard drawn in greyscale from six named shapes, with the chosen layer outlined and given corner handles, or outlined with dashes and no handles when it is locked, beside a list of that layer's kind, size, position, visibility and lock. Hide a layer and it leaves the drawing while the count of visible layers drops. It is built from Sidebar, Avatar and Guides, with a CSS entrance only. Folded to icons the rail keeps the tool and layer icons with tooltips; below the medium breakpoint it is a sheet. For design tools, diagram editors, slide editors and any app with a stack of objects.
FAQ
What do the eye and the lock do?
Both are real state in the block. The eye adds the layer to a list of hidden layers: its shape leaves the drawing, its name is struck through, its icon turns to a crossed eye and the line above the artboard counts the layers still visible. The lock adds it to a list of locked layers: its outline turns dashed and loses its corner handles, which is how a layer you cannot move looks in a design tool, and its row shows a closed padlock. Both buttons are aria-pressed with a fixed name, so a screen reader hears "Hide Hero image, pressed" rather than a name that changes under it. Pressing either also chooses that layer.
Do the tools draw anything?
No. Choosing a tool marks it pressed in the rail and names it in the top bar and the status line ("Pen tool in hand. Nothing is drawn in this demo."), because a drawing surface is a product of its own. The six shapes are typed in LAYERS with their position and size, and the artboard is built from them. To make a real editor, keep the rail and replace the drawing with your canvas, and make the tool state decide what a pointer does there.
What stays in the page, and how do I connect it?
Everything: the layers, the hidden and locked lists and the chosen layer live in the block's own state, and reloading starts over. Replace LAYERS with your document and the three handlers (chooseLayer, flipEye and flipLock) with calls that update it. The layer and tool buttons are plain pressed buttons rather than links, so there are no routes to point anywhere. 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.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Escape closes it and focus goes back to the menu button. The sheet holds the tools and the layers with their buttons, and the page is the artboard and the properties, so the artboard's caption and the status line carry the result: which layer is chosen and how many are visible.
What happens when the sidebar collapses?
The menu button or the rail along the edge folds it to the five tool icons and the six layer icons, each with a tooltip. The eye and lock buttons are hidden while folded, since an icon rail has room for one control per row; unfold it to use them. The layers keep their state either way.
Is it accessible?
The sidebar is a navigation landmark named after the product, with the tools and the layers as two named lists. The tool and layer names are pressed buttons, the eye and lock buttons carry the layer's name, and the artboard is an image with a text description that says how many layers are visible and which is chosen, followed by a caption and a properties list in real text. One polite status line reports each change, and the names, counts and sizes are isolated so they read right in a right-to-left layout.