Utility
AI
Welcome Screen
Two-panel welcome dashboard with titled border, logo, greeting, and sections
Terminal
Installation
pnpm dlx shadcn@latest add https://termcn.dev/r/welcome-screen.json
Usage
import { WelcomeScreen } from "@/components/ui/welcome-screen";<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
WelcomeScreen
| Prop | Type | Default |
|---|---|---|
appName | string | required |
appNameColor | string | undefined |
version | string | undefined |
borderColor | string | undefined |
borderStyle | "single" | "round" | "double" | "bold" | "single" |
leftWidth | number | 26 |
children | ReactNode | required |
WelcomeScreen.Left
| Prop | Type | Default |
|---|---|---|
children | ReactNode | required |
WelcomeScreen.Right
| Prop | Type | Default |
|---|---|---|
children | ReactNode | required |
WelcomeScreen.Greeting
| Prop | Type | Default |
|---|---|---|
children | ReactNode | required |
bold | boolean | true |
align | "left" | "center" | "left" |
color | string | undefined |
WelcomeScreen.Logo
| Prop | Type | Default |
|---|---|---|
children | ReactNode | required |
align | "left" | "center" | "left" |
WelcomeScreen.Meta
| Prop | Type | Default |
|---|---|---|
items | string[] | required |
separator | string | " · " |
align | "left" | "center" | "center" |
dim | boolean | false |
color | string | undefined |
stack | boolean | false |
WelcomeScreen.Section
| Prop | Type | Default |
|---|---|---|
title | string | required |
titleColor | string | undefined |
titleBold | boolean | true |
children | ReactNode | required |