A blockquote component for highlighting quotes and testimonials. Available in four styles with RTL support.
Loading demo: quote-real-world
npx sdaia-ui@latest add quote
import { Quote } from "@/components/ui/quote"<Quote style="standard" /><Quote style="standard" />A standard blockquote with quotation marks.
Loading demo: quote-standard
Centered quote layout for testimonials and highlights.
Loading demo: quote-centered
Quote with the author's image displayed alongside the text.
Loading demo: quote-author-image
Quote with author information displayed to the side.
Loading demo: quote-author-side
Props for the Quote component.
Prop | Type | Default | Required |
|---|---|---|---|
style | 'standard' | 'centered' | 'author-image' | 'author-side' | 'standard' | optional |
title | string | 'Title of quote' | optional |
quote | string | '" The quote is placed here to highlight a specific saying or to present a brief quote that expresses an important idea or concept. "' | optional |
authorName | string | 'Ali Al-Farsi' | optional |
authorRole | string | 'Founder' | optional |
showStar | boolean | true | optional |
imageSrc | string | - | optional |
imageAlt | string | '' | optional |
className | string | - | optional |