Blockquote

Blockquote component is used to display quotations with optional citation. It supports multiple visual variants and colors for different contexts.

import { Blockquote } from "@ninna-ui/primitives"

pnpm add @ninna-ui/primitives

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Blockquote component to display quotations.

import { Blockquote } from "@ninna-ui/primitives";

export default function Example() {
  return (
    <Blockquote citeSource="Steve Jobs">
      The only way to do great work is to love what you do.
    </Blockquote>
  );
}

Basic

Default blockquote rendering.

The only way to do great work is to love what you do.

Variants

Different visual styles for blockquotes.

Outline (default)

A simple quote with just a left border.

Solid

A quote with background color and left border.

Soft

A quote with full border and background.

Colors

Blockquotes with different color variants.

Neutral color quote

Primary color quote

Secondary color quote

Accent color quote

Info color quote

Success color quote

Warning color quote

Danger color quote

Citation

Blockquotes with citation source.

The only way to do great work is to love what you do.
— Steve Jobs

Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world.
— Albert Einstein

There is no greater agony than bearing an untold story inside you.
— Maya Angelou, I Know Why the Caged Bird Sings

With Icon

Blockquotes with decorative quote icon.

Be yourself; everyone else is already taken.
— Oscar Wilde

The secret of getting ahead is getting started.
— Mark Twain

Use Cases

Real-world examples of Blockquote component usage.

Testimonial

This product has transformed how our team collaborates. The intuitive interface and powerful features have increased our productivity by 40%.
— Sarah Johnson, CEO at TechCorp

Article Quote

In his famous speech, the author emphasized the importance of perseverance:

Success is not final, failure is not fatal: it is the courage to continue that counts.

This message resonated with audiences worldwide.

Important Note

Please note that this feature is currently in beta. Some functionality may change before the final release.

Success Highlight

Your application has been successfully submitted. You will receive a confirmation email within 24 hours.

Critical Information

Breaking changes: The API endpoint has been deprecated. Please migrate to the new v2 endpoint before March 2025.

API Reference

Complete list of props for the Blockquote component.

Props

Prop	Type	Default	Description
`color`	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'`	`'neutral'`	Color variant of the blockquote
`variant`	`'outline' \| 'solid' \| 'soft'`	`'outline'`	Visual style variant
`cite`	`string`	-	URL of the citation source (for the cite attribute)
`citeSource`	`ReactNode`	-	Citation author/source to display
`showIcon`	`boolean`	`false`	Whether to show a quote icon
`icon`	`ReactNode`	-	Custom quote icon
`className`	`string`	-	Additional CSS classes

Accessibility

Semantic HTML: Uses native blockquote element for proper semantics
Citation support: Supports cite attribute for source URL
Footer element: Uses footer for citation display
Color contrast: All color variants meet WCAG AA contrast requirements
Screen readers: Quote content is properly announced by screen readers