A compact source summary that expands into grounded references with useful context.
import Citations from '@/components/ui/citations'
export default function Demo() {
return (
<div data-demo-stage className="flex min-h-[360px] w-full items-center justify-center p-8">
<div className="relative h-7 w-full max-w-sm *:absolute *:inset-x-0 *:top-0">
<Citations
items={[
{
id: 'figma',
title: 'Figma',
domain: 'figma.com',
description: 'Collaborative interface design and prototyping.',
url: 'https://www.figma.com/',
icon: <img src="https://cdn.21st.dev/assets/mirror/5b/5bcdea3417293412845b8298fe357fce3b192e8ff112d9b3fef315bc5cd127f6.svg" alt="" />,
},
{
id: 'linear',
title: 'Linear',
domain: 'linear.app',
description: 'Project planning and issue tracking for product teams.',
url: 'https://linear.app/',
icon: <img src="https://cdn.21st.dev/assets/mirror/e6/e669549bf9917d616f3ae10ace5ba9af6e84966ec12cadd13459489cded34ccf.svg" alt="" />,
},
{
id: 'notion',
title: 'Notion',
domain: 'notion.so',
description: 'A shared workspace for documents and team knowledge.',
url: 'https://www.notion.so/',
icon: <img src="https://cdn.21st.dev/assets/mirror/0d/0d94471649fb9badd434394846079c279876fdd224cf49ed46b6c09fbd3a041f.svg" alt="" className="bg-white" />,
},
]}
/>
</div>
</div>
)
}
Part of Pasta UI — browse the full library on 21st.dev.