Chat & AI

Inline Citation

Inline source badge with a hover card of citations.

Import

tsx

import { InlineCitation } from "@cronus-ui/ui";

bash

npx cronus-ui add inline-citation

Examples

Cited claim

A hover card of sources attached to a sentence.

Cronus is a product UI system*aicronus.com.

tsx

<p className="text-sm text-fg">
  Cronus is a product UI system
  <InlineCitation>
    <InlineCitationText>*</InlineCitationText>
    <InlineCitationCard>
      <InlineCitationCardTrigger sources={["https://aicronus.com"]} />
      <InlineCitationCardBody>
        <InlineCitationSource title="Cronus UI" url="https://aicronus.com" />
      </InlineCitationCardBody>
    </InlineCitationCard>
  </InlineCitation>
  .
</p>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component InlineCitationDefault layout:inline style:inline-citation {
  label "Cronus compiles to a single binary."
  text "https://cronus.dev/docs"
  text "https://github.com/cooud/cronus"
}

page "/audit/inline-citation/default" type:custom {
  use InlineCitationDefault
}

API Reference

Generated from the component's exported types.

InlineCitationLabels

Prop	Type	Default	Description
`previous`	`string`	—	—
`next`	`string`	—	—
`unknown`	`string`	—	—

InlineCitationProps

Extends HTMLAttributes<HTMLSpanElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

InlineCitationTextProps

Extends HTMLAttributes<HTMLSpanElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

InlineCitationCardProps

Extends ComponentProps<typeof HoverCard>

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	—	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.
`children`	`ReactNode`	—	Contents of the component.

InlineCitationCardTriggerProps

Extends ComponentProps<typeof Badge>

Prop	Type	Default	Description
`sources`*	`string[]`	—	—
`labels`	`Pick<InlineCitationLabels, "unknown">`	—	Override default English strings.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

InlineCitationCardBodyProps

Extends ComponentProps<typeof HoverCardContent>

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	—	Preferred side of the trigger.
`align`	`"start" \| "center" \| "end"`	—	Alignment along the chosen side.
`sideOffset`	`number`	—	Distance in pixels from the trigger.
`alignOffset`	`number`	—	Offset along the alignment axis.
`forceMount`	`boolean`	—	Keep the node mounted when closed, for exit animation.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

InlineCitationCarouselProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`labels`	`InlineCitationLabels`	—	Override default English strings.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

InlineCitationCarouselContentProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

InlineCitationCarouselItemProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

InlineCitationCarouselHeaderProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

InlineCitationCarouselIndexProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

InlineCitationCarouselPrevProps

Extends HTMLAttributes<HTMLButtonElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

InlineCitationCarouselNextProps

Extends HTMLAttributes<HTMLButtonElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

InlineCitationSourceProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`title`	`string`	—	—
`url`	`string`	—	—
`description`	`string`	—	—
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

InlineCitationQuoteProps

Extends HTMLAttributes<HTMLQuoteElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.