Welcome Card

An example block showing how composed, multi-component UI is distributed through the registry.

Welcome to Uqudo

A shared example block distributed through the Uqudo component registry. Install it once and reuse it across every project.

A block is a finished piece of UI rather than a primitive. It composes registry components — here a card shell around two buttons — and is meant to be edited after you install it. Treat the copy and layout as a starting point.

Installation

npx shadcn@latest add @uqudo/welcome-card

Installing it also installs Button, which it depends on.

Usage

import { WelcomeCard } from "@/components/uqudo/welcome-card"

<WelcomeCard />

It is a server component and takes no props, so it can be dropped directly into a page:

app/page.tsx

export default function Page() {
  return (
    <main className="flex min-h-svh items-center justify-center p-6">
      <WelcomeCard />
    </main>
  )
}

Composition

WelcomeCard
├── heading + description
└── actions
    ├── Button (default)
    └── Button (outline)

API Reference

WelcomeCard

WelcomeCard deliberately takes no props — a block is customised by editing its source, not by threading configuration through it. Change the copy, swap the buttons, or split it into props once your project needs more than one variation.

Prop

Type

Source

components/uqudo/welcome-card.tsx

import { ArrowRight } from "lucide-react"

import { Button } from "@/components/uqudo/ui/button"

export function WelcomeCard() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4 rounded-2xl border border-border bg-card p-6 text-card-foreground shadow-sm">
      <div className="flex flex-col gap-1.5">
        <h2 className="text-lg font-semibold">Welcome to Uqudo</h2>
        <p className="text-sm text-muted-foreground">
          A shared example block distributed through the Uqudo component
          registry. Install it once and reuse it across every project.
        </p>
      </div>
      <div className="flex items-center gap-2">
        <Button>
          Get started
          <ArrowRight />
        </Button>
        <Button variant="outline">Learn more</Button>
      </div>
    </div>
  )
}