Blockquote

A styled quotation block with optional author and source attribution.

$ npx @beaket/ui add blockquote

Simplicity is the ultimate sophistication when every detail serves a purpose and nothing distracts from what truly matters.

Source

import { Blockquote } from "@/components/ui/blockquote";

const args = {
  children:
    "Simplicity is the ultimate sophistication when every detail serves a purpose and nothing distracts from what truly matters.",
};

export default function Example() {
  return <Blockquote {...args} />;
}

Examples

All Variants

Simplicity is the ultimate sophistication.

Good design is as little design as possible.
Dieter Rams

Clarity over decoration. Function before form. Every pixel accountable.
Product TeamDesign Lead

Source

import { Blockquote } from "@/components/ui/blockquote";

export default () => (
  <div className="space-y-6">
    <Blockquote>Simplicity is the ultimate sophistication.</Blockquote>
    <Blockquote author="Dieter Rams">Good design is as little design as possible.</Blockquote>
    <Blockquote author="Product Team" authorTitle="Design Lead">
      Clarity over decoration. Function before form. Every pixel accountable.
    </Blockquote>
  </div>
);

Props

Name	Type	Default	Description
cite	string \| undefined	—	URL source for the quote
author	string \| undefined	—	Name of the person being quoted
authorTitle	string \| undefined	—	Title or role of the author