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 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.

Login Flow

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

Terminal

No opentui live preview is registered for this example yet.

Installation


$ pnpm dlx shadcn@latest add @termcn/login-flow

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`	-
`titleFont`	`"block" \| "simple" \| "shade" \| "slim"`	`"block"`
`titleColor`	`string`	-
`padding`	`number`	`2`
`onSelect`	`(index: number) => void`	-
`children`	`ReactNode`	`required`

LoginFlow.Announcement

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

LoginFlow.Description

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

LoginFlow.Select

Prop	Type	Default
`label`	`string`	-
`labelBold`	`boolean`	`false`
`options`	`string[]`	`required`
`activeIndex`	`number`	-
`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

Edit this page Follow @shadcnlabs Join community