Quote
A blockquote component for highlighting quotes and testimonials. Available in four styles with RTL support.
'use client'; import { Quote } from 'sdaia-ui'; export default function QuoteRealWorld() {Installation
npx sdaia-ui@latest add quote
Usage
import { Quote } from "@/components/ui/quote"<Quote style="standard" /><Quote style="standard" />Examples
Standard
A standard blockquote with quotation marks.
'use client'; import { Quote } from 'sdaia-ui'; const QUOTE_TEXT =Centered
Centered quote layout for testimonials and highlights.
'use client'; import { Quote } from 'sdaia-ui'; const QUOTE_TEXT =Author Image
Quote with the author's image displayed alongside the text.
'use client'; import { Quote } from 'sdaia-ui'; const QUOTE_TEXT =Author Side
Quote with author information displayed to the side.
'use client'; import { Quote } from 'sdaia-ui'; const QUOTE_TEXT =API Reference
QuoteProps
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 | 'John Doe' | optional |
authorRole | string | 'Founder' | optional |
showStar | boolean | true | optional |
imageSrc | string | - | optional |
imageAlt | string | '' | optional |
className | string | - | optional |
