Marker

1
import {
2
  Marker,
3
  MarkerContent,
4
  MarkerIcon,
5
} from "@/components/features/pxl/conversation/marker";
6
import { Spinner } from "@/components/ui/pxl/spinner";
7

8
export default function MarkerDemo() {
9
  return (
10
    <div className="flex w-full max-w-sm flex-col gap-8 py-12">
11
      <Marker>
12
        <MarkerIcon>
13
          <svg
14
            xmlns="http://www.w3.org/2000/svg"
15
            fill="currentColor"
16
            viewBox="0 0 24 24"
17
          >
18
            <path d="M8 22H4v-2h4v2Zm-4-2H2v-4h2v4Zm6 0H8v-4h2v4Zm7-1h-5v-2h5v2Zm2-2h-2v-5h2v5ZM8 16H4v-2h4v2Zm-1-4H5V2h2v10Zm13-2h-4V8h4v2Zm-4-2h-2V4h2v4Zm6 0h-2V4h2v4Zm-2-4h-4V2h4v2Z" />
19
          </svg>
20
        </MarkerIcon>
21
        <MarkerContent>Switched to a new branch</MarkerContent>
22
      </Marker>
23
      <Marker role="status">
24
        <MarkerIcon>
25
          <Spinner />
26
        </MarkerIcon>
27
        <MarkerContent className="shimmer">Thinking...</MarkerContent>
28
      </Marker>
29
      <Marker variant="separator">
30
        <MarkerContent>Conversation compacted</MarkerContent>
31
      </Marker>
32
      <Marker>
33
        <MarkerIcon>
34
          <svg
35
            xmlns="http://www.w3.org/2000/svg"
36
            fill="currentColor"
37
            viewBox="0 0 24 24"
38
          >
39
            <path d="M22 22h-2v-2h2v2Zm-2-2h-2v-2h2v2Zm-6-2H6v-2h8v2Zm4 0h-2v-2h2v2ZM6 16H4v-2h2v2Zm10 0h-2v-2h2v2ZM4 14H2V6h2v8Zm14 0h-2V6h2v8ZM6 6H4V4h2v2Zm10 0h-2V4h2v2Zm-2-2H6V2h8v2Z" />
40
          </svg>
41
        </MarkerIcon>
42
        <MarkerContent>Explored 4 files</MarkerContent>
43
      </Marker>
44
    </div>
45
  );
46
}

pnpm dlx shadcn@latest add pxl-ui/registry/conversation/marker

1
import { mergeProps } from "@base-ui/react/merge-props";
2
import { useRender } from "@base-ui/react/use-render";
3
import { cva, type VariantProps } from "class-variance-authority";
4
import type { ComponentProps } from "react";
5

6
import { cn } from "@/lib/utils";
7

8
const markerVariants = cva(
9
  "group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
10
  {
11
    variants: {
12
      variant: {
13
        default: "",
14
        separator:
15
          "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
16
        border: "border-b border-border pb-2",
17
      },
18
    },
19
  },
20
);
21

22
function Marker({
23
  className,
24
  variant = "default",
25
  render,
26
  ...props
27
}: useRender.ComponentProps<"div"> & VariantProps<typeof markerVariants>) {
28
  return useRender({
29
    defaultTagName: "div",
30
    props: mergeProps<"div">(
31
      {
32
        className: cn(markerVariants({ variant, className })),
33
      },
34
      props,
35
    ),
36
    render,
37
    state: {
38
      slot: "marker",
39
      variant,
40
    },
41
  });
42
}
43

44
function MarkerIcon({ className, ...props }: ComponentProps<"span">) {
45
  return (
46
    <span
47
      data-slot="marker-icon"
48
      aria-hidden="true"
49
      className={cn(
50
        "size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4",
51
        className,
52
      )}
53
      {...props}
54
    />
55
  );
56
}
57

58
function MarkerContent({ className, ...props }: ComponentProps<"span">) {
59
  return (
60
    <span
61
      data-slot="marker-content"
62
      className={cn(
63
        "min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
64
        className,
65
      )}
66
      {...props}
67
    />
68
  );
69
}
70

71
export { Marker, MarkerContent, MarkerIcon, markerVariants };

import { Marker, MarkerContent, MarkerIcon } from "@/components/features/pxl/conversation/marker"

<Marker>
  <MarkerIcon>
    <CheckIcon />
  </MarkerIcon>
  <MarkerContent>Explored 4 files</MarkerContent>
</Marker>

Use the following composition to build a marker:

Marker
├── MarkerIcon
└── MarkerContent

• Inline marker, bordered row, and labeled separator variants
• Decorative icon slot that is hidden from assistive tech
• Polymorphic root via render for link and button markers
• Pairs with the shimmer utility for streaming status text
• Customizable styling through the className prop on every part

Use variant to switch between an inline marker, bordered row, and labeled separator.

Set role="status" and include a Spinner for streaming or in-progress markers so updates are announced.

Add the shimmer utility class to MarkerContent for an animated streaming-text effect. The utility ships with the shadcn package — see the shimmer docs for installation.

Use the separator variant for labeled dividers, such as dates or section breaks, in a conversation.

Use the border variant for status rows that should keep the default marker alignment while separating the next row.

Use MarkerIcon to render an icon alongside the content. Use flex-col to stack the icon above the content.

Turn a marker into a link or button with the render prop on Marker.

import { Marker, MarkerContent } from "@/components/features/pxl/chats/marker"

export function MarkerLinkDemo() {
  return (
    <Marker render={<a href="#" />}>
      <MarkerContent>View the pull request</MarkerContent>
    </Marker>
  )
}

Marker is presentational by default. The correct semantics depend on how you use it, so choose the role based on intent rather than relying on a single default.

For streaming or progress markers such as “Thinking…” or a running tool, set role="status" so assistive tech announces the update as it appears. Marker forwards role to the underlying element.

A separator that carries text, such as a date or a section label, needs no role. The divider lines are decorative CSS pseudo-elements, and the text is announced as ordinary content.

<Marker variant="separator">
  <MarkerContent>Today</MarkerContent>
</Marker>

A bordered marker keeps the same semantics as the default marker. The bottom border is decorative, so choose role="status", render, or no role based on the marker’s purpose.

<Marker variant="border">
  <MarkerIcon>
    <FileTextIcon />
  </MarkerIcon>
  <MarkerContent>Opened implementation notes</MarkerContent>
</Marker>

MarkerIcon is decorative and hidden from assistive tech with aria-hidden, so the adjacent MarkerContent carries the meaning. For an icon-only marker, provide an aria-label or visible text so it is not announced as empty.

<Marker aria-label="Synced">
  <MarkerIcon>
    <CheckIcon />
  </MarkerIcon>
</Marker>

When a marker links or triggers an action, render it as a real <button> or <a> with the render prop so it is focusable and exposes the correct role. The accessible name comes from the marker text.

<Marker render={<a href="/files" />}>
  <MarkerIcon>
    <FileTextIcon />
  </MarkerIcon>
  <MarkerContent>Explored 4 files</MarkerContent>
</Marker>

The root marker element. The file also exports markerVariants for composing the marker styles into custom components.

A decorative icon slot. Hidden from assistive tech with aria-hidden.

The marker text content.