2 variants

Citation Answer

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

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. */

155 more lines ship with an easeUI Pro license.

Buy a license

Install

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

Source cards

Sources laid out as cards above the answer, the way search answers show them. Pointing at a marker or a card lights up both.

Sources · 4

Grid track interpolation lets a row collapse without measuring its height , and it is supported in every current browser . Keep the animation under 300ms so it reads as a response rather than a wait , and skip it entirely under reduced motion .

usage.tsx

import { CitationSources } from "@/components/registry/citation-sources";

export function Answer() {
  return (
    <CitationSources
      text="Grid tracks collapse without measuring [1]."
      sources={[{ publisher: "web.dev", title: "Animating grid rows", url: "https://web.dev" }]}
    />
  );
}

"use client";

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

export interface SourceCard {
  title: string;
  /** Short publisher or domain name, shown over the title. */
  publisher: string;
  url?: string;
}

123 more lines ship with an easeUI Pro license.

Buy a license

Install

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