AI Interfaces
Source Citation Card
A citation card for grounded AI responses and research-backed interfaces.
sourcecitationai
Installation
Copy and paste the code into your project.
Accessibility notes
Figure and figcaption create a useful relationship between quote and source.
Grounded responses should show the trail back to source material.
Preview accent
TypeScript
export function SourceCitationCard() {
return (
<figure className="w-full max-w-sm rounded-lg border border-[#fb923c]/24 bg-[#fb923c]/8 p-4">
<blockquote className="text-sm text-orange-50">Grounded responses should show the trail back to source material.</blockquote>
<figcaption className="mt-3 text-xs font-medium text-[#fdba74]">Source - docs/agent-interface.md</figcaption>
</figure>
);
}Usage
<SourceCitationCard />Related components
Inputs
AI Chat Input
A responsive prompt composer with textarea, label, and high-contrast send button.
aichatform
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
- 1Parse brief
- 2Create variants
- 3Ship preview
AI Interfaces
Agent Step Timeline
A simple ordered timeline for AI agents, build systems, and workflow progress.
agenttimelinesteps