Get Started
Components
- Alert
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Checkbox Group
- ComboBox
- Command
- Data Table
- Date Field
- Date Picker
- Date Range Picker
- Dialog
- Disclosure
- Disclosure Group
- Drawer
- Empty
- Field
- File Trigger
- Form
- Grid List
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- ListBox
- Menu
- Number Field
- Pagination
- Popover
- Progress Bar
- Radio Group
- Range Calendar
- Resizable
- Search Field
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Tag Group
- Text Field
- Textarea
- Time Field
- Toast
- Toggle Button
- Toggle Button Group
- Tooltip
- Tree
- Typography
AI Elements
import {
Source,
Sources,
SourcesContent,
SourcesTrigger,
} from "@/components/ai-elements/sources"
export function SourcesDemo() {
const sources = [
{
id: "1",
title: "React Documentation",
href: "https://react.dev",
},
{
id: "2",
title: "MDN Web Docs",
href: "https://developer.mozilla.org",
},
{
id: "3",
title: "TypeScript Handbook",
href: "https://www.typescriptlang.org/docs",
},
]
return (
<div className="w-full max-w-2xl">
<Sources>
<SourcesTrigger count={sources.length} />
<SourcesContent>
{sources.map((source) => (
<Source key={source.id} href={source.href} title={source.title} />
))}
</SourcesContent>
</Sources>
</div>
)
}
Installation
CLI
Manual
pnpmnpmyarnbunpnpm dlx shadcn@latest add sources
Usage
import {
Sources,
SourcesTrigger,
SourcesContent,
Source,
} from "@/components/ai-elements/sources"<Sources>
<SourcesTrigger count={3} />
<SourcesContent>
<Source href="https://example.com" title="Example Source" />
<Source href="https://example.org" title="Another Source" />
</SourcesContent>
</Sources>Examples
Default
import {
Source,
Sources,
SourcesContent,
SourcesTrigger,
} from "@/components/ai-elements/sources"
export function SourcesDemo() {
const sources = [
{
id: "1",
title: "React Documentation",
href: "https://react.dev",
},
{
id: "2",
title: "MDN Web Docs",
href: "https://developer.mozilla.org",
},
{
id: "3",
title: "TypeScript Handbook",
href: "https://www.typescriptlang.org/docs",
},
]
return (
<div className="w-full max-w-2xl">
<Sources>
<SourcesTrigger count={sources.length} />
<SourcesContent>
{sources.map((source) => (
<Source key={source.id} href={source.href} title={source.title} />
))}
</SourcesContent>
</Sources>
</div>
)
}
const sources = [
{ id: "1", title: "React Documentation", href: "https://react.dev" },
{ id: "2", title: "MDN Web Docs", href: "https://developer.mozilla.org" },
{ id: "3", title: "TypeScript Handbook", href: "https://www.typescriptlang.org/docs" },
]
export default function Example() {
return (
<Sources>
<SourcesTrigger count={sources.length} />
<SourcesContent>
{sources.map((source) => (
<Source key={source.id} href={source.href} title={source.title} />
))}
</SourcesContent>
</Sources>
)
}API Reference
Sources
Container for sources.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Custom CSS classes |
SourcesTrigger
Trigger button to expand sources.
| Prop | Type | Default | Description |
|---|---|---|---|
count | number | - | Number of sources |
children | ReactNode | - | Custom trigger content |
className | string | - | Custom CSS classes |
SourcesContent
Container for source list.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Custom CSS classes |
Source
Individual source link.
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | - | Source URL |
title | string | - | Source title |
children | ReactNode | - | Custom content |
className | string | - | Custom CSS classes |