Astryx Blockquote

Component 2

About

Blockquote displays quoted content, testimonials, or excerpts with an accent-colored left border and secondary text color, from Meta's Astryx design system. Renders semantic <blockquote> markup and supports an optional cite attribution rendered in a <footer> with <cite>.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Astryx Blockquote to your project and fits it to your theme.

Code

How Astryx Blockquote is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import Blockquote from '@/components/ui/astryx-blockquote';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {Stack} from '@astryxdesign/core/Layout';

export default function BlockquoteShowcase() {
  return (
    <Theme theme={neutralTheme}>
      <div
        style={{
          minHeight: '100dvh',
          display: 'grid',
          placeItems: 'center',
          padding: 24,
        }}>
        <Stack direction="vertical" gap={4} style={{width: 500}}>
          <Blockquote>
            Design is not just what it looks like and feels like. Design is how
            it works.
          </Blockquote>
          <Blockquote cite="Steve Jobs">
            The people who are crazy enough to think they can change the world
            are the ones who do.
          </Blockquote>
        </Stack>
      </div>
    </Theme>
  );
}