Skip to content

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

Free

Left Drawer File Explorer for React

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, Base 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
    render={
      <Button aria-label="Open files" size="icon-md" variant="outline" />
    }
  >
    <MenuIcon aria-hidden="true" />
  </DrawerTrigger>
  <DrawerContent>
    <div className="flex flex-col gap-4 p-4">
      <DrawerTitle className="font-semibold text-lg">Files</DrawerTitle>
      <Collapsible defaultOpen>
        <CollapsibleTrigger
          render={
            <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
        </CollapsibleTrigger>
        <CollapsibleContent className="ms-4">
          <div className="flex flex-col gap-1">
            {FOLDERS.map((folder) => (
{/* 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; onOpenChange receives the next boolean.

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. The Button goes in the render prop of DrawerTrigger.

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". 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. The rest is on the Collapsible page.

All 22 drawer examples