Theme: Smoke
Background: Field
Theme: Smoke
Background: Field
System

Source chip

FigmaStorybook

A numbered citation pill linking a claim to its source

Assistant answers earn trust by showing their sources. A source chip sits inline after a sentence or in a wrapping row under the answer: a numeral, the source’s logo or a globe, then the source name, truncating before it can crowd the text around it.

Numbered citations

The citation number sits in its own small circle, tucked into the start of the pill with the same inset above, below and before it, so a run of chips reads as a numbered list at a glance.

1Design tokens quarterly2Theming layered systems3The primitives handbook

As links

With an href the chip renders as an anchor. The pill shape is the affordance: hover deepens the background and text instead of adding an underline.

1The component API field guide2Interface annual review

Source preview

Give a chip an excerpt and it previews its source on hover, focus or press: the full title over the passage the answer drew on, with where it lives on the line above. A logo leads that line even when the chip itself shows a number. The panel opens above the chip, drops below when there is no room, and slides sideways to stay in view. A chip with a preview and no link becomes a button, so the keyboard reaches it too.

1Design tokens quarterlytokens.example.comDesign tokens quarterlyA semantic token names a role and points at a primitive. Change the primitive once and every component that reads the role follows.example.com/themingTheming layered systemsA theme re-keys the primitives and re-points the semantic layer. The tiers themselves never change, which is what keeps a retheme a one-file job.handbook.example.com12 min readThe primitives handbookPrimitives hold raw values and nothing else. No component reads one directly.

Logos and the globe

Without a number, the leading slot shows the source’s logo, cropped to the same circle the numeral sits in. A source with no logo gets a globe, so the slot is never empty. If both an index and a logo are passed, the index wins and the logo moves to the preview.

Interface annual reviewThe primitives handbookGrid notesLayout systems memo

Under an answer

The intended home: a wrapping sources row in the footer of an assistant answer, each chip linking one claim to where it came from.

Semantic tokens resolve to primitives, so overriding a single primitive cascades through every component that references it. That is what makes whole-system retheming a one-file change.

1Design tokens quarterly2Theming layered systems3The primitives handbook
tsx
// From the npm package
import { SourceChip } from 'rift-ds/components/SourceChip/SourceChip';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/source-chip.json