Shadcn UI Blocks

Trending Sell blocks Snippets Changelog

Sign in Get all-access

Ai Prompt

Discover fully responsive Ai Prompt for your Shadcn UI projects, each meticulously designed for seamless integration and customization.

Marketing

About Sections
18
Announcement Banners
6
Blog Sections
17
Careers
12
Changelogs
11
Contact Sections
3
CTA Sections
18
FAQ Sections
13
Feature Sections
17
Footers
5
Gallery
7
Hero Forms
24
Hero Sections
31
Icon Sections
20
Masonry Sections
1
Pricing Sections
14
Stats
20
Subscribe Sections
3
Team Sections
9
Testimonials
9

Application

AI Prompt
1
Application Stats
6
Form Layouts
3
Page Headings
6
Reset Password
4
User Profiles
10

Components

Accordions
16
Alerts
20
Badges
12
Breadcrumbs
12
Buttons
17
Cards
22
Collapsible
6
Pagination
11
Tabs
8

Ecommerce

Category Filters
3
Category Previews
7
Customer Reviews
6
Product Features
19
Product Lists
9
Product Overviews
6
Promo Sections
11
Shopping Carts
6

Portfolio

About and Skills
5
Awards and Recognition
5
Blog Writing and Previews
5
Case Studies
5
Contact Sections
5
Core Services Overview
5
CTA Banner
5
Email Signup and Newsletter
5
Event Speaking and Workshops
5
Featured Work Highlights
5
Hero Showcases
5
Mission and Values
5
Process and Approach
5
Project Displays
5
Quote and Feedback
5
Resource Download Sections
5
Resume and Downloads
5
Social Media Embeds
5
Why Work With Me
5
Work Experience Cards
5

© 2025 Shadcn UI Blocks, Inc. All rights reserved.

Built with ❤️

Welcome Page

Open in New Tab

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

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