# Welcome Screen

Two-panel welcome dashboard with titled border, logo, greeting, and sections



<ComponentPreview base="opentui" name="welcome-screen-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/opentui-welcome-screen
    ```
  </TabsContent>

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

      <ComponentSource base="opentui" name="welcome-screen" title="components/ui/welcome-screen.tsx" />

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

Usage [#usage]

```tsx
import { WelcomeScreen } from "@/components/ui/welcome-screen";
```

```tsx
<WelcomeScreen appName="DevTool" version="v2.1.0" borderStyle="round">
  <WelcomeScreen.Left>
    <WelcomeScreen.Logo>{"  ╔══╗\n  ║DT║\n  ╚══╝"}</WelcomeScreen.Logo>
    <WelcomeScreen.Greeting>Welcome back, developer!</WelcomeScreen.Greeting>
    <WelcomeScreen.Meta items={["Node 20.x", "TypeScript 5.4", "macOS"]} dim />
  </WelcomeScreen.Left>
  <WelcomeScreen.Right>
    <WelcomeScreen.Section title="Quick Start">
      Run `devtool init` to scaffold a new project.
    </WelcomeScreen.Section>
    <WelcomeScreen.Section title="Recent Projects">
      my-app, api-server, dashboard
    </WelcomeScreen.Section>
  </WelcomeScreen.Right>
</WelcomeScreen>
```

API Reference [#api-reference]

WelcomeScreen [#welcomescreen]

| Prop           | Type                                        | Default    |
| -------------- | ------------------------------------------- | ---------- |
| `appName`      | `string`                                    | `required` |
| `appNameColor` | `string`                                    | -          |
| `version`      | `string`                                    | -          |
| `borderColor`  | `string`                                    | -          |
| `borderStyle`  | `"single" \| "round" \| "double" \| "bold"` | `"single"` |
| `leftWidth`    | `number`                                    | `26`       |
| `children`     | `ReactNode`                                 | `required` |

WelcomeScreen.Left [#welcomescreenleft]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `children` | `ReactNode` | `required` |

WelcomeScreen.Right [#welcomescreenright]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `children` | `ReactNode` | `required` |

WelcomeScreen.Greeting [#welcomescreengreeting]

| Prop       | Type                 | Default    |
| ---------- | -------------------- | ---------- |
| `children` | `ReactNode`          | `required` |
| `bold`     | `boolean`            | `true`     |
| `align`    | `"left" \| "center"` | `"left"`   |
| `color`    | `string`             | -          |

WelcomeScreen.Logo [#welcomescreenlogo]

| Prop       | Type                 | Default    |
| ---------- | -------------------- | ---------- |
| `children` | `ReactNode`          | `required` |
| `align`    | `"left" \| "center"` | `"left"`   |

WelcomeScreen.Meta [#welcomescreenmeta]

| Prop        | Type                 | Default    |
| ----------- | -------------------- | ---------- |
| `items`     | `string[]`           | `required` |
| `separator` | `string`             | `" · "`    |
| `align`     | `"left" \| "center"` | `"center"` |
| `dim`       | `boolean`            | `false`    |
| `color`     | `string`             | -          |
| `stack`     | `boolean`            | `false`    |

WelcomeScreen.Section [#welcomescreensection]

| Prop         | Type        | Default    |
| ------------ | ----------- | ---------- |
| `title`      | `string`    | `required` |
| `titleColor` | `string`    | -          |
| `titleBold`  | `boolean`   | `true`     |
| `children`   | `ReactNode` | `required` |