# Login Flow

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



<ComponentPreview base="ink" name="login-flow-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/login-flow
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource base="ink" name="login-flow" title="components/ui/login-flow.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

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

```tsx
<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 [#api-reference]

LoginFlow [#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 [#loginflowannouncement]

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

LoginFlow.Description [#loginflowdescription]

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

LoginFlow.Select [#loginflowselect]

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