Chat Components

Folder Picker

Searchable recent-folder menu with an app-provided action for opening the operating system's native folder chooser.

Open in

Installation

npx shadcn@latest add miskibin/chat-components/folder-picker

Also installs popover, command.

Usage

"use client"

import { useState } from "react"
import { FolderPicker } from "@/components/ui/folder-picker"

const RECENTS = ["D:\\agent-ui", "D:\\chat-components"]

export function Picker() {
  const [folder, setFolder] = useState(RECENTS[0])

  return (
    <FolderPicker
      value={folder}
      recents={RECENTS}
      onChange={setFolder}
      onOpenFolder={() => openNativeFolderDialog()}
    />
  )
}

Examples

Start with no history

An empty recents array leaves one clear way forward: the native Open Folder action. Once the host remembers that selection, pass the updated list back on the next open.

Notes

API reference

FolderPicker

recents*string[]
Absolute paths in most-recently-used order. These are the only folders shown in the default list.
valuestring
The selected absolute path.
onChange(path: string) => void
Fired when a recent folder is selected; the menu closes.
onOpenFolder() => void | Promise<void>
Connect this to the host's native folder dialog. The action is disabled when omitted.
onOpenChange(open: boolean) => void
Notifies the host when the menu opens or closes, useful for refreshing the MRU list.
detailReactNode
Quiet trigger suffix for related context such as a Git branch.
variant"chip" | "inline" = "chip"
The inline variant adds a subtle border for a standalone composer control.
side"top" | "bottom" = "bottom"
Which way the recent-folder menu opens.
classNamesFolderPickerClassNames
Per-part overrides for the content, search, list, group, item, path, and action.
disabledboolean = false
Disables the trigger.

Data slots

Every part below is addressable from a parent, so you can restyle internals without forking the component.

folder-picker-triggerfolder-picker-labelfolder-picker-detailfolder-picker-contentfolder-picker-searchfolder-picker-listfolder-picker-groupfolder-picker-itemfolder-picker-pathfolder-picker-checkfolder-picker-action