Server Component · 0 KB client JS

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>
  );
}

The cosmos is within us. We are made of star-stuff.Carl Sagan, Cosmos

Quote

variant

citeUrl

import { Blockquote } from "astralis-ui";

<Blockquote
  cite="Carl Sagan, Cosmos"
>
  The cosmos is within us. We are made of star-stuff.
</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">
        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"`	The leading rule alone, or the rule on a tinted panel. Responsive.
`cite`	`ReactNode`	None	Visible attribution, rendered under the quote in a cite element.
`citeUrl`	`string`	None	URL of the source, set as the blockquote element's native cite attribute.