# antuikit / Welcome

> Welcome, the greeting at the top of an empty chat. Adds nothing beyond `className` merging through `cn()`.

Docs: https://antuikit.com/docs/components/welcome

## Install

npx antuikit@latest init
npx antuikit@latest add welcome

## Import

import { Welcome } from "@/components/ui/welcome";

## Demos

- [Basic](https://ui.antuikit.com/embed/welcome/basic.md): Pass `icon`, `title` and `description` to greet the reader before the first message.
- [Borderless](https://ui.antuikit.com/embed/welcome/variant.md): Set `variant` to `borderless` to drop the filled background when the greeting sits on a card.
- [Extra](https://ui.antuikit.com/embed/welcome/extra.md): Pass `extra` to put actions beside the title, like a new chat button.
- [Background](https://ui.antuikit.com/embed/welcome/background.md): Pass `className` a gradient made from palette colors to give the greeting its own background in light and dark mode.
- [Empty chat](https://ui.antuikit.com/embed/welcome/empty-chat.md): An empty chat with a greeting, two starter prompts that fill the input, and the input below.
- [Writing onboarding](https://ui.antuikit.com/embed/welcome/writing-onboarding.md): An onboarding screen for a writing assistant: a greeting above three steps that set the tone, a writing sample and the topics.
- [Feature announcement](https://ui.antuikit.com/embed/welcome/feature-banner.md): A notes app with a dismissable banner announcing a new assistant feature above the list of notes, with a button to try it.
- [Support bot](https://ui.antuikit.com/embed/welcome/support-bot.md): A help center widget that greets the customer by name, offers common topics as buttons and links to the support team below.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/welcome`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Welcome` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.