Blockquote

v0.4.0

Styled quote component with 3 variants and optional author attribution.

Live Demo

Default Variant

The important thing is not to stop questioning. Curiosity has its own reason for existing.

— Albert Einstein, On Science

Accent Variant

Innovation distinguishes between a leader and a follower.

— Steve Jobs

Subtle Variant

We delight in the beauty of the butterfly, but rarely admit the changes it has gone through to achieve that beauty.

— Maya Angelou

Installation

npm install noorui-rtl

Usage

import { Blockquote } from 'noorui-rtl'

<Blockquote author="Author Name" source="Book Title">
  Quote text goes here.
</Blockquote>

// With citation URL
<Blockquote
  author="Author Name"
  source="Article Title"
  cite="https://example.com"
  variant="accent"
>
  Quote with clickable source.
</Blockquote>

Props

Name	Type	Default	Description
`author`	`string`	`undefined`	Quote author name
`source`	`string`	`undefined`	Source/book/article title
`cite`	`string`	`undefined`	URL to the source
`variant`	`'default' \| 'accent' \| 'subtle'`	`'default'`	Visual variant (default, accent, or subtle)
`className`	`string`	`undefined`	Additional CSS classes to apply

Best Practices

Do

✓ Always provide attribution with author and source when known
✓ Use the cite prop with a valid URL for accessibility and SEO
✓ Choose variants that match your content hierarchy (accent for emphasis, subtle for secondary)
✓ Keep quotes concise and impactful - break long quotes into paragraphs
✓ Use semantic HTML for proper quote markup

Don't

✗ Don't use blockquotes for non-quote content like tips or warnings
✗ Don't omit attribution for copyrighted or published quotes
✗ Don't use accent variant everywhere - it loses impact
✗ Don't include entire paragraphs - extract the key message
✗ Don't forget to escape special characters in quotes