Quote

Pull quote set in the display serif with an attribution line.

Text effectsServer-safe

Restraint first. If removing a shadow does not hurt clarity, remove it.
VibeUI principles

Install

bash

npx @agents-npm-packages/vibeui add quote --dir ./src/components/ui

Import

tsx

import { Quote } from "@/components/ui/quote"

API

Generated from the component's TypeScript types, so it always matches the source. * marks a required prop.

<Quote>

Prop	Type	Default	Description
children*	ReactNode	—	Content rendered inside the component.
cite	string	—	Attribution line.
className	string	—	Extra classes, merged with the component's own.

Source

src/components/ui/quote.tsx

import { cn } from "@/lib/utils";

/** Pull quote set in the display serif with an attribution line. */
export function Quote({
  children,
  cite,
  className,
}: {
  children: React.ReactNode;
  cite?: string;
  className?: string;
}) {
  return (
    <blockquote
      className={cn(
        "relative animate-fade-up pl-6 font-display text-[26px] leading-[1.25] tracking-[-0.01em] text-ink",
        "before:absolute before:inset-y-1 before:left-0 before:w-[3px] before:origin-top before:animate-grow-y before:rounded-full before:bg-accent before:[animation-delay:250ms]",
        className,
      )}
    >
      {children}
      {cite ? (
        <footer className="mt-3 font-sans text-[13px] not-italic tracking-normal text-muted">
          {cite}
        </footer>
      ) : null}
    </blockquote>
  );
}

Exports Quote. Peer dependencies: clsx, tailwind-merge.