HAIKU // NEXTUI
Pullquote
Serene editorial blockquote with a ruled left accent, typographic quote marks, and an optional attribution citation.
$
Or install the base component for free:
Live Preview
Open full demoUsage
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">“{quote}”</p>
{attribution && (
<cite className="haiku-pullquote-attr">{attribution}</cite>
)}
</blockquote>
)
}
Works withNext.js 15React 19Tailwind v4TypeScript 5
More from HAIKU // NEXT
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.
Badge
Minimalist badge for tags and labels in the HAIKU Japanese-inspired light palette.
Card
Composable light card with header, body, and footer sub-components in the HAIKU minimal Japanese aesthetic.
Seal
Circular hanko-style seal displaying a kanji character with an optional label. Available in red and neutral variants at configurable sizes.
Text
Polymorphic text primitive with body, caption, label, and code variants styled for the HAIKU minimal Japanese light palette.