Skip to content

[Toolkit][Shadcn] Add marker recipe - #3871

Open
ker0x wants to merge 1 commit into
symfony:3.xfrom
ker0x:feat/toolkit-shadcn-marker
Open

ker0x wants to merge 1 commit into
symfony:3.xfrom
ker0x:feat/toolkit-shadcn-marker

Conversation

@ker0x

@ker0x ker0x commented Sep 14, 2026

Copy link
Copy Markdown
Contributor
Q A
Bug fix? no
New feature? yes
Deprecations? no
Documentation? yes
Issues Part of #3233
License MIT

Adds the marker recipe to the Shadcn kit, porting Shadcn UI's Marker.

Marker displays an inline status, system note, bordered row, or labeled separator in a conversation — it composes well with the bubble recipe in a chat thread.

Components

Marker
├── Marker:Icon
└── Marker:Content
<twig:Marker variant="default">
    <twig:Marker:Icon>
        <twig:ux:icon name="lucide:check" />
    </twig:Marker:Icon>
    <twig:Marker:Content>Explored 4 files</twig:Marker:Content>
</twig:Marker>

Three variants are available via the variant prop:

Variant Description
default An inline marker for status, notes, and actions.
border A default marker with a bottom border under the row.
separator A centered label with divider lines on each side.

The root is polymorphic through the as prop (upstream's asChild), so a marker can render as a real a or button when it is interactive. Marker:Icon is decorative and carries aria-hidden="true", so Marker:Content holds the accessible name. RTL is supported through ltr:/rtl: class variants.

All upstream examples are ported as live-preview blocks in the recipe README.md (Variants, Status, Shimmer, Separator, Border, With Icon, Links and Buttons), plus the usual RTL section.

Notes for reviewers

  • Shimmer. Upstream's shimmer example relies on the shimmer utility class, which ships in the shadcn npm package's tailwind.css (background-clip: text plus a tw-shimmer keyframe). The Toolkit ships no CSS, and Tailwind cannot declare keyframes in an arbitrary value, so the example uses the built-in animate-pulse to convey the same in-progress cue. The README states this explicitly. Happy to drop the section instead if preferred.
  • Upstream source paths. apps/v4/styles/radix-nova/ui/ and its ui-rtl/ counterpart no longer exist upstream — that directory is now gitignored and generated by the registry build. Canonical Tailwind classes were taken from apps/v4/registry/new-york-v4/ui/marker.tsx (the registry/bases/radix variant only carries cn-marker CSS hooks). With no ui-rtl file left to diff, the RTL variants for the three directional classes (text-left, before:mr-1, after:ml-1) were derived by hand following the kit's existing ltr:<physical> rtl:<logical> idiom.
  • New icon fixtures. lucide:file-text, lucide:book-open-check and lucide:rotate-ccw were added to tests/Fixtures/icons/lucide/ for the examples.
  • Snapshots regenerated and committed; bin/ux-toolkit-kit-lint --fail-on-warning kits/shadcn and twig-cs-fixer are clean.

A companion PR on symfony/ux.symfony.com will follow to rebuild the Tailwind CSS — the recipe introduces classes new to the kit (group/marker, min-h-4, before:flex-1, before:bg-border, rtl:before:me-1, rtl:after:ms-1). No Stimulus controller is shipped.

@ker0x
ker0x requested a review from Kocal as a code owner September 14, 2026 09:39
@carsonbot carsonbot added Documentation Improvements or additions to documentation Status: Needs Review Needs to be reviewed Feature New Feature Toolkit labels Sep 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Documentation Improvements or additions to documentation Feature New Feature Status: Needs Review Needs to be reviewed Toolkit

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants