HomeTemplate
StableThe first screen of a new conversation: one greeting and one tray, centered.
Also known as home page layout, landing layout
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Greeting, tray and AI notice
New chat
Needs you
AI can make mistakes. Check important information.
<div className="h-105 overflow-hidden rounded-card border border-line">
<AppShell>
<HomeTemplate heading={<HeroHeading text="Where should we start?" type={false} />} footnote={<AIDisclosure />}>
<Tray label="Needs you" footer={<Composer onSend={() => {}} />}>
<TrayRow attention title="Quarterly report" detail="Approval pending" trailing="Open →" />
</Tray>
</HomeTemplate>
</AppShell>
</div>A greeting, a tray with one row and a message box, and the AI notice below.
When to use it
The screen before a conversation starts. One greeting and one block of content sit in a narrow centered column, so nothing competes with getting started.
Made of: Heading · Tray · Note
Use it for
- A new chat, before the first message.
- A landing screen whose greeting is answered by a Tray with a message box.
- Showing the AI notice right under the starting point.
Not for
- A conversation that has already started: use ThreadTemplate.
- A screen with several sections or dashboards.
Do and avoid
Needs you
Needs you
Do
- Use it only for a new conversation, before the first message.
- Keep one heading and one block of content.
- Put the Composer inside the Tray so they share one width.
- Place it inside AppShell, which gives it the height to center in.
Avoid
- Do not add more sections below the tray. Anything extra competes with the greeting.
- Do not use it once a conversation has started. Switch to ThreadTemplate.
- Do not make it wider. The narrow column keeps lines easy to read.
On a phone
- The content sits at the top on a phone and is centred vertically from the md breakpoint up.
- Side padding is 1rem and the content column is capped at 48rem, so it fills the screen on a phone.
- The area scrolls on its own when the content is taller than the screen.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| headingrequired | ReactNode | none | The greeting. Use HeroHeading. |
| childrenrequired | ReactNode | none | The block that answers the headline, usually a Tray with its Composer as footer. |
| footnote | ReactNode | none | A quiet line under the content, for example AIDisclosure. |
"Show code under the preview gives the code for the example on the stage."
Tokens
Change one of these and every part that uses it follows.
max-w-readspace-y-8px-4 py-10
Built in
- The title bar holds the page's top heading, "New chat" unless you change it.
- The content scrolls when it is taller than the screen.
- Reading order matches what people see: title, greeting, content, note.
What you need to do
- Use HeroHeading for the greeting, so screen readers can find it as a heading.
- Set header to name the screen if "New chat" is not right.
- Decide which control gets focus first, usually the message box.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide