---
title: Blockquote
description: Styled blockquote with optional citation
visibility: guest
draft: false
---

# Blockquote

A styled blockquote with left border, citation support, and accent variant.

## Basic Usage

:::preview{title="Default blockquote"}
<x-wirekit::blockquote>
    The best way to predict the future is to invent it.
</x-wirekit::blockquote>
:::

## With Citation

:::preview{title="Blockquote with author"}
<x-wirekit::blockquote cite="Alan Kay">
    The best way to predict the future is to invent it.
</x-wirekit::blockquote>
:::

## Accent Variant

:::preview{title="Accent blockquote"}
<x-wirekit::blockquote variant="accent" cite="Alan Kay">
    The best way to predict the future is to invent it.
</x-wirekit::blockquote>
:::

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `cite` | string\|null | `null` | Citation / author name |
| `variant` | string | `'default'` | Border color: `default`, `accent` |
| `scope` | string\|null | `null` | Scoped personalization name |

## Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

## Design Tokens

| Token | Used for |
| --- | --- |
| `--color-wk-border` | Default border |
| `--color-wk-accent` | Accent border |
| `--color-wk-text` | Quote text |
| `--color-wk-text-muted` | Citation text |

## Usage & Conventions

> **Prop conventions** — this component uses one or more of the shared semantic prop names (`intent` / `variant` / `tone` / `surface`). See [Prop naming conventions](/extending/prop-naming-conventions) for the canonical vocabulary, alias matrix, and decision tree.