Skip to content

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

Free

Left Drawer File Explorer for Ark UI

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

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 React, Ark UI does not select a file.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

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

Usage

<Drawer swipeDirection="left">
  <DrawerTrigger asChild>
    <Button aria-label="Open files" size="icon-md" variant="outline">
      <MenuIcon aria-hidden="true" />
    </Button>
  </DrawerTrigger>
  <DrawerContent showBar={false}>
    <div className="flex flex-col gap-4 p-4">
      <DrawerTitle className="font-semibold text-lg">Files</DrawerTitle>
      <Collapsible defaultOpen>
        <CollapsibleTrigger asChild>
          <Button
            className="group w-full justify-start"
            size="sm"
            variant="ghost"
          >
            <ChevronRightIcon
              aria-hidden="true"
              className="size-3 transition-transform group-aria-expanded:rotate-90"
            />
            <FolderIcon aria-hidden="true" className="size-3" />
            Projects
          </Button>
        </CollapsibleTrigger>
        <CollapsibleContent className="ms-4">
          <div className="flex flex-col gap-1">
            {FOLDERS.map((folder) => (
              <Collapsible key={folder.name}>
                <CollapsibleTrigger asChild>
                  <Button
                    className="group w-full justify-start"
{/* The rest of the file is under Installation. */}

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. DrawerTrigger takes asChild and merges onto the one Button inside it.

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", asChild and showBar={false}. The rest is on the Drawer page.

Button

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

Collapsible

Sets defaultOpen and asChild. The rest is on the Collapsible page.

All 22 drawer examples