Shadcn Marker

What is Shadcn Marker?

In UI terms, a marker is one line of secondary text with an optional glyph in front of it. Shadcn Marker fixes that structure so you stop rebuilding it in every file: Marker is the flex row, MarkerIcon is the icon slot, and MarkerContent is the text. MarkerIcon is aria-hidden, so the glyph stays decorative and MarkerContent carries the meaning of the row.

The variant prop takes 3 values. Default is a plain row. Separator draws a hairline rule on both sides of the label, so a divider can read Planning or Verify instead of nothing. Border adds a rule under the row, which turns a short list into ruled lines. The 6 components here show all 3, with icons, status badges, a step that is still running, and markers rendered as links and as a button.

Why Use Shadcn Marker?

Agent consoles, chat threads, and activity feeds are mostly made of these rows, and writing them by hand means re-deciding icon size, text color, and row rhythm in each file until they drift apart. Marker moves those decisions into the style layer. MarkerIcon never shrinks and MarkerContent is min-width zero with word breaking, so a long file path wraps inside the row instead of widening it.

The same rows are what the paid blocks are assembled from. 14 of the 17 blocks in AI and Agents import Marker directly, 11 in AI Chat and 3 in Agent Activity. The examples on this page are the row on its own; those blocks are the screen around it, with approval steps, Summary, Detailed and Raw log views, and a run outcome report.

Shadcn Marker Features

• 3 Variants. One variant prop switches the row between a plain line, a labeled separator with a rule on each side, and a bordered row with a rule underneath.
• Decorative Icon Slot. MarkerIcon holds an icon or a Shadcn Spinner and is aria-hidden by construction, so a screen reader reads the content text once and never announces the glyph.
• Per-Style Icon Sizing. An icon that carries no size class of its own takes the size the active style defines, so the same markup reads correctly in the compact styles and the roomy ones.
• Long Text Handling. MarkerContent is min-width zero and breaks long words, so a file path, a URL, or a command wraps inside the row rather than pushing it past its container.
• Polymorphic Root. Render the row as an anchor or a button with render in the Base UI build or asChild in the Radix UI build. An anchor root picks up an underline and a hover color from the style layer.
• Shadcn Create Compatible. All 8 Shadcn Create styles (Vega, Nova, Maia, Lyra, Mira, Luma, Sera, and Rhea) and the Radius, Font Family, and Color Scale controls apply to marker previews and to the code you export.

Shadcn Marker in Chat and Agent Interfaces

In a chat thread, markers are the lines that are not messages: a system note, a tool the assistant just called, a dated divider between sessions. They sit between Shadcn Message rows and Shadcn Bubble turns without competing with them, because the muted small scale reads as chrome rather than as content. Keep a labeled divider as a plain marker and do not give it role="separator", since a separator takes its name from aria-label and treats its contents as presentational, which would drop the visible label.

In a run panel, wrap the column in a Shadcn Card, group the phases with separator markers, and put a Shadcn Spinner in the icon slot of the step that is still running, with role="status" on that row. Status color belongs on a Shadcn Badge inside the content rather than on the row text, so the row keeps the same muted scale in every style. For a long log, a Shadcn Scroll Area bounds the height without changing the rows.