Components
Loading preview...
Here is Inline Citation component
npx shadcn@latest add https://21st.dev/r/vercel/inline-citation'use client';
import * as React from 'react';
import {
InlineCitation,
InlineCitationCard,
InlineCitationCardTrigger,
InlineCitationCardBody,
InlineCitationCarousel,
InlineCitationCarouselContent,
InlineCitationCarouselItem,
InlineCitationCarouselPrev,
InlineCitationCarouselNext,
InlineCitationCarouselIndex,
InlineCitationSource,
InlineCitationQuote,
InlineCitationCarouselHeader,
} from '@/components/ui/inline-citation';
export default function DemoInlineCitation() {
const sources = [
{
title: 'OpenAI',
url: 'https://openai.com',
description: 'OpenAI is an AI research and deployment company. Our mission is to ensure that artificial general intelligence benefits all of humanity.',
},
{
title: 'React',
url: 'https://react.dev',
description: 'A JavaScript library for building user interfaces, enabling developers to create large web applications that can change data without reloading the page.',
},
{
title: 'Tailwind CSS',
url: 'https://tailwindcss.com',
description: 'A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.',
},
{
title: 'Next.js',
url: 'https://nextjs.org',
description: 'The React Framework for Production. Next.js gives you the best developer experience with all the features you need for production.',
},
{
title: 'Vercel',
url: 'https://vercel.com',
description: 'Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.',
},
];
return (
<div className="p-8 space-y-4">
<p>
Here is an inline citation example{' '}
<InlineCitation>
<InlineCitationCard>
<InlineCitationCardTrigger sources={sources.map(s => s.url)} />
<InlineCitationCardBody>
<InlineCitationCarousel>
<div className="absolute top-0 left-0 right-0 z-10">
<InlineCitationCarouselHeader>
<InlineCitationCarouselPrev />
<InlineCitationCarouselIndex />
<InlineCitationCarouselNext />
</InlineCitationCarouselHeader>
</div>
<InlineCitationCarouselContent className="pt-12">
{sources.map((source, idx) => (
<InlineCitationCarouselItem key={idx}>
<InlineCitationSource
title={source.title}
url={source.url}
description={source.description}
/>
<InlineCitationQuote>
Example quote from {source.title}.
</InlineCitationQuote>
</InlineCitationCarouselItem>
))}
</InlineCitationCarouselContent>
</InlineCitationCarousel>
</InlineCitationCardBody>
</InlineCitationCard>
</InlineCitation>
. You can hover to view more sources.
</p>
</div>
);
}