# Minimal Welcome with Icon

> Clean, centered welcome screen with a branded icon, heading, and single call-to-action. Perfect for simple app introductions that prioritize clarity over complexity.

A shadcn/ui block from the [@beste-ui](https://ui.beste.co) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/beste-ui/onboarding3).

- Page, with a live preview: https://shadcn.exchange/r/beste-ui/onboarding3
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/beste-ui/onboarding3-light-fcca4f36865480a6.png
- Registry item: https://ui.beste.co/r/onboarding3.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.beste.co/r/onboarding3.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `clsx`, `lucide-react`, `tailwind-merge`
- Registry items: `button`

## Files

### `registry/onboarding3/onboarding3.tsx`

```tsx
"use client";

import { ArrowRight, Boxes } from "lucide-react";

import { Button } from "@/components/ui/button";
import Link from "next/link";
import { cn } from "@/lib/utils";

interface Onboarding3Props {
  icon?: React.ReactNode;
  heading?: string;
  description?: string;
  primaryButton?: {
    label: string;
    href: string;
  };
  className?: string;
}

export const onboarding3Demo: Onboarding3Props = {
  heading: "Welcome to Acme",
  description:
    "Your workspace is ready. Let's take a quick tour to help you get the most out of your experience.",
  primaryButton: {
    label: "Let's Go",
    href: "https://beste.co",
  },
};

export function Onboarding3({
  icon,
  heading,
  description,
  primaryButton,
  className,
}: Onboarding3Props) {
  return (
    <section className={cn("py-16 md:py-24 w-full", className)}>
      <div className="mx-auto max-w-md px-4 md:px-6">
        <div className="flex flex-col items-center text-center">
          {/* Icon */}
          <div className="mb-6 flex size-16 items-center justify-center rounded-2xl bg-primary/10">
            {icon ?? <Boxes className="size-8 text-primary" />}
          </div>

          {/* Heading */}
          {heading && <h1 className="mb-3 text-2xl font-bold md:text-3xl">{heading}</h1>}

          {/* Description */}
          {description && <p className="mb-8 text-muted-foreground">{description}</p>}

          {/* Button */}
          {primaryButton && (
            <Button size="lg" asChild>
              <Link href={primaryButton.href}>
                {primaryButton.label}
                <ArrowRight className="size-4" />
              </Link>
            </Button>
          )}
        </div>
      </div>
    </section>
  );
}
```