StarterGallery
StableA first screen that says what the assistant can do, and offers ideas to start with.
Also known as prompt gallery, templates, examples gallery
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Ideas and templates
What would you like to make?
I can write, shorten and reword text you give me. I cannot open links or see your files.
Start with
Templates
<StarterGallery
statement="I can write, shorten and reword text you give me. I cannot open links or see your files."
intents={[{ id: "draft", label: "Draft an email" }, { id: "sum", label: "Summarize a document" }, { id: "plan", label: "Plan my week" }]}
onIntent={() => {}}
templates={[
{ id: "a", title: "Weekly update", description: "Share progress with your team.", category: "Writing" },
{ id: "b", title: "Meeting notes", description: "Turn rough notes into clear actions.", category: "Work" },
{ id: "c", title: "Product description", description: "Describe an item in a few lines.", category: "Marketing" },
]}
onTemplate={() => {}}
/>A sentence on what it can do, three ideas and three templates with categories.
When to use it
The first screen, before anything exists. It says plainly what the assistant can and cannot do, then offers ideas and templates so people do not face an empty box.
Made of: Heading · What it can and cannot do · Starting ideas · Templates heading with a Shuffle spot · Template cards
Use it for
- A first visit, or any time nothing has been made yet.
- Offering three to six ideas next to the box where people type.
- A set of templates people can start from.
Not for
- Ideas shown under a reply, partway through a chat: use SuggestionChips.
- A list or search that has nothing to show: use EmptyState.
Do and avoid
What shall we do?
I can plan trips and check invoices. I cannot book or pay.
Start with
What shall we do?
The smartest assistant ever made, now better than all the rest.
Start with
Do
- Say what the assistant cannot do as well as what it can.
- Offer three to six starting ideas next to the box where people type.
- Write template notes that say what the person gets.
- Show it on the first screen and when nothing exists yet, not everywhere.
Avoid
- Do not list more than six ideas. Move the rest into templates.
- Do not use the opening sentence for advertising.
- Do not use amber on cards. Nothing here needs action.
- Do not hide the box where people type behind the gallery.
On a phone
- The templates show in one column below 640px, then two columns, then three from 1024px.
- Each template card is a full-width button, and the intent buttons wrap across the width.
- The intent buttons keep their size and have a 44px tap area on a touch screen.
Seen in products
- Shape of AI Wayfinders list Gallery, Follow up, Initial CTA, Nudges, Prompt details, Randomize, Suggestions and Templates.
- Microsoft HAX guidelines 1 and 2 say to make clear what the system can do and how well it can do it.
- NN/g recommends stating chatbot scope up front and offering 3 to 6 starter intents alongside free text (secondary source).
- Google PAIR covers setting mental models and expectations.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "What would you like to make?" | Serif heading and accessible name of the section. |
| statementrequired | ReactNode | none | One sentence on what the assistant can and cannot do. |
| intentsrequired | StarterIntent[] | none | Starter intents with an id and a label. Three to six works best. |
| onIntentrequired | (id: string) => void | none | Called when an intent is pressed. |
| templates | StarterTemplate[] | [] | Cards with an id, title, description and optional category. The section is hidden when empty. |
| onTemplate | (id: string) => void | none | Called when a template card is pressed. |
| intentsLabel | string | "Start with" | Label above the intents. |
| templatesLabel | string | "Templates" | Label above the templates. |
| randomize | ReactNode | none | Slot beside the templates label, for a Randomize button. |
| className | string | none | Extra classes for the section. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- no templates
- Without templates, the templates section and its heading are left out.
- hover
- A template card gets a stronger border and a soft background under the pointer.
- focus
- Intent buttons and template cards show a focus ring on keyboard focus.
Tokens
Change one of these and every part that uses it follows.
--surface--surface-hover--border--border-strong--fg-muted--radius-card
Built in
- The section is named by its heading.
- Ideas and templates are lists, so screen readers say how many there are.
- Ideas and template cards are real buttons, reached with Tab and used with Enter or Space.
- A template card is read as its category, then its title, then its note.
- When the templates change, for example after Shuffle, screen readers hear it.
- If the gallery goes away after an idea or template is chosen, keyboard focus moves to the nearest message box. Pass focusAfterChoose to choose another place.
What you need to do
- Give the Shuffle button a clear name, such as "Show other templates".
- Write the statement as one plain sentence that is clear when heard on its own.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide