# Quote

## Example

```svelte
<script>
	import { Quote } from '@foxui/all';
	import einstein from '$lib/assets/images/einstein.webp';
</script>

<Quote
	quote="Two things are infinite, the universe and the number of javascript frameworks, and I am not yet completely sure about the universe."
	author={{
		name: 'Albert Einstein',
		role: 'Scientist',
		src: einstein
	}}
	useThemeColor
	class="not-prose"
/>
```

## Documentation

## Usage

```svelte
<Quote
	quote="Two things are infinite, the universe and the number of javascript frameworks, and I am not yet completely sure about the universe."
	author={{
		name: 'Albert Einstein',
		role: 'Scientist',
		src: './einstein.png'
	}}
	useThemeColor
/>
```

## API Reference

### Quote
A styled blockquote with optional author avatar and attribution.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| quote | `string` | `-` | The quote text. |
| author | `{ src?: string; alt?: string; fallback?: string; role?: string; name?: string; avatarClass?: string; fallbackClass?: string; imageClass?: string }` | `-` | The author information including avatar and name. |
| useThemeColor | `boolean` | `false` | Whether to apply theme color styling to the author avatar. |
| class | `string` | `-` | Additional CSS classes to apply. |
| ref | `HTMLDivElement` | `-` | The underlying DOM element. (bindable) |