Citation

A floating card that shows the source behind a claim.

Anatomy

Render one item for a single citation, or many for a paginated set. A trigger pill opens a card on hover, anchored to it. Inside, a list shows one source at a time, with a nav row for prev, next, and a position indicator. The nav hides itself when there is only one item, so the same parts cover the single-source layout. The order of parts inside an item is up to the author. Put the name on top to credit the source first, or move it under the description for a footer credit. For an in-document excerpt, swap description for content and add an action below.

For an in-document excerpt the title sits in the header on the outer surface, and the elevated list holds only the body and footer action:

API

Reference for each part of the component, including its available props and behavior.

Citation

Root preview card. Provides the carousel state to every part and tracks the current index, the total number of items, and the direction of the last move so the active item can animate from the matching side.

CitationTrigger

The pill that opens the card on hover or focus. Wraps the Base UI PreviewCard trigger, so the trigger renders as an anchor and inherits a short delay before opening and a slightly longer delay before closing. The hover gesture survives the user moving from the trigger across the gap into the card. Accepts any children, so the author can hand-write the visible label, including an extra count like "+2" when there are more sources behind the trigger.

CitationPopup

The floating card. Wraps the card portal, positioner, and popup so the author drops it in without wiring the three together. Anchored to the trigger with a small offset, fades and lifts in, and lays its children out in a column.

CitationHeader

The padded zone above the elevated list, on the outer popup surface. Wrap a CitationNav here for the multi-source case, place a CitationTitle here for an in-document layout where the source name belongs above the body, or combine the two. Provides the inset that makes the elevated card feel like a card-in-card. Skip it entirely for the single-source web shape.

CitationNav

The row holding prev, next, and the indicator. Carries no padding of its own, so wrap it in a CitationHeader for the inset look. Reads the total from the surrounding context and hides itself when there is one item or fewer, so the same anatomy collapses cleanly to a single-source card.

CitationPrev

Headless prev control. Wires the back step and the move direction onto a rendered element of the caller's choice. Pass render to provide the styled button and children for the icon. The control has no default styling and no default icon, so it composes with whatever button family the call site already uses.

CitationNext

Headless next control. Wires the forward step and the move direction onto a rendered element of the caller's choice. Pass render to provide the styled button and children for the icon. The control has no default styling and no default icon, so it composes with whatever button family the call site already uses.

CitationIndicator

Reads the current index and total from the context and renders them as a position label. Default output reads the active position over the total. Pass children to swap the format, or build a custom indicator with the useCitation hook.

CitationList

The boundary that holds the items. Counts its children, registers the total with the surrounding context, and renders only the active child. Each item is keyed by index, so the active one remounts on every move and re-runs its enter animation.

CitationItem

A single citation card. Defaults to a plain div so the item itself is not clickable. For web sources, pass render={<a href="..." />} (or a framework Link) to make the whole card a link. Reads the move direction and applies a small slide-fade enter animation on each switch.

CitationName

The credit line for the source, holding a small site icon and the publisher name on a single inline row. Place it above the title for a header layout, or under the description for a footer layout.

CitationTitle

The article, page, or document title. Sized larger than the name and description so the eye lands on it first.

CitationDescription

A short snippet for the source, often a date prefix followed by the lead. Clamps to three lines so the popup keeps a steady height across items. Use this for web previews where the body is a metadata summary.

CitationContent

The verbatim body from the source, used for in-document excerpts. Flows naturally with paragraph spacing and no clamp, so the popup grows to fit the text. For very long passages, pair with a CitationAction so the user can open the full source, or apply a line-clamp-N or max-h-X overflow-y-auto className for a fixed window.

CitationAction

The footer slot below the body, separated by a thin top border. Drop a button or a link inside, like a "View source" affordance for in-document citations. The container colors its descendants with the primary token so plain links read as a call to action; override the className for a different tone.