HAIKU // NEXTUI

Pullquote

Serene editorial blockquote with a ruled left accent, typographic quote marks, and an optional attribution citation.

$npx @voltenworks/shipui add pullquote --theme haiku
Or install the base component for free:
Live Preview
Open full demo
voltenworks.com/shipui/haiku/demo/components#6-pullquote
Usage
TSX
<Pullquote
  quote="In the silence, everything speaks."
  attribution="Zen proverb"
/>
Variants
<Pullquote quote="In the silence, everything speaks." />
<Pullquote quote="The obstacle is the path." attribution="Zen proverb" />
Source
TSX
interface PullquoteProps {
  quote:        string
  attribution?: string
}

export function Pullquote({ quote, attribution }: PullquoteProps): React.JSX.Element {
  return (
    <blockquote className="haiku-pullquote">
      <div className="haiku-pullquote-rule" aria-hidden="true" />
      <p className="haiku-pullquote-quote">&ldquo;{quote}&rdquo;</p>
      {attribution && (
        <cite className="haiku-pullquote-attr">{attribution}</cite>
      )}
    </blockquote>
  )
}
Preview in theme demoGet full theme, $29
Works withNext.js 15React 19Tailwind v4TypeScript 5
More from HAIKU // NEXT
HAIKU // NEXTUI

Button

Japanese-inspired light-mode button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.

HAIKU // NEXTUI

Badge

Minimalist badge for tags and labels in the HAIKU Japanese-inspired light palette.

HAIKU // NEXTUI

Card

Composable light card with header, body, and footer sub-components in the HAIKU minimal Japanese aesthetic.

HAIKU // NEXTUI

Seal

Circular hanko-style seal displaying a kanji character with an optional label. Available in red and neutral variants at configurable sizes.

HAIKU // NEXTUI

Text

Polymorphic text primitive with body, caption, label, and code variants styled for the HAIKU minimal Japanese light palette.