Pull Quote Break

Installation

pnpm dlx shadcn@latest add @cleverui/pull-quote-break

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { PullQuoteBreak } from '@/components/blocks/pull-quote-break'

Exampletsx

import { PullQuoteBreak } from '@/components/blocks/pull-quote-break'

export default function PullQuoteBreakDemo() {
  return (
    <div className="mx-auto w-full">
      <PullQuoteBreak
        quote="We stopped decorating the alert and started designing the silence between them."
        attribution="Mara Chen, Head of Platform"
        cite="Issue 04 interview"
        align="left"
      />
    </div>
  )
}

API reference

PullQuoteBreak accepts the following props.

Prop	Type	Default	Description
`quote`*	`string`	–	the pulled sentence, keep it to one or two lines of display type
`attribution`	`string`	–	who said it, e.g. 'Mara Chen, Head of Platform'
`cite`	`string`	–	optional source note rendered after the attribution, e.g. 'Issue 04 interview'
`align`	`'left' \| 'center'`	`'left'`	left keeps the keyline edge treatment; center drops the bar to a short top rule

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Related components

Article Card Grid

Editorial article cards, mono kicker with category and read time, display titles, a dek line, and initials-avatar bylines. The featured story spans wide inside a hairline frame.

Article Header

The opening block of a post, category eyebrow, display title, standfirst, and a byline row with preformatted date and read time, closed by a hairline rule that draws itself.

Article TOC Rail

Sticky table-of-contents rail for React articles, mono indices, a hairline spine, and a primary tick that slides to the active heading via built-in scroll-spy. Tailwind tokens throughout.

Author Bio Card

End-of-article author bio for React blogs, mono initials avatar, role, short bio, quiet text links, and a 'More from' reading list with preformatted dates. Tailwind tokens, zero icon clutter.

Prev Next Articles

End-of-article pagination, two hairline panels with mono direction labels and display titles, hairlines extending on hover. A lone neighbour panel spans the full width.

Hover Index Card

Editorial cards fronted by a giant mono index numeral that fills from outline to solid ink on hover or focus, a zero-movement hover language built on clip-path, solid by default on touch.

Frequently asked questions

How do I install the Pull Quote Break component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/pull-quote-break`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Pull Quote Break require?

Pull Quote Break uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Pull Quote Break to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code