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.

Form

Form container with validation, Ctrl+S submit, and dirty tracking

Ink OpenTUI

Terminal

Installation


$ pnpm dlx shadcn@latest add @termcn/form

Usage

import { Form } from "@/components/ui/form";

<Form
  initialValues={{ name: "", email: "" }}
  fields={[
    { name: "name", validate: (v) => (v ? null : "Name is required") },
    { name: "email", validate: (v) => (v ? null : "Email is required") },
  ]}
  onSubmit={(values) => console.log("Submitted:", values)}
>
  <Text>Name and email form (Ctrl+S to submit)</Text>
</Form>

API Reference

Form

Prop	Type	Default
`onSubmit`	`(values: Record<string, unknown>) => void`	`required`
`initialValues`	`Record<string, unknown>`	`{}`
`fields`	`FormField[]`	`[]`
`children`	`ReactNode`	`required`

File Picker Form Field

On This Page

Installation Usage API Reference Form

Edit this page Follow @shadcnlabs Join community