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

How do I publish components with termcn?

Add components under registry/new-york/, list them in registry.json, run pnpm registry:build, then deploy. Users install with npx shadcn@latest add pointing at your published JSON URL.

Is termcn open source?

Yes. The project is intended to be forked or cloned; source is available on GitHub under an open license.

Overview

Themes

Layout

Typography

Input

Selection

Data

Feedback

Navigation

Overlays

Forms

Utility

Charts

Templates

Login Flow

Full-page onboarding/login screen with announcement banner, big ASCII title, description, and numbered select

Terminal

Installation


pnpm dlx shadcn@latest add https://termcn.dev/r/login-flow.json

Usage

import { LoginFlow } from "@/components/ui/login-flow";

<LoginFlow title="Acme CLI" padding={2}>
  <LoginFlow.Announcement icon="🎉">
    Version 3.0 is now available!
  </LoginFlow.Announcement>
  <LoginFlow.Description>
    Sign in to access your workspace.
  </LoginFlow.Description>
  <LoginFlow.Select
    label="Choose a login method:"
    options={["GitHub", "Google SSO", "Email & Password"]}
    onSelect={(index) => console.log("selected", index)}
  />
</LoginFlow>

API Reference

LoginFlow

Prop	Type	Default
`title`	`string`	`undefined`
`titleFont`	`"block" \| "simple" \| "shade" \| "slim"`	`"block"`
`titleColor`	`string`	`undefined`
`padding`	`number`	`2`
`onSelect`	`(index: number) => void`	`undefined`
`children`	`ReactNode`	`required`

LoginFlow.Announcement

Prop	Type	Default
`icon`	`string`	`"*"`
`iconColor`	`string`	`undefined`
`borderStyle`	`"single" \| "round" \| "double" \| "bold"`	`"single"`
`borderColor`	`string`	`undefined`
`children`	`ReactNode`	`required`

LoginFlow.Description

Prop	Type	Default
`bold`	`boolean`	`false`
`dim`	`boolean`	`false`
`color`	`string`	`undefined`
`children`	`ReactNode`	`required`

LoginFlow.Select

Prop	Type	Default
`label`	`string`	`undefined`
`labelBold`	`boolean`	`false`
`options`	`string[]`	`required`
`activeIndex`	`number`	`undefined`
`defaultIndex`	`number`	`0`
`cursor`	`string`	`"›"`
`cursorColor`	`string`	`"cyan"`
`activeColor`	`string`	`"cyan"`
`onSelect`	`(index: number) => void`	`required`
`keyboardNav`	`boolean`	`true`

Info Box Setup Flow

On This Page

Installation Usage API Reference LoginFlow LoginFlow.Announcement LoginFlow.Description LoginFlow.Select