Free
Actions
Data display
Feedback
Navigation
Overlays
Layout & media
Form inputs
Sliders & steps
Pro
Data & search
Forms & upload
Content & media
Navigation & layout
Quotes
Use <base-quote> to highlight testimonials, excerpts, and quotes with various styles and layouts.
Default Quote
The default quote variant uses a simple left border to set it apart from normal text.
But I have asserted a firm conviction in the American people - that working together we can meet whatever comes. Let us meet this moment.
John Kerry
Secretary of State
HTML
Icon-Top Quote
Displays a large quote icon above the text for more visual impact.
I believe that a simple and unassuming manner of life is best for everyone, best both for the body and the mind.
Albert Einstein
Theoretical Physicist
HTML
Avatar-Left Quote
Positions the author's avatar to the left of the quote text.
Richard M. Nixon
President
"And let this message be sent from here... for all Americans to see hope again in their lives, hope for all the cause of freedom, working for the cause of peace."
HTML
Installation
Run the following command to add this component to your project:
bash
npx base-ui-cli add quote
API Reference
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.
bash
npx -y base-ui-mcp
Base UI provides standalone components. Import the exact elements you want to use into your component.
typescript (Example)
// Install: npx base-ui-cli add quote
// Paths are relative to aliases.components (default: src/app/components)
import { QuoteComponent } from './quote/quote.component';
@Component({
selector: 'app-your-component',
imports: [
QuoteComponent
],
template: `...`
})
export class YourComponent {} API for quote — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
base-quote | variant | QuoteVariant | 'default' | The structural and visual layout variant of the quote. |
base-quote | authorName | string | — | The name of the person being quoted. |
base-quote | authorRole | string | — | The subtitle or role of the author (e.g. "CEO, Company"). |
base-quote | avatarUrl | string | — | The URL to the author's avatar image. Primarily used in 'avatar-left' variant. |
base-quote | iconColor | 'primary' | 'success' | 'danger' | 'warning' | 'accent' | 'default' | string | 'primary' | The semantic color name for the quote icon. Defaults to 'primary'. |
Content