Pillar UI React Blockquote Component documentation

Props

The Blockquote component is a versatile co mponent used to display quoted text with an optional citation. It allows you to customize various aspects of the blockquote, including color, size, corner style, and more.

Corner

Type: string Default: md Options: sharp | xs | sm | md | lg | circle | full The size prop determines the corners of the Blockquote. It accepts any of the Size types defined in our library see options above. If not provided, it defaults to the md size.

The corner prop determines the border radius of the Blockquote. It accepts any of the Corner types defined in your library, including (sharp, xs, sm, md, xl, full, circle), and pill. If not provided, it defaults to the square corner.

Example usage:

function CornerCorners() {
  return (
    <div className="l_f-md">
      <Blockquote corner="sharp" cite="John Doe">
        This is the quoted text.
      </Blockquote>
      <Blockquote corner="xs" cite="John Doe">
        This is the quoted text.
      </Blockquote>
      <Blockquote corner="sm" cite="John Doe">
        This is the quoted text.
      </Blockquote>
      <Blockquote corner="md" cite="John Doe">
        This is the quoted text.
      </Blockquote>
      <Blockquote corner="lg" cite="John Doe">
        This is the quoted text.
      </Blockquote>
      <Blockquote corner="xl" cite="John Doe">
        This is the quoted text.
      </Blockquote>
      <Blockquote corner="full" cite="John Doe">
        This is the quoted text.
      </Blockquote>
    </div>
  )
}

Color

Type: Color (string) Default: primary Options: danger | warning | success | primary | secondary | bg

You can customize the color of the blockquote by passing a color prop to the Blockquote component.

import { Blockquote } from '@pillar-ui/core'

function BlockquoteColor() {
  return (
    <div className="l_f-md">
      <Blockquote color="dan" cite="John Doe">
        This is the quoted text.
      </Blockquote>
      <Blockquote color="war" cite="John Doe">
        This is the quoted text.
      </Blockquote>
      <Blockquote color="suc" cite="John Doe">
        This is the quoted text.
      </Blockquote>
      <Blockquote color="pri" cite="John Doe">
        This is the quoted text.
      </Blockquote>
      <Blockquote color="sec" cite="John Doe">
        This is the quoted text.
      </Blockquote>
      <Blockquote color="bg" cite="John Doe">
        This is the quoted text.
      </Blockquote>
    </div>
  )
}

Size

Type: Size (string) Default: md Options: 2xs | xs | sm | md | lg | xl | 2xl

You can customize the size of the blockquote by passing a size prop to the Blockquote component.

import { Blockquote } from '@pillar-ui/core'

function BlockquoteSize() {
  return (
    <div className="l_f-md">
      <Blockquote size="2xs" cite="John Doe">
        This is the quoted text.
      </Blockquote>
      <Blockquote size="xs" cite="John Doe">
        This is the quoted text.
      </Blockquote>
      <Blockquote size="sm" cite="John Doe">
        This is the quoted text.
      </Blockquote>
      <Blockquote size="md" cite="John Doe">
        This is the quoted text.
      </Blockquote>
      <Blockquote size="lg" cite="John Doe">
        This is the quoted text.
      </Blockquote>
      <Blockquote size="xl" cite="John Doe">
        This is the quoted text.
      </Blockquote>
      <Blockquote size="2xl" cite="John Doe">
        This is the quoted text.
      </Blockquote>
    </div>
  )
}

Cite

The Blockquote.Cite subcomponent is a specialized element for attributing the quoted content to its source.

• title (string): The text of the citation (e.g., author name, source title).
• align (start| center| end) default start: Controls the horizontal alignment of the citation (start, center, or end; default is start).

** Example Usage **

import { Blockquote } from '@pillar-ui/core'

function BlockquoteCite() {
  return (
    <div className="l_f-md">
      <Blockquote color="dan">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        {/* ... other text ... */}
        <Blockquote.Cite title="Hello world" />
      </Blockquote>

      {/* ... other examples with alignment */}
    </div>
  )
}

Use Case

The blockquote component is designed to create stylish and customizable blockquote elements in your web applications. It's useful for emphasizing quoted content in an elegant manner.

Troubleshooting

If you encounter any issues or have questions related to the blockquote component, please refer to the documentation or seek assistance on the project's GitHub repository.