Welcome Page

A welcome screen with a centered prompt field, suggested actions, and a short intro. Greets users and invites the first message in an AI assistant.

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { GalleryVerticalEnd, Mic, UploadCloud } from 'lucide-react';

export default function WelcomePage() {
  return (
    <>
      {/* Content */}
      <div className="flex min-h-screen flex-col pb-6">
        <div className="flex flex-grow flex-col justify-center py-24 lg:py-32">
          <div className="mx-auto mt-0 w-full max-w-4xl px-4 text-center sm:px-6 lg:px-8">
            <div className="mb-4 flex items-center justify-center">
              {/* Logo */}
              <a
                href="#"
                className="flex items-center gap-2 self-center font-medium"
              >
                <div className="bg-primary text-primary-foreground flex h-6 w-6 items-center justify-center rounded-md">
                  <GalleryVerticalEnd className="size-4" />
                </div>
                Acme Inc.
              </a>
              {/* End Logo */}
            </div>
            <h1 className="text-primary text-3xl font-bold sm:text-4xl">
              Welcome to Your Application
            </h1>
            <p className="text-muted-foreground mt-3">
              Your AI-powered copilot for the web
            </p>
          </div>
          {/* Search */}
          <div className="mx-auto mt-10 w-full max-w-2xl px-4 sm:px-6 lg:px-8">
            <div className="relative">
              <Input
                type="text"
                className="block w-full rounded-full p-4"
                placeholder="Ask me anything..."
              />
              <div className="absolute top-1/2 right-2 -translate-y-1/2">
                <Button size="sm" variant="ghost" className="rounded-full">
                  <UploadCloud className="h-6 w-6 shrink-0" />
                </Button>
                <Button size="sm" variant="ghost" className="rounded-full">
                  <Mic className="h-6 w-6 shrink-0" />
                </Button>
              </div>
            </div>
          </div>
          {/* End Search */}
        </div>
        <footer className="mx-auto mt-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8">
          <p className="text-muted-foreground text-xs">© 2025 Acme Inc.</p>
        </footer>
      </div>
      {/* End Content */}
    </>
  );
}

About this block

Welcome Page is a centered greeting screen for an AI assistant. A small branded logo lockup sits at the top of the vertical stack, followed by a large bold heading and a one-line subheading that names the product's purpose. Below that, a pill-shaped input field spans a constrained column with an upload icon button and a microphone icon button pinned to the right end. A minimal copyright footer anchors the bottom of the viewport.

All text in the heading and subheading is independent copy you can swap for your own product name and tagline. The logo, the two icon buttons, and the footer line can each be removed without affecting the rest of the layout.

When to use

Use this block as the default empty state that greets a user before they have started any conversation. It suits an AI analytics assistant where the first interaction sets the tone: the clean centered layout focuses attention on the prompt field, and the upload and microphone affordances signal that the assistant accepts more than typed text. Compared to a full chat thread view, this screen communicates that nothing has happened yet and invites the first message rather than showing a history.

A natural flow around it on an Application page:

Before

A Login block so authenticated users land here immediately after signing in
A Page Headings block if you need a persistent navigation bar above the welcome area

After

Application Stats blocks to surface key metrics once the user has interacted and data is available

What you can display

The prompt field is the focal point, so the content you surround it with should orient the user quickly. A few ways to use this frame:

A product-specific greeting. Replace the heading and subheading with your analytics assistant's name and a one-line description of what it can answer, so users know exactly what to ask.
Contextual quick-start prompts. Add a row of suggestion chips below the input to show example queries drawn from common analytics questions, reducing the blank-prompt problem for new users.
Onboarding entry point. Pair the screen with an introductory modal or tooltip the first time a user sees it, then show this plain version on every subsequent visit.

Tip: keep the heading to one short line and the subheading to one clause so the prompt field stays the visual center of the screen.

About this block

When to use

A natural flow around it on an Application page:

Before

A Login block so authenticated users land here immediately after signing in
A Page Headings block if you need a persistent navigation bar above the welcome area

After

Application Stats blocks to surface key metrics once the user has interacted and data is available

What you can display

The prompt field is the focal point, so the content you surround it with should orient the user quickly. A few ways to use this frame:

A product-specific greeting. Replace the heading and subheading with your analytics assistant's name and a one-line description of what it can answer, so users know exactly what to ask.
Contextual quick-start prompts. Add a row of suggestion chips below the input to show example queries drawn from common analytics questions, reducing the blank-prompt problem for new users.
Onboarding entry point. Pair the screen with an introductory modal or tooltip the first time a user sees it, then show this plain version on every subsequent visit.

Tip: keep the heading to one short line and the subheading to one clause so the prompt field stays the visual center of the screen.

Welcome Page

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display