Astryx Citation

Component

About

Citations display inline references to external sources. Use them to attribute information within AI-generated responses, articles, or anywhere provenance and source links are needed.

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

Code

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

Usage.tsx

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {Citation} from '@/components/ui/astryx-citation';
import {Stack} from '@astryxdesign/core/Layout';
import {Text} from '@astryxdesign/core/Text';

function CitationShowcase() {
  return (
    <Stack direction="vertical" gap={6}>
      <Stack direction="vertical" gap={2}>
        <Text type="supporting" color="secondary">
          Label variant
        </Text>
        <Stack direction="horizontal" gap={2} style={{flexWrap: 'wrap'}}>
          <Citation
            source={{title: 'React Documentation', url: 'https://react.dev'}}
            number={1}
            variant="label"
          />
          <Citation
            source={{
              title: 'GitHub',
              url: 'https://github.com',
              icon: 'https://cdn.21st.dev/assets/mirror/6a/6a9577cd4f7fa6b75bde1025af85b944e9dd1388373b55ccba6e9f80ac2eae60.svg',
            }}
            number={2}
            variant="label"
          />
          <Citation
            source={{title: 'Internal reference'}}
            number={3}
            variant="label"
          />
        </Stack>
      </Stack>
      <Stack direction="vertical" gap={2}>
        <Text type="supporting" color="secondary">
          Number variant
        </Text>
        <Stack direction="horizontal" gap={2}>
          <Citation
            source={{
              title: 'TypeScript Handbook',
              url: 'https://typescriptlang.org',
            }}
            number={1}
            variant="number"
          />
          <Citation
            source={{
              title: 'MDN Web Docs',
              url: 'https://developer.mozilla.org',
            }}
            number={2}
            variant="number"
          />
          <Citation
            source={{title: 'W3C Specification'}}
            number={3}
            variant="number"
          />
        </Stack>
      </Stack>
    </Stack>
  );
}

export default function CitationShowcaseDemo() {
  return (
    <div
      data-astryx-theme="neutral"
      data-theme="light"
      style={{colorScheme: 'light', display: 'contents'}}>
      <CitationShowcase />
    </div>
  );
}