Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Left Drawer File Explorer for Svelte

A left Files drawer where Projects starts open and holds the Website and App folders and their files.

UI library: Ark UI

A left panel titled Files. Projects starts open and holds Website and App, and each of those folders opens to its files. The chevron turns as a folder opens.

Use it when files are a side task on a phone. A large tree with selection fits a Tree View better. In Svelte, Ark UI does not select a file.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Drawer anatomy: grabber, title, description, content, close

Usage

<Drawer swipeDirection="left"><DrawerTrigger>{#snippet asChild(props)}<Button {...props({ "aria-label": "Open files" })} size="icon-md" variant="outline"><MenuIcon aria-hidden="true" /></Button>{/snippet}</DrawerTrigger><DrawerContent showBar={false}><div class="flex flex-col gap-4 p-4"><DrawerTitle class="font-semibold text-lg">Files</DrawerTitle><Collapsible defaultOpen><CollapsibleTrigger>{#snippet asChild(props)}<Button {...props({ class: "group w-full justify-start" })} size="sm" variant="ghost"><ChevronRightIcon aria-hidden="true" class="size-3 transition-transform group-aria-expanded:rotate-90" /><FolderIcon aria-hidden="true" class="size-3" />Projects</Button>{/snippet}</CollapsibleTrigger><CollapsibleContent class="ms-4"><div class="flex flex-col gap-1">{#each FOLDERS as folder (folder.name)}<Collapsible><CollapsibleTrigger>{#snippet asChild(props)}<Button {...props({ class: "group w-full justify-start" })} size="sm" variant="ghost"><ChevronRightIcon aria-hidden="true" class="size-3 transition-transform group-aria-expanded:rotate-90" /><FolderIcon aria-hidden="true" class="size-3" />{folder.name}</Button>{/snippet}</CollapsibleTrigger><CollapsibleContent class="ms-4"><div class="flex flex-col gap-1">{#each folder.files as file (file)}<Button class="w-full justify-start" size="sm" variant="ghost"><FileIcon aria-hidden="true" class="size-3" />{file}</Button>{/each}</div></CollapsibleContent></Collapsible>{/each}</div></CollapsibleContent></Collapsible></div></DrawerContent></Drawer>

FAQ

How is the tree built?

From nested Collapsibles. Projects sets defaultOpen, and Website and App map from a static list of folders, each with its files inside CollapsibleContent.

How is each level indented?

Every CollapsibleContent has ms-4, so each level starts a step further in, on the reading side.

How does the chevron show a folder's state?

The trigger has aria-expanded while the folder is open, and the chevron's group-aria-expanded:rotate-90 turns it down.

Do the files open anything?

No, they're ghost buttons with a file icon and no handler. Open the file from each one, and close the drawer if it should get out of the way. Pass open to Drawer and read details.open in onOpenChange.

How is the files button labeled?

An outline icon button opens the drawer. Its aria-label, Open files, is the accessible name; the icon is aria-hidden. asChild on DrawerTrigger receives props: spread them onto the button.

Where is the drawer's title?

Files, above the tree, is the DrawerTitle. DrawerTitle names the dialog for assistive tech, so every drawer renders one; give it sr-only when the design has no visible heading.

API Reference

Drawer

Sets swipeDirection="left" and showBar={false}. The rest is on the Drawer page.

Button

Sets props, aria-label, Open, files, size="icon-md" and variant="outline". The rest is on the Button page.

Collapsible

Sets defaultOpen. The rest is on the Collapsible page.

All 22 drawer examples