Default, separator, and border markers
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: The 3 variant shapes stacked with no icons: a plain line, a labeled divider and a line ruled underneath
When to use
- Agent run logs and tool call lists, one short line of status text per step
- Labeled dividers that split a transcript or run log into named phases
- Ruled summaries such as changed files, and rows that open a link or run an action
When not to use
- A bare rule under a section heading, or a centered label over a form divider: use the Separator component
- A complete run console with approval steps, log views or an outcome report: use the Agent Activity blocks
- Dated events or milestones joined by indicator dots and a connecting line: use the Timeline component
Agent notes
- Make a row a link or button with
renderon the base twin andasChildon the radix twin MarkerIconisaria-hiddenwith everything inside it, so theMarkerContenttext alone must say what the row means- An svg in
MarkerIcontakes each style's icon size only while it carries no size class of its own
https://web.dev.reui.io/components/marker/c-marker-1.mdget_example("c-marker-1")npx shadcn@latest add @reui/c-marker-1Shadcn Components in Marker Basic Variants
About Shadcn Marker Basic Variants
Default, separator, and border markers. Built with the Marker component. A free, open source shadcn marker example you can install with npx shadcn@latest add @reui/c-marker-1 and edit as your own code.
What You Can Build With Shadcn Marker Basic Variants
- Composes Marker, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-marker-1
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Marker Examples
- Tool Call Log Tool call log with icon markers
- Run Status Run status markers with a live step
- Phase Separators Agent run log grouped by phase separators
- Changed Files Changed files summary with border markers
- Links & Action Markers as links and as an action button
Related Shadcn Component Categories
Open-source shadcn menubar components for desktop navigation, editor menus, and app commands.
Open-source shadcn message components for chat transcripts, assistant replies, and support threads.
Open-source shadcn message scroller components for chat transcripts, streaming replies, and jump-to-latest scrolling.
Open-source shadcn native select components for lightweight selects, mobile-friendly forms, and basic option picking.
Open-source shadcn navigation menu components for site navigation, mega menus, and product navigation.
Open-source shadcn number field components for quantity pickers, pricing inputs, and step controls.
Frequently Asked Questions
When should I use Shadcn Marker Basic Variants?
Use it for the 3 variant shapes stacked with no icons: a plain line, a labeled divider and a line ruled underneath.
Shadcn Marker as a whole fits:
- Agent run logs and tool call lists, one short line of status text per step
- Labeled dividers that split a transcript or run log into named phases
- Ruled summaries such as changed files, and rows that open a link or run an action
For a bare rule under a section heading, or a centered label over a form divider, use the Separator component. For a complete run console with approval steps, log views or an outcome report, use the Agent Activity blocks. For dated events or milestones joined by indicator dots and a connecting line, use the Timeline component.
How do I install Shadcn Marker Basic Variants?
Is Shadcn Marker Basic Variants free to use?
Which components does Shadcn Marker Basic Variants use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.