shadcn.io is not affiliated with official shadcn/ui
A small chip with the source's hostname ends the sentence it supports, and hovering or focusing it shows the page's title, a line about it and the link.
Use it when an answer leans on pages the reader may want to check, claim by claim. To list everything the agent read after the reply, use Sources instead. The chip is a Button that opens a Hover Card, so there is no Inline Citation component to install in Solid. Show the hostname rather than a number, so the reader knows where a source lives before opening it, and keep the chip after the claim, not in the middle of it.
Installation
Inline Citation is a pattern. The command adds the parts it's built from, Hover Card and Button, and the code to copy is the demo's.
Anatomy
Sentence (p)
└── HoverCard (one per source)
├── HoverCardTrigger (Button, the hostname)
└── HoverCardContent
├── Title
├── Description
└── Link (opens in a new tab)Usage
import { Button } from "@/components/ui/button";
import {
HoverCard, HoverCardContent, HoverCardTrigger,
} from "@/components/ui/hover-card";export function Citation(props: { title: string; url: string }) {
const hostname = new URL(props.url).hostname;
return (
<HoverCard closeDelay={100} openDelay={10}>
<HoverCardTrigger
asChild={(props) => (
<Button {...props()} size="xs" variant="secondary">
{hostname}
</Button>
)}
/>
<HoverCardContent class="flex w-64 flex-col gap-1">
<div class="font-medium">{props.title}</div>
<a href={props.url} rel="noreferrer" target="_blank">
{hostname}
<span class="sr-only"> (opens in a new tab)</span>
</a>
</HoverCardContent>
</HoverCard>
);
}AI SDK
A source-url part is the citation. Set sendSources: true on toUIMessageStreamResponse(), or write the part yourself.
writer.write({
type: "source-url",
sourceId: "shadcn",
url: "https://ui.shadcn.com",
title: "shadcn/ui",
});const sources = message.parts.filter((part) => part.type === "source-url");title is optional. Fall back to the URL's hostname.
AI SDK UI has no Solid package: the route above still streams the source parts, so read them from the messages your own client parses.
Migrating from AI SDK Elements
AI SDK Elements is for React. In Solid, start from the demo above: a Hover Card on a Button is all there is to Inline Citation.
FAQ
What does installing Inline Citation add in Solid?
Hover Card and Button, the two parts it's built from. Inline Citation is a pattern, so no inline-citation file lands in your ui folder: copy the demo's Citation into your own component and pass it each source. The command uses the shadcn CLI.
How do I know which sentence a source supports?
Source parts arrive as a list, with no place in the text. Ask the model to mark each claim inline, such as a number in brackets after the sentence, and swap each mark for the chip of its source. Sources it never cites inline belong in a list after the reply.
Why does the chip show the hostname?
A number says nothing until it's opened, and a full title is too long for the middle of a paragraph. The hostname tells the reader where a claim comes from at a glance, and the card adds the title and a line about the page. Drop the www, as the demo does.
Why does the link say it opens in a new tab?
It does open one, with target set to _blank, so the reader keeps the answer where it was. The words sit in an sr-only span, so a screen reader hears them before following the link, and a sighted reader isn't told twice. rel set to noreferrer keeps the source from seeing where the reader came from.
Can the reader open a citation on a phone?
A hover card opens on hover and on keyboard focus, not on a tap. The hostname in the chip still says where the claim comes from. When the reader must reach the page on a phone, list the same links after the reply, or open the card in a Popover.
Is this the same as AI SDK Elements' Inline Citation?
It does the same job with fewer parts: the trigger was a Badge and the card held a carousel of sources, and here it's a Button that opens a Hover Card for one source. The Migrating from AI SDK Elements section has a prompt that rebuilds the old file on these parts and keeps its exports.
API Reference
Inline Citation has no props of its own. Each chip is a Button with variant secondary and size xs, the trigger of a Hover Card whose content holds the title, the description and the link.
