Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Anatomy
  • Examples
  • Quoted content
  • Recommendations
  • Usage boundaries
  • API reference

Typography

Blockquote

Groups a quotation with attribution outside the quoted text.

idle

Usage

import {
	Blockquote,
	BlockquoteAttribution,
	BlockquoteContent,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<Blockquote>
	<BlockquoteContent />
	<BlockquoteAttribution />
</Blockquote>

Examples

Quoted content

Recommendations

GuidancePractice
Do

Keep the quotation intact and put attribution outside the quoted text.

Usage boundaries

GuidanceBoundary
Scope

Use ordinary text for emphasis or summaries. Blockquote represents another source's words.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
BlockquoteBlockquoteProps<figure>Groups the quotation and its optional attribution.
BlockquoteContentBlockquoteContentProps<blockquote>Contains the quotation. Native cite may identify its source URL.
BlockquoteAttributionBlockquoteAttributionProps<figcaption>Names the author or work outside the quoted content.
PreviousStackNextCitation
We stopped planning around release day. Shipping became the boring part of the week.
Maya Chen, head of platform
Whenever the system can safely determine a UI decision from context, it should determine it instead of exposing another choice.
Mizen UI architecture