AI Interfaces
Agent Step Timeline
A simple ordered timeline for AI agents, build systems, and workflow progress.
agenttimelinesteps
Installation
Copy and paste the code into your project.
Accessibility notes
The ordered list preserves step order for assistive technologies.
- 1Parse brief
- 2Create variants
- 3Ship preview
Preview accent
TypeScript
const steps = ["Parse brief", "Create variants", "Ship preview"];
export function AgentStepTimeline() {
return (
<ol className="w-full max-w-xs space-y-3">
{steps.map((step, index) => (
<li key={step} className="flex items-center gap-3 text-sm text-slate-200">
<span className="grid h-7 w-7 place-items-center rounded-full border border-[#40E0D0]/30 bg-[#40E0D0]/10 text-xs text-[#d8fffb]">
{index + 1}
</span>
<span>{step}</span>
</li>
))}
</ol>
);
}Usage
<AgentStepTimeline />Related components
I can turn that product brief into a component map, then draft the first screen.
AI Interfaces
Streaming Response Bubble
A conversational response card with subtle animated streaming indicators.
streamingchatresponse
Grounded responses should show the trail back to source material.
AI Interfaces
Source Citation Card
A citation card for grounded AI responses and research-backed interfaces.
sourcecitationai
AI Interfaces
Model Switcher
A segmented control for fast, smart, and deep model modes.
modelswitchercontrol