Blockquote

A quotation block with an accent rule and optional attribution.

The cosmos is within us. We are made of star-stuff. We are a way for the universe to know itself.Carl Sagan, Cosmos

import { Blockquote } from "astralis-ui";

export function BlockquoteDemo() {
  return (
    <Blockquote cite="Carl Sagan, Cosmos" maxW="md">
      The cosmos is within us. We are made of star-stuff. We are a way for the
      universe to know itself.
    </Blockquote>
  );
}

Import#

import { Blockquote } from "astralis-ui";

Variants#

plain is just the leading rule; subtle adds a tinted panel. The rule recolors via the borderColor Box prop.

plain — a leading rule and nothing else.

subtle — the rule plus a tinted panel behind the quote.

The rule color is just a Box prop — recolor it with borderColor.

import { Blockquote, VStack } from "astralis-ui";

export function BlockquoteVariants() {
  return (
    <VStack gap="5" alignItems="stretch" w="full" maxW="md">
      <Blockquote variant="plain">
        plain — a leading rule and nothing else.
      </Blockquote>
      <Blockquote variant="subtle">
        subtle — the rule plus a tinted panel behind the quote.
      </Blockquote>
      <Blockquote variant="subtle" borderColor="brand-stroke">
        The rule color is just a Box prop — recolor it with borderColor.
      </Blockquote>
    </VStack>
  );
}

Attribution#

cite renders a visible attribution line (an actual <cite> element); citeUrl sets the semantic cite attribute for machines:

<Blockquote cite="Carl Sagan, Cosmos" citeUrl="https://en.wikipedia.org/wiki/Cosmos_(Sagan_book)">
  The cosmos is within us.
</Blockquote>

Props#

Blockquote extends Box.

Prop	Type	Default	Description
`variant`	`"plain" \| "subtle"`	`"plain"`	Rule only, or rule plus tinted panel.
`cite`	`ReactNode`	—	Visible attribution line below the quote.
`citeUrl`	`string`	—	The blockquote element's native `cite` attribute.