A collection of beautifully designed, accessible, and customizable terminal UI components. Built on Ink and OpenTUI. Works with shadcn/ui.

How do I publish components with termcn?

Add or edit components under registry/bases/ink/ or registry/bases/opentui/, register them in registry.json, run pnpm registry:build (which refreshes public/r/), then deploy. Consumers install with npx shadcn@latest add against your published registry URL.

Is termcn open source?

Yes. The source is on GitHub and released under the MIT License.

File Picker

Interactive file browser and picker

Ink OpenTUI

Terminal

File picker requires Node.js filesystem access and may not render in the browser preview.

Installation


$ pnpm dlx shadcn@latest add @termcn/file-picker

Usage

import { FilePicker } from "@/components/ui/file-picker";

<FilePicker
  label="Select a config file"
  extensions={[".json", ".yaml", ".yml"]}
  onSubmit={(path) => console.log("Selected:", path)}
/>

API Reference

FilePicker

Prop	Type	Default
`value`	`string`	-
`onChange`	`(path: string) => void`	-
`onSubmit`	`(path: string) => void`	-
`label`	`string`	-
`startDir`	`string`	`process.cwd()`
`extensions`	`string[]`	-
`dirsOnly`	`boolean`	`false`
`autoFocus`	`boolean`	`false`
`id`	`string`	-
`width`	`number`	`50`
`maxVisible`	`number`	`8`

Date Picker Form

On This Page

Installation Usage API Reference FilePicker

Edit this page Follow @shadcnlabs Join community