Update v4.2 - New components, 10+ framework guides, and quality improvements. Visit Changelog

........ Github
Figma X (Twitter)

Tailwind CSS Blockquote

Implement and style Tailwind CSS Blockquote component to emphasise quoted or cited content. Widely used in articles, blog posts and testimonials.

Basic usage

Default blockquote

Use a standard blockquote with quote text and a citation.

Sizes

Small

Use a smaller quote size for denser layouts or shorter supporting quotes.

Medium

Use a medium quote size for general-purpose editorial layouts.

Large

Increase the quote size to create a stronger pull-quote or featured testimonial.

Alignment

Use text-alignment utilities to center or right-align the quote and citation.

Right-aligned blockquote

Right-align the quote and citation for a more editorial layout.

Citing a source

Add a citation to identify the quoted person, publication, or work.

Citation with avatar

Pair the attribution with an avatar to add more author context.

Blockquote with left border

Add a left border to create a more editorial pull-quote style.

© 2026 Preline Labs.