1 variant

Citation Answer

An answer whose inline markers are real buttons, each lighting up the source it came from.

Animating height forces the browser to lay the element out again on every frame, which is why transform and opacity are the only two properties worth animating in a list . A grid template rows interpolation is the exception people reach for, because it is a native CSS animation the browser lays out once per change rather than once per frame . Either way, anything that moves needs a reduced motion path .

usage.tsx

import { CitationAnswer } from "@/components/registry/citation-answer";

export function Answer() {
  return (
    <CitationAnswer
      text="Transform and opacity are the only two worth animating [1]."
      sources={[
        { publisher: "web.dev", title: "Animations and performance", url: "https://web.dev/animations-guide/" },
      ]}
    />
  );
}

"use client";

import { ArrowUpRight } from "lucide-react";
import { useId, useState } from "react";
import { cn } from "@/lib/utils";

export interface CitationSource {
  /** Headline of the source. */
  title: string;
  /** Where the source lives. Without it the entry is a plain, unlinked reference. */
  url?: string;
  /** Short quote or summary, shown under the row while the source is pointed at. */

161 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/citation-answer

Props

CitationAnswer

textRequiredstring

Every [1] style marker becomes a button pointing at that source, counting from one.

sourcesRequiredCitationSource[]

In marker order.

classNamestring

Merged last, so anything passed here wins over the component's own classes.

CitationSource

titleRequiredstring

The headline, and the link's accessible name.

urlstring

Without it the entry is a plain, unlinked reference.

snippetstring

Shown on the reserved line under the row while the source is pointed at.

publisherstring

Used as the visible link text when it is there, since it is shorter than a title.