Terminal
Installation
$ pnpm dlx shadcn@latest add @termcn/ink/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 |
Notes
Accessibility
termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.
- Keyboard: Arrow keys move inside the composite;
Home/Endselect the first or last enabled item;Enter/Spaceactivate, select, or toggle;Escapecancels or closes an owned surface;Tab/Shift+Tabmove between termcn/Ink focus targets. - Focus and composition: Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
- Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.