SuggestTopics

Starter prompt cards for empty chat states. The first thing users see when opening a new conversation — contextual suggestions that help them get started.

SuggestTopics — Live Demo

SuggestTopics — Compact (horizontal scroll)

SuggestTopics — No Icons, 3 Columns

Import

tsx

import { SuggestTopics, TopicCard } from "@arc-lo/ui";

Basic usage

tsx

<SuggestTopics columns={2}>
  <TopicCard
    icon="✍️"
    title="Help me write a blog post"
    description="About AI design systems"
    onSelect={(title) => setPrompt(title)}
  />
  <TopicCard
    icon="🔍"
    title="Explain how transformers work"
    onSelect={(title) => setPrompt(title)}
  />
</SuggestTopics>

With ChatThread

tsx

function Chat() {
  const [messages, setMessages] = useState([]);

  if (messages.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center h-full gap-8">
        <h2 className="text-xl font-semibold">How can I help you?</h2>
        <SuggestTopics columns={2}>
          <TopicCard
            icon="✍️"
            title="Help me write"
            onSelect={(title) => sendMessage(title)}
          />
          <TopicCard
            icon="🔍"
            title="Research a topic"
            onSelect={(title) => sendMessage(title)}
          />
        </SuggestTopics>
      </div>
    );
  }

  return (
    <ChatThread.Root>
      <ChatThread.Messages>
        {messages.map(msg => (
          <ChatThread.Message key={msg.id} role={msg.role}>
            {msg.content}
          </ChatThread.Message>
        ))}
      </ChatThread.Messages>
    </ChatThread.Root>
  );
}

Parts

Component	Description
`SuggestTopics`	Grid container with responsive columns
`TopicCard`	Individual suggestion card with icon, title, description

Props

SuggestTopics

Prop	Type	Default	Description
`columns`	`1 \| 2 \| 3`	`2`	Number of grid columns (responsive)

TopicCard

Prop	Type	Default	Description
`title`	`string`	—	Card title / prompt text (required)
`description`	`string`	—	Optional subtitle
`icon`	`ReactNode`	—	Optional icon (emoji, SVG, etc.)
`onSelect`	`(title: string) => void`	—	Called when card is clicked