Blockquote

Blockquote highlights a quotation or important passage.

Examples

Properties

Playground

Basics

Frames a simple pull quote with author details.

Loading demo…

import { Blockquote } from '@plocks/ui';

const AUTHOR = {
  name: 'Jamie Ortega',
  title: 'Principal Product Designer',
};

export function Demo() {
  return (
    <Blockquote author={AUTHOR}>
      The Blockquote component keeps editorial typography consistent so our brand voice always feels elevated.
    </Blockquote>
  );
}

Testimonial card

Full-fidelity testimonial with avatar, organization, rating, verified badge, and shadow.

Loading demo…

import { Blockquote } from '@plocks/ui';
import { BrandIcon } from '@plocks/brands';

export function Demo() {
  return (
    <Blockquote
      variant="testimonial"
      author={{
        name: 'Priya Shah',
        title: 'CTO',
        organization: 'Northwind Labs',
        avatar: require('../../../../assets/avatars/avatar-2.png'),
      }}
      rating={{ value: 5, max: 5, showValue: true }}
      source={{
        name: 'Google Business',
        icon: <BrandIcon brand="google" size="sm" />,
      }}
      date="2024-06-12"
      verified
    >
      plocks helped us ship an entirely new settings experience in a single sprint. The components feel native on every platform.
    </Blockquote>
  );
}

Maps social-style quotes into Blockquote with avatars, verification, and network metadata.

Loading demo…

import { Block, Blockquote } from '@plocks/ui';
import { BrandIcon } from '@plocks/brands';

export function Demo() {
  return (
    <Block>
      <Blockquote
        variant="minimal"
        author={{
          name: '@futureshaper',
          avatar: require('../../../../assets/avatars/avatar-3.png'),
        }}
        source={{
          name: 'X (Twitter)',
          icon: <BrandIcon brand="x" size="sm" />,
          url: 'https://x.com/plocks_ui',
        }}
        date="3h"
        verified
      >
        The future is going to be wild 🚀
      </Blockquote>

      <Blockquote
        variant="testimonial"
        author={{
          name: 'Jordan Reeves',
          title: 'Developer Advocate',
          avatar: require('../../../../assets/avatars/avatar-1.png'),
        }}
        source={{
          name: 'LinkedIn',
          icon: <BrandIcon brand="linkedin" size="sm" />,
        }}
        date="1 day ago"
      >
        Just finished testing the new plocks UI library. The component quality and developer experience is outstanding!
      </Blockquote>

      <Blockquote
        variant="testimonial"
        author={{
          name: 'Sasha Lin',
          title: 'Staff Engineer',
        }}
        source={{
          name: 'GitHub',
          icon: <BrandIcon brand="github" size="sm" />,
        }}
        rating={{ value: 5, max: 5, showValue: true }}
        verified
      >
        This library has saved us countless hours of development time. Clean API, great documentation, and excellent TypeScript support.
      </Blockquote>
    </Block>
  );
}

Attribution side

Attribution sits on the right by default. Use attributionAlignment to move the avatar, name, and metadata to the left or center it under the quote.

Loading demo…

import { Block, Blockquote, Text } from '@plocks/ui';

import { AUTHOR, QUOTE, SOURCE } from './data';

export function Demo() {
  return (
    <Block>
      <Block>
        <Text variant="h5" fw="semibold">
          Right (default)
        </Text>
        <Blockquote
          variant="testimonial"
          shadow
          author={AUTHOR}
          source={SOURCE}
        >
          {QUOTE}
        </Blockquote>
      </Block>

      <Block>
        <Text variant="h5" fw="semibold">
          Left
        </Text>
        <Blockquote
          variant="testimonial"
          shadow
          attributionAlignment="left"
          author={AUTHOR}
          source={SOURCE}
        >
          {QUOTE}
        </Blockquote>
      </Block>

    </Block>
  );
}

Variants overview

Renders each preset to compare layout, alignment, and metadata options.

Loading demo…

import { Block, Blockquote, Text } from '@plocks/ui';
import { BrandIcon } from '@plocks/brands';

export function Demo() {
  return (
    <Block>
      <Block>
        <Text variant="h5" fw="semibold">
          Default
        </Text>
        <Blockquote author={{ name: 'Anonymous' }}>
          The best way to predict the future is to create it.
        </Blockquote>
      </Block>

      <Block>
        <Text variant="h5" fw="semibold">
          Testimonial
        </Text>
        <Blockquote
          variant="testimonial"
          author={{
            name: 'Sarah Johnson',
            title: 'Marketing Director',
            avatar: require('../../../../assets/avatars/avatar-4.png'),
          }}
          rating={{ value: 4, max: 5 }}
          shadow
        >
          Great experience with this service. The team was professional and delivered quality results.
        </Blockquote>
      </Block>

      <Block>
        <Text variant="h5" fw="semibold">
          Featured
        </Text>
        <Blockquote
          variant="featured"
          alignment="center"
          author={{
            name: 'Albert Einstein',
            title: 'Theoretical Physicist',
          }}
        >
          Imagination is more important than knowledge.
        </Blockquote>
      </Block>

      <Block>
        <Text variant="h5" fw="semibold">
          Minimal
        </Text>
        <Blockquote
          variant="minimal"
          quoteIconPosition="none"
          author={{ name: '@username' }}
          source={{ name: 'X (Twitter)', icon: <BrandIcon brand="x" size="sm" /> }}
          date="2 hours ago"
        >
          Just discovered this amazing new feature! 🚀
        </Blockquote>
      </Block>
    </Block>
  );
}