Marker

Installation

uvx django_shadcn@latest add marker

Usage

<c-marker>
    <c-marker.icon>
        <c-icon name="check" />
    </c-marker.icon>
    <c-marker.content>Explored 4 files</c-marker.content>
</c-marker>

The icon slot is decorative and hidden from assistive technology, so the content has to carry the whole meaning on its own. Nothing here is stateful.

Variants

<c-marker variant="border">...</c-marker>
<c-marker variant="separator">
    <c-marker.content>Today</c-marker.content>
</c-marker>

separator draws its rules with before and after, so an icon inside it lands between the label and the left rule rather than at the start of the row. Date breaks usually read better without one.

Examples

Announcing a change

A marker that reports work in progress should be announced, not just drawn. role="status" reaches the root through the attributes, and the shimmer marks the text as live.

<c-marker role="status">
    <c-marker.icon>
        <c-icon name="loader-circle" class="animate-spin" />
    </c-marker.icon>
    <c-marker.content class="shimmer">Thinking</c-marker.content>
</c-marker>

shimmer is a utility in input.css, not part of the component. It works on any text element and turns itself off when the reader has asked for reduced motion.

Linking out

A marker can point somewhere. Put the link in the content rather than on the root, so only the words are clickable and the row keeps its layout.

<c-marker>
    <c-marker.icon>
        <c-icon name="check" />
    </c-marker.icon>
    <c-marker.content>
        <a href="/pull/482/">View the pull request</a>
    </c-marker.content>
</c-marker>

In a transcript

Between messages, a marker is the line that explains a gap.