Component

PullQuote

Highlight long-form quotes with optional attribution and an accent border.

Usage

Import the component entry and start with its smallest complete example.

Import

import { PullQuote } from "@chitrank2050/monoline-ui/pull-quote"

Basic usage

<PullQuote attribution="Chitrank Agnihotri">
  Simplicity is the ultimate sophistication.
</PullQuote>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

PullQuote draws attention to a genuine quotation and optional attribution inside long-form content.

Avoid when

The copy is decorative rather than quoted, or the attribution needs a full testimonial card.

Accessibility

PullQuote uses figure, blockquote, and an optional figcaption, preserving native semantics for both quotation and attribution.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

attributionstringOptional caption source or author attribution

Design tokens

Theme variables this component reads for color, spacing, and motion.

--accentCSS varAccented left border color

Implementation

The source used by the example above, including any state it needs.

import { PullQuote } from "@chitrank2050/monoline-ui/pull-quote"

export function Quote() {
  return (
    <PullQuote attribution="Design Principles">
      Form follows function, but visual consistency builds trust.
    </PullQuote>
  )
}

Compare related components or review the package and theme setup.

01ComponentTestimonialComponent · ReferenceReference→02ComponentSection HeadComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview