Minor Chords
ThreadEmpty
Welcome state with icon, greeting, and optional suggestion chips.
Overview
ThreadEmpty is a single component for the thread welcome/empty state. It wraps ThreadPrimitive.Empty and renders a centered layout with an icon, greeting text, optional subtitle, and optional suggestion chips.
This is the first primitive that composes another UX primitive — it uses SuggestionChips internally when suggestions are provided.
Demo
This shows the default welcome state with suggestion chips.
U
How can I help you today?
<ThreadEmpty
greeting="How can I help you?"
suggestions={[
{ prompt: "Write a poem", label: "Write a poem", description: "about the ocean" },
"Help me plan a trip",
]}
/><ThreadPrimitive.Empty>
<div className="flex flex-1 flex-col items-center justify-center">
<div className="flex size-12 items-center justify-center rounded-full border ...">
U
</div>
<p className="mt-4 text-xl ...">
How can I help you?
</p>
<div className="mt-6 w-full max-w-lg">
<div className="grid grid-cols-2 gap-2">
<ThreadPrimitive.Suggestion prompt="Write a poem" send className="...">
<span>Write a poem</span>
<span>about the ocean</span>
</ThreadPrimitive.Suggestion>
...
</div>
</div>
</div>
</ThreadPrimitive.Empty>Props
Prop
Type
Underlying Primitives
ThreadPrimitive.Empty— only renders when thread has zero messagesSuggestionChips— composed internally for the suggestions grid