Dosu Logo
Home
Documents
sources
sources
Type
External
Status
Published
Created
Mar 17, 2026
Updated
Mar 17, 2026

import { SourcesSample } from "@/components/docs/samples/sources";

Getting Started#

Add sources#

<InstallCommand shadcn={["sources"]} />

Use in your application#

Pass Sources to MessagePrimitive.Parts:

import { Sources } from "@/components/assistant-ui/sources";

const AssistantMessage: FC = () => {
  return (
    <MessagePrimitive.Root className="...">
      <MessagePrimitive.Parts>
        {({ part }) => {
          if (part.type === "source") return <Sources {...part} />;
          return null;
        }}
      </MessagePrimitive.Parts>
    </MessagePrimitive.Root>
  );
};

Variants#

Use the variant prop to change the visual style. The default is outline.

<Source variant="outline" /> // Border (default)
<Source variant="ghost" /> // No background
<Source variant="muted" /> // Solid muted background
<Source variant="secondary" /> // Secondary background
<Source variant="info" /> // Blue
<Source variant="warning" /> // Amber
<Source variant="success" /> // Emerald
<Source variant="destructive" /> // Red

Sizes#

Use the size prop to change the size.

<Source size="sm" /> // Small
<Source size="default" /> // Default
<Source size="lg" /> // Large

API Reference#

Sources#

The default export used as a SourceMessagePartComponent. Renders a single source part when sourceType === "url". Also exposes compound sub-components for custom layouts.

PropTypeDefaultDescription
urlstring—The URL of the source (provided by the runtime)
titlestring | undefined—Display title; falls back to the domain if omitted
sourceTypestring—Must be "url" to render; other types are ignored

Compound sub-components#

import { Sources } from "@/components/assistant-ui/sources";

<Sources.Root href="https://example.com">
  <Sources.Icon url="https://example.com" />
  <Sources.Title>Example</Sources.Title>
</Sources.Root>
Sub-componentEquivalent named exportDescription
Sources.RootSourceRoot anchor element
Sources.IconSourceIconFavicon with domain initial fallback
Sources.TitleSourceTitleTruncated title text

Source#

Root container rendered as an <a> tag. Accepts all <a> props plus variant and size.

PropTypeDefaultDescription
hrefstring—URL the link points to
variant"outline" | "ghost" | "muted" | "secondary" | "info" | "warning" | "success" | "destructive""outline"Visual style
size"sm" | "default" | "lg""default"Size of the badge
targetstring"_blank"Link target
relstring"noopener noreferrer"Link rel attribute
asChildbooleanfalseRender as a child element using Radix Slot
classNamestring—Additional CSS classes

SourceIcon#

Displays the favicon for the given URL. Falls back to the domain initial inside a muted box when the favicon fails to load.

PropTypeDefaultDescription
urlstring—URL used to derive the favicon and fallback initial
classNamestring—Additional CSS classes applied to the <img> or fallback <span>

SourceTitle#

Truncated title text rendered as a <span>.

PropTypeDefaultDescription
childrenReactNode—Title content to display
classNamestring—Additional CSS classes (default max-width is 37.5rem)

sourceVariants#

The underlying CVA variant function used to generate badge class names. Use this when building custom source-like components that need to match the built-in styling.

import { sourceVariants } from "@/components/assistant-ui/sources";

<span className={sourceVariants({ variant: "info", size: "sm" })}>
  Custom badge
</span>

Composable API#

Use the named exports to build fully custom source layouts:

import { Source, SourceIcon, SourceTitle } from "@/components/assistant-ui/sources";

<Source href="https://example.com" variant="muted" className="gap-2">
  <SourceIcon url="https://example.com" className="size-4" />
  <SourceTitle className="max-w-none font-medium">Example</SourceTitle>
</Source>