[{"data":1,"prerenderedAt":1088},["ShallowReactive",2],{"navigation":3,"$fMW9jOOkNpZriWVK3P_bZYNOyYR2IEPvrHsC7cDBlJJc":425,"/docs/components/marker":438,"surround-/docs/components/marker":1085},[4],{"title":5,"path":6,"stem":7,"children":8,"page":18},"Docs","/docs","docs",[9,278,304,322,335,361,370],{"title":10,"path":11,"stem":12,"children":13,"new":18,"type":277},"Components","/docs/components","docs/02.components",[14,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273],{"title":15,"path":16,"stem":17,"new":18,"type":19,"children":-1},"Accordion","/docs/components/accordion","docs/components/accordion",false,"component",{"title":21,"path":22,"stem":23,"new":18,"type":19,"children":-1},"Alert","/docs/components/alert","docs/components/alert",{"title":25,"path":26,"stem":27,"new":18,"type":19,"children":-1},"Alert Dialog","/docs/components/alert-dialog","docs/components/alert-dialog",{"title":29,"path":30,"stem":31,"new":18,"type":19,"children":-1},"Aspect Ratio","/docs/components/aspect-ratio","docs/components/aspect-ratio",{"title":33,"path":34,"stem":35,"new":18,"type":19,"children":-1},"Avatar","/docs/components/avatar","docs/components/avatar",{"title":37,"path":38,"stem":39,"new":18,"type":19,"children":-1},"Badge","/docs/components/badge","docs/components/badge",{"title":41,"path":42,"stem":43,"new":18,"type":19,"children":-1},"Breadcrumb","/docs/components/breadcrumb","docs/components/breadcrumb",{"title":45,"path":46,"stem":47,"new":18,"type":19,"children":-1},"Button","/docs/components/button","docs/components/button",{"title":49,"path":50,"stem":51,"new":18,"type":19,"children":-1},"Button Group","/docs/components/button-group","docs/components/button-group",{"title":53,"path":54,"stem":55,"new":18,"type":19,"children":-1},"Calendar","/docs/components/calendar","docs/components/calendar",{"title":57,"path":58,"stem":59,"new":18,"type":19,"children":-1},"Card","/docs/components/card","docs/components/card",{"title":61,"path":62,"stem":63,"new":18,"type":19,"children":-1},"Carousel","/docs/components/carousel","docs/components/carousel",{"title":65,"path":66,"stem":67,"new":18,"type":19,"children":-1},"Chart","/docs/components/chart","docs/components/chart",{"title":69,"path":70,"stem":71,"new":18,"type":19,"children":-1},"Checkbox","/docs/components/checkbox","docs/components/checkbox",{"title":73,"path":74,"stem":75,"new":18,"type":19,"children":-1},"Collapsible","/docs/components/collapsible","docs/components/collapsible",{"title":77,"path":78,"stem":79,"new":18,"type":19,"children":-1},"Combobox","/docs/components/combobox","docs/components/combobox",{"title":81,"path":82,"stem":83,"new":18,"type":19,"children":-1},"Command","/docs/components/command","docs/components/command",{"title":85,"path":86,"stem":87,"new":18,"type":19,"children":-1},"Context Menu","/docs/components/context-menu","docs/components/context-menu",{"title":89,"path":90,"stem":91,"new":18,"type":19,"children":-1},"Data Table","/docs/components/data-table","docs/components/data-table",{"title":93,"path":94,"stem":95,"new":18,"type":19,"children":-1},"Date Picker","/docs/components/date-picker","docs/components/date-picker",{"title":97,"path":98,"stem":99,"new":18,"type":19,"children":-1},"Dialog","/docs/components/dialog","docs/components/dialog",{"title":101,"path":102,"stem":103,"new":18,"type":19,"children":-1},"Drawer","/docs/components/drawer","docs/components/drawer",{"title":105,"path":106,"stem":107,"new":18,"type":19,"children":-1},"Dropdown Menu","/docs/components/dropdown-menu","docs/components/dropdown-menu",{"title":109,"path":110,"stem":111,"new":18,"type":19,"children":-1},"Empty","/docs/components/empty","docs/components/empty",{"title":113,"path":114,"stem":115,"new":18,"type":19,"children":-1},"Field","/docs/components/field","docs/components/field",{"title":117,"path":118,"stem":119,"new":18,"type":19,"children":-1},"Form","/docs/components/form","docs/components/form",{"title":121,"path":122,"stem":123,"new":18,"type":19,"children":-1},"Hover Card","/docs/components/hover-card","docs/components/hover-card",{"title":125,"path":126,"stem":127,"new":18,"type":19,"children":-1},"Input","/docs/components/input","docs/components/input",{"title":129,"path":130,"stem":131,"new":18,"type":19,"children":-1},"Input Group","/docs/components/input-group","docs/components/input-group",{"title":133,"path":134,"stem":135,"new":18,"type":19,"children":-1},"Input OTP","/docs/components/input-otp","docs/components/input-otp",{"title":137,"path":138,"stem":139,"new":18,"type":19,"children":-1},"Item","/docs/components/item","docs/components/item",{"title":141,"path":142,"stem":143,"new":18,"type":19,"children":-1},"Kbd","/docs/components/kbd","docs/components/kbd",{"title":145,"path":146,"stem":147,"new":18,"type":19,"children":-1},"Label","/docs/components/label","docs/components/label",{"title":149,"path":150,"stem":151,"new":152,"type":19,"children":-1},"Marker","/docs/components/marker","docs/components/marker",true,{"title":154,"path":155,"stem":156,"new":18,"type":19,"children":-1},"Menubar","/docs/components/menubar","docs/components/menubar",{"title":158,"path":159,"stem":160,"new":18,"type":19,"children":-1},"Native Select","/docs/components/native-select","docs/components/native-select",{"title":162,"path":163,"stem":164,"new":18,"type":19,"children":-1},"Navigation Menu","/docs/components/navigation-menu","docs/components/navigation-menu",{"title":166,"path":167,"stem":168,"new":18,"type":19,"children":-1},"Number Field","/docs/components/number-field","docs/components/number-field",{"title":170,"path":171,"stem":172,"new":18,"type":19,"children":-1},"Pagination","/docs/components/pagination","docs/components/pagination",{"title":174,"path":175,"stem":176,"new":18,"type":19,"children":-1},"Pin Input","/docs/components/pin-input","docs/components/pin-input",{"title":178,"path":179,"stem":180,"new":18,"type":19,"children":-1},"Popover","/docs/components/popover","docs/components/popover",{"title":182,"path":183,"stem":184,"new":18,"type":19,"children":-1},"Progress","/docs/components/progress","docs/components/progress",{"title":186,"path":187,"stem":188,"new":18,"type":19,"children":-1},"Radio Group","/docs/components/radio-group","docs/components/radio-group",{"title":190,"path":191,"stem":192,"new":18,"type":19,"children":-1},"Range Calendar","/docs/components/range-calendar","docs/components/range-calendar",{"title":194,"path":195,"stem":196,"new":18,"type":19,"children":-1},"Resizable","/docs/components/resizable","docs/components/resizable",{"title":198,"path":199,"stem":200,"new":18,"type":19,"children":-1},"Scroll Area","/docs/components/scroll-area","docs/components/scroll-area",{"title":202,"path":203,"stem":204,"new":18,"type":19,"children":-1},"Select","/docs/components/select","docs/components/select",{"title":206,"path":207,"stem":208,"new":18,"type":19,"children":-1},"Separator","/docs/components/separator","docs/components/separator",{"title":210,"path":211,"stem":212,"new":18,"type":19,"children":-1},"Sheet","/docs/components/sheet","docs/components/sheet",{"title":214,"path":215,"stem":216,"new":18,"type":19,"children":-1},"Sidebar","/docs/components/sidebar","docs/components/sidebar",{"title":218,"path":219,"stem":220,"new":18,"type":19,"children":-1},"Skeleton","/docs/components/skeleton","docs/components/skeleton",{"title":222,"path":223,"stem":224,"new":18,"type":19,"children":-1},"Slider","/docs/components/slider","docs/components/slider",{"title":226,"path":227,"stem":228,"new":18,"type":19,"children":-1},"Sonner","/docs/components/sonner","docs/components/sonner",{"title":230,"path":231,"stem":232,"new":18,"type":19,"children":-1},"Spinner","/docs/components/spinner","docs/components/spinner",{"title":234,"path":235,"stem":236,"new":18,"type":19,"children":-1},"Stepper","/docs/components/stepper","docs/components/stepper",{"title":238,"path":239,"stem":240,"new":18,"type":19,"children":-1},"Switch","/docs/components/switch","docs/components/switch",{"title":242,"path":243,"stem":244,"new":18,"type":19,"children":-1},"Table","/docs/components/table","docs/components/table",{"title":246,"path":247,"stem":248,"new":18,"type":19,"children":-1},"Tabs","/docs/components/tabs","docs/components/tabs",{"title":250,"path":251,"stem":252,"new":18,"type":19,"children":-1},"Tags Input","/docs/components/tags-input","docs/components/tags-input",{"title":254,"path":255,"stem":256,"new":18,"type":19,"children":-1},"Textarea","/docs/components/textarea","docs/components/textarea",{"title":258,"path":259,"stem":260,"new":18,"type":19,"children":-1},"Toast","/docs/components/toast","docs/components/toast",{"title":262,"path":263,"stem":264,"new":18,"type":19,"children":-1},"Toggle","/docs/components/toggle","docs/components/toggle",{"title":266,"path":267,"stem":268,"new":18,"type":19,"children":-1},"Toggle Group","/docs/components/toggle-group","docs/components/toggle-group",{"title":270,"path":271,"stem":272,"new":18,"type":19,"children":-1},"Tooltip","/docs/components/tooltip","docs/components/tooltip",{"title":274,"path":275,"stem":276,"new":18,"type":19,"children":-1},"Typography","/docs/components/typography","docs/components/typography","group",{"title":279,"path":280,"stem":281,"children":282,"new":18,"type":277},"Installation","/docs/installation","docs/02.installation",[283,288,292,296,300],{"title":284,"path":285,"stem":286,"new":18,"type":287,"children":-1},"Vite","/docs/installation/vite","docs/installation/01.vite","page",{"title":289,"path":290,"stem":291,"new":18,"type":287,"children":-1},"Nuxt","/docs/installation/nuxt","docs/installation/02.nuxt",{"title":293,"path":294,"stem":295,"new":18,"type":287,"children":-1},"Astro","/docs/installation/astro","docs/installation/03.astro",{"title":297,"path":298,"stem":299,"new":18,"type":287,"children":-1},"Laravel","/docs/installation/laravel","docs/installation/04.laravel",{"title":301,"path":302,"stem":303,"new":18,"type":287,"children":-1},"Manual Installation","/docs/installation/manual","docs/installation/05.manual",{"title":305,"path":306,"stem":307,"children":308,"new":18,"type":277},"Dark Mode","/docs/dark-mode","docs/05.dark-mode",[309,312,315,319],{"title":284,"path":310,"stem":311,"new":18,"type":287,"children":-1},"/docs/dark-mode/vite","docs/dark-mode/01.vite",{"title":289,"path":313,"stem":314,"new":18,"type":287,"children":-1},"/docs/dark-mode/nuxt","docs/dark-mode/02.nuxt",{"title":316,"path":317,"stem":318,"new":18,"type":287,"children":-1},"Vitepress","/docs/dark-mode/vitepress","docs/dark-mode/03.vitepress",{"title":293,"path":320,"stem":321,"new":18,"type":287,"children":-1},"/docs/dark-mode/astro","docs/dark-mode/04.astro",{"title":323,"path":324,"stem":325,"children":326,"new":18,"type":277},"Forms","/docs/forms","docs/forms",[327,331],{"title":328,"path":329,"stem":330,"new":18,"type":287,"children":-1},"VeeValidate","/docs/forms/vee-validate","docs/forms/01.vee-validate",{"title":332,"path":333,"stem":334,"new":18,"type":287,"children":-1},"TanStack Form","/docs/forms/tanstack-form","docs/forms/02.tanstack-form",{"title":336,"path":337,"stem":338,"children":339,"new":18,"type":277},"Registry","/docs/registry","docs/registry/index",[340,341,345,349,353,357],{"title":336,"path":337,"stem":338,"new":18,"type":287,"children":-1},{"title":342,"path":343,"stem":344,"new":18,"type":287,"children":-1},"Examples","/docs/registry/examples","docs/registry/examples",{"title":346,"path":347,"stem":348,"new":18,"type":287,"children":-1},"FAQ","/docs/registry/faq","docs/registry/faq",{"title":350,"path":351,"stem":352,"new":18,"type":287,"children":-1},"Getting Started","/docs/registry/getting-started","docs/registry/getting-started",{"title":354,"path":355,"stem":356,"new":18,"type":287,"children":-1},"registry-item.json","/docs/registry/registry-item-json","docs/registry/registry-item-json",{"title":358,"path":359,"stem":360,"new":18,"type":287,"children":-1},"registry.json","/docs/registry/registry-json","docs/registry/registry-json",{"title":362,"path":363,"stem":364,"children":365,"page":18,"type":277},"Utilities","/docs/utilities","docs/utilities",[366],{"title":367,"path":368,"stem":369,"new":18,"type":287,"children":-1},"shimmer","/docs/utilities/shimmer","docs/utilities/shimmer",{"path":6,"stem":7,"title":371,"type":277,"children":372},"Get Started",[373,377,384,388,392,398,402,406,410,414,418,422],{"title":374,"path":375,"stem":376,"new":18,"type":287,"children":-1},"Introduction","/docs/introduction","docs/01.introduction",{"title":279,"path":280,"stem":281,"children":378,"new":18,"type":277},[379,380,381,382,383],{"title":284,"path":285,"stem":286,"new":18,"type":287,"children":-1},{"title":289,"path":290,"stem":291,"new":18,"type":287,"children":-1},{"title":293,"path":294,"stem":295,"new":18,"type":287,"children":-1},{"title":297,"path":298,"stem":299,"new":18,"type":287,"children":-1},{"title":301,"path":302,"stem":303,"new":18,"type":287,"children":-1},{"title":385,"path":386,"stem":387,"new":18,"type":287,"children":-1},"components.json","/docs/components-json","docs/03.components-json",{"title":389,"path":390,"stem":391,"new":18,"type":287,"children":-1},"Theming","/docs/theming","docs/04.theming",{"title":305,"path":306,"stem":307,"children":393,"new":18,"type":277},[394,395,396,397],{"title":284,"path":310,"stem":311,"new":18,"type":287,"children":-1},{"title":289,"path":313,"stem":314,"new":18,"type":287,"children":-1},{"title":316,"path":317,"stem":318,"new":18,"type":287,"children":-1},{"title":293,"path":320,"stem":321,"new":18,"type":287,"children":-1},{"title":399,"path":400,"stem":401,"new":18,"type":287,"children":-1},"CLI","/docs/cli","docs/06.cli",{"title":403,"path":404,"stem":405,"new":18,"type":287,"children":-1},"JavaScript","/docs/javascript","docs/07.javascript",{"title":407,"path":408,"stem":409,"new":18,"type":287,"children":-1},"Figma","/docs/figma","docs/09.figma",{"title":411,"path":412,"stem":413,"new":18,"type":287,"children":-1},"Changelog","/docs/changelog","docs/10.changelog",{"title":415,"path":416,"stem":417,"new":18,"type":287,"children":-1},"Legacy Docs","/docs/legacy","docs/11.legacy",{"title":419,"path":420,"stem":421,"new":18,"type":287,"children":-1},"Skills","/docs/skills","docs/skills",{"title":362,"path":363,"stem":364,"children":423,"page":18,"type":277},[424],{"title":367,"path":368,"stem":369,"new":18,"type":287,"children":-1},{"repo":426},{"id":427,"name":428,"repo":429,"description":430,"createdAt":431,"updatedAt":432,"pushedAt":433,"stars":434,"watchers":435,"forks":436,"defaultBranch":437},658791894,"shadcn-vue","unovue/shadcn-vue","Vue port of shadcn-ui","2023-06-26T13:53:23Z","2026-07-04T11:25:29Z","2026-07-04T11:25:25Z",10222,37,663,"dev",{"id":439,"title":149,"body":440,"description":1078,"extension":1079,"links":1080,"meta":1081,"navigation":152,"new":152,"path":150,"rawbody":1082,"seo":1083,"stem":151,"__hash__":1084},"content/docs/components/marker.md",{"type":441,"value":442,"toc":1049},"minimark",[443,449,453,510,514,523,527,530,538,542,574,577,582,589,593,643,647,659,663,666,683,687,689,695,699,702,707,711,715,725,729,733,742,746,754,758,763,767,780,786,790,793,799,820,824,833,839,843,858,864,868,882,888,892,895,902,973,976,981,1012,1015,1018],[444,445],"component-preview",{"className":446,"name":448},[447],"style-luma","MarkerDemo",[450,451,279],"h2",{"id":452},"installation",[454,455,456,472,486],"code-tabs",{},[457,458,459,466],"tabs-list",{},[460,461,463],"tabs-trigger",{"value":462},"cli",[464,465,399],"p",{},[460,467,469],{"value":468},"manual",[464,470,471],{},"Manual",[473,474,475],"tabs-content",{"value":462},[476,477,483],"pre",{"className":478,"code":480,"language":481,"meta":482},[479],"language-bash","npx shadcn-vue@latest add marker\n","bash","",[484,485,480],"code",{"__ignoreMap":482},[473,487,488],{"value":468},[489,490,491,505],"steps",{},[492,493,494],"step",{},[464,495,496,497,504],{},"Copy and paste the ",[498,499,503],"a",{"href":500,"rel":501},"https://github.com/unovue/shadcn-vue/tree/dev/apps/v4/registry/bases/reka/ui/marker",[502],"nofollow","GitHub source code"," into your project.",[492,506,507],{},[464,508,509],{},"Update the import paths to match your project setup.",[450,511,513],{"id":512},"usage","Usage",[476,515,521],{"className":516,"code":518,"language":519,"meta":520},[517],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { Marker, MarkerContent, MarkerIcon, } from '@/components/ui/marker'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CMarker>\n    \u003CMarkerIcon>\n      \u003CCheckIcon />\n    \u003C/MarkerIcon>\n    \u003CMarkerContent>Explored 4 files\u003C/MarkerContent>\n  \u003C/Marker>\n\u003C/template>\n","vue","showLineNumbers",[484,522,518],{"__ignoreMap":482},[450,524,526],{"id":525},"composition","Composition",[464,528,529],{},"Use the following composition to build a marker:",[476,531,536],{"className":532,"code":534,"language":535,"meta":482},[533],"language-text","Marker\n├── MarkerIcon\n└── MarkerContent\n","text",[484,537,534],{"__ignoreMap":482},[450,539,541],{"id":540},"features","Features",[543,544,545,549,552,559,567],"ul",{},[546,547,548],"li",{},"Inline marker, bordered row, and labeled separator variants",[546,550,551],{},"Decorative icon slot that is hidden from assistive tech",[546,553,554,555,558],{},"Polymorphic root via ",[484,556,557],{},"render"," for link and button markers",[546,560,561,562,566],{},"Pairs with the ",[498,563,564],{"href":368},[484,565,367],{}," utility for streaming status text",[546,568,569,570,573],{},"Customizable styling through the ",[484,571,572],{},"class"," prop on every part",[450,575,342],{"id":576},"examples",[578,579,581],"h3",{"id":580},"variants","Variants",[464,583,584,585,588],{},"Use ",[484,586,587],{},"variant"," to switch between an inline marker, bordered row, and labeled separator.",[444,590],{"className":591,"name":592},[447],"MarkerVariantsDemo",[594,595,596,609],"table",{},[597,598,599],"thead",{},[600,601,602,606],"tr",{},[603,604,605],"th",{},"Variant",[603,607,608],{},"Description",[610,611,612,623,633],"tbody",{},[600,613,614,620],{},[615,616,617],"td",{},[484,618,619],{},"default",[615,621,622],{},"An inline marker for status, notes, and actions.",[600,624,625,630],{},[615,626,627],{},[484,628,629],{},"border",[615,631,632],{},"A default marker with a bottom border under the row.",[600,634,635,640],{},[615,636,637],{},[484,638,639],{},"separator",[615,641,642],{},"A centered label with divider lines on each side.",[578,644,646],{"id":645},"status","Status",[464,648,649,650,653,654,658],{},"Set ",[484,651,652],{},"role=\"status\""," and include a ",[498,655,656],{"href":231},[484,657,230],{}," for streaming or in-progress markers so updates are announced.",[444,660],{"className":661,"name":662},[447],"MarkerStatusDemo",[578,664,665],{"id":367},"Shimmer",[464,667,668,669,674,675,678,679,682],{},"Add the ",[498,670,672],{"href":671},"/docs/utils/shimmer",[484,673,367],{}," utility class to ",[484,676,677],{},"MarkerContent"," for an animated streaming-text effect. The utility ships with the ",[484,680,681],{},"shadcn"," package — see the shimmer docs for installation.",[444,684],{"className":685,"name":686},[447],"MarkerShimmerDemo",[578,688,206],{"id":639},[464,690,691,692,694],{},"Use the ",[484,693,639],{}," variant for labeled dividers, such as dates or section breaks, in a conversation.",[444,696],{"className":697,"name":698},[447],"MarkerSeparatorDemo",[578,700,701],{"id":629},"Border",[464,703,691,704,706],{},[484,705,629],{}," variant for status rows that should keep the default marker alignment while separating the next row.",[444,708],{"className":709,"name":710},[447],"MarkerBorderDemo",[578,712,714],{"id":713},"with-icon","With Icon",[464,716,584,717,720,721,724],{},[484,718,719],{},"MarkerIcon"," to render an icon alongside the content. Use ",[484,722,723],{},"flex-col"," to stack the icon above the content.",[444,726],{"className":727,"name":728},[447],"MarkerIconDemo",[578,730,732],{"id":731},"links-and-buttons","Links and Buttons",[464,734,735,736,738,739,741],{},"Turn a marker into a link or button with the ",[484,737,557],{}," prop on ",[484,740,149],{},".",[444,743],{"className":744,"name":745},[447],"MarkerLinkButtonDemo",[476,747,752],{"className":748,"code":750,"language":751,"meta":520},[749],"language-tsx","import { Marker, MarkerContent } from \"@/components/ui/marker\"\n\n\u003Ctemplate>\n  \u003CMarker as-child>\n    \u003Ca href=\"#links-and-buttons\">\n      \u003CMarkerIcon>\n        \u003CGitBranchIcon />\n      \u003C/MarkerIcon>\n      \u003CMarkerContent>View the pull request\u003C/MarkerContent>\n    \u003C/a>\n  \u003C/Marker>\n\u003C/template>\n","tsx",[484,753,750],{"__ignoreMap":482},[450,755,757],{"id":756},"accessibility","Accessibility",[464,759,760,762],{},[484,761,149],{}," 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.",[578,764,766],{"id":765},"status-and-progress","Status and Progress",[464,768,769,770,772,773,775,776,779],{},"For streaming or progress markers such as \"Thinking...\" or a running tool, set ",[484,771,652],{}," so assistive tech announces the update as it appears. ",[484,774,149],{}," forwards ",[484,777,778],{},"role"," to the underlying element.",[476,781,784],{"className":782,"code":783,"language":751,"meta":520},[749],"\u003CMarker role=\"status\">\n  \u003CMarkerIcon>\n    \u003CSpinner />\n  \u003C/MarkerIcon>\n  \u003CMarkerContent>Compacting conversation\u003C/MarkerContent>\n\u003C/Marker>\n",[484,785,783],{"__ignoreMap":482},[578,787,789],{"id":788},"labeled-separators","Labeled Separators",[464,791,792],{},"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.",[476,794,797],{"className":795,"code":796,"language":751,"meta":520},[749],"\u003CMarker variant=\"separator\">\n  \u003CMarkerContent>Today\u003C/MarkerContent>\n\u003C/Marker>\n",[484,798,796],{"__ignoreMap":482},[800,801,802],"callout",{},[464,803,804,808,809,812,813,816,817,819],{},[805,806,807],"strong",{},"Note:"," Do not add ",[484,810,811],{},"role=\"separator\""," to a labeled divider. A separator\ntakes its accessible name from ",[484,814,815],{},"aria-label",", not from its text, and its\ncontents are treated as presentational, so the visible label would not be\nannounced. Reserve ",[484,818,811],{}," for a divider with no meaningful text.",[578,821,823],{"id":822},"bordered-markers","Bordered Markers",[464,825,826,827,829,830,832],{},"A bordered marker keeps the same semantics as the default marker. The bottom border is decorative, so choose ",[484,828,652],{},", ",[484,831,557],{},", or no role based on the marker's purpose.",[476,834,837],{"className":835,"code":836,"language":751,"meta":520},[749],"\u003CMarker variant=\"border\">\n  \u003CMarkerIcon>\n    \u003CFileTextIcon />\n  \u003C/MarkerIcon>\n  \u003CMarkerContent>Opened implementation notes\u003C/MarkerContent>\n\u003C/Marker>\n",[484,838,836],{"__ignoreMap":482},[578,840,842],{"id":841},"decorative-icons","Decorative Icons",[464,844,845,847,848,851,852,854,855,857],{},[484,846,719],{}," is decorative and hidden from assistive tech with ",[484,849,850],{},"aria-hidden",", so the adjacent ",[484,853,677],{}," carries the meaning. For an icon-only marker, provide an ",[484,856,815],{}," or visible text so it is not announced as empty.",[476,859,862],{"className":860,"code":861,"language":751,"meta":520},[749],"\u003CMarker aria-label=\"Synced\">\n  \u003CMarkerIcon>\n    \u003CCheckIcon />\n  \u003C/MarkerIcon>\n\u003C/Marker>\n",[484,863,861],{"__ignoreMap":482},[578,865,867],{"id":866},"interactive-markers","Interactive Markers",[464,869,870,871,874,875,878,879,881],{},"When a marker links or triggers an action, render it as a real ",[484,872,873],{},"\u003Cbutton>"," or ",[484,876,877],{},"\u003Ca>"," with the ",[484,880,557],{}," prop so it is focusable and exposes the correct role. The accessible name comes from the marker text.",[476,883,886],{"className":884,"code":885,"language":751,"meta":520},[749],"\u003CMarker as-child>\n  \u003Ca href=\"/files\" >\n    \u003CMarkerIcon>\n      \u003CFileTextIcon />\n    \u003C/MarkerIcon>\n    \u003CMarkerContent>Explored 4 files\u003C/MarkerContent>\n  \u003C/a>\n\u003C/Marker>\n",[484,887,885],{"__ignoreMap":482},[450,889,891],{"id":890},"api-reference","API Reference",[578,893,149],{"id":894},"marker",[464,896,897,898,901],{},"The root marker element. The file also exports ",[484,899,900],{},"markerVariants"," for composing the marker styles into custom components.",[594,903,904,919],{},[597,905,906],{},[600,907,908,911,914,917],{},[603,909,910],{},"Prop",[603,912,913],{},"Type",[603,915,916],{},"Default",[603,918,608],{},[610,920,921,940,957],{},[600,922,923,927,932,937],{},[615,924,925],{},[484,926,587],{},[615,928,929],{},[484,930,931],{},"\"default\" | \"border\" | \"separator\"",[615,933,934],{},[484,935,936],{},"\"default\"",[615,938,939],{},"The marker layout.",[600,941,942,946,951,954],{},[615,943,944],{},[484,945,557],{},[615,947,948],{},[484,949,950],{},"ReactElement | function",[615,952,953],{},"-",[615,955,956],{},"Render as a different element, such as a link.",[600,958,959,963,968,970],{},[615,960,961],{},[484,962,572],{},[615,964,965],{},[484,966,967],{},"string",[615,969,953],{},[615,971,972],{},"Additional classes to apply to the root element.",[578,974,719],{"id":975},"markericon",[464,977,978,979,741],{},"A decorative icon slot. Hidden from assistive tech with ",[484,980,850],{},[594,982,983,995],{},[597,984,985],{},[600,986,987,989,991,993],{},[603,988,910],{},[603,990,913],{},[603,992,916],{},[603,994,608],{},[610,996,997],{},[600,998,999,1003,1007,1009],{},[615,1000,1001],{},[484,1002,572],{},[615,1004,1005],{},[484,1006,967],{},[615,1008,953],{},[615,1010,1011],{},"Additional classes to apply to the icon slot.",[578,1013,677],{"id":1014},"markercontent",[464,1016,1017],{},"The marker text content.",[594,1019,1020,1032],{},[597,1021,1022],{},[600,1023,1024,1026,1028,1030],{},[603,1025,910],{},[603,1027,913],{},[603,1029,916],{},[603,1031,608],{},[610,1033,1034],{},[600,1035,1036,1040,1044,1046],{},[615,1037,1038],{},[484,1039,572],{},[615,1041,1042],{},[484,1043,967],{},[615,1045,953],{},[615,1047,1048],{},"Additional classes to apply to the content slot.",{"title":482,"searchDepth":1050,"depth":1050,"links":1051},2,[1052,1053,1054,1055,1056,1066,1073],{"id":452,"depth":1050,"text":279},{"id":512,"depth":1050,"text":513},{"id":525,"depth":1050,"text":526},{"id":540,"depth":1050,"text":541},{"id":576,"depth":1050,"text":342,"children":1057},[1058,1060,1061,1062,1063,1064,1065],{"id":580,"depth":1059,"text":581},3,{"id":645,"depth":1059,"text":646},{"id":367,"depth":1059,"text":665},{"id":639,"depth":1059,"text":206},{"id":629,"depth":1059,"text":701},{"id":713,"depth":1059,"text":714},{"id":731,"depth":1059,"text":732},{"id":756,"depth":1050,"text":757,"children":1067},[1068,1069,1070,1071,1072],{"id":765,"depth":1059,"text":766},{"id":788,"depth":1059,"text":789},{"id":822,"depth":1059,"text":823},{"id":841,"depth":1059,"text":842},{"id":866,"depth":1059,"text":867},{"id":890,"depth":1050,"text":891,"children":1074},[1075,1076,1077],{"id":894,"depth":1059,"text":149},{"id":975,"depth":1059,"text":719},{"id":1014,"depth":1059,"text":677},"Displays an inline status, system note, bordered row, or labeled separator in a conversation.","md",null,{"component":152},"---\ntitle: Marker\ndescription: Displays an inline status, system note, bordered row, or labeled separator in a conversation.\ncomponent: true\nnew: true\n---\n\n::component-preview\n---\nname: MarkerDemo\nclass: style-luma\n---\n::\n\n## Installation\n\n::code-tabs\n\n::tabs-list\n\n  ::tabs-trigger{value=\"cli\"}\n  CLI\n  ::\n\n  ::tabs-trigger{value=\"manual\"}\n  Manual\n  ::\n\n::\n\n::tabs-content{value=\"cli\"}\n\n```bash\nnpx shadcn-vue@latest add marker\n```\n\n::\n\n::tabs-content{value=\"manual\"}\n  ::steps\n    ::step\n    Copy and paste the [GitHub source code](https://github.com/unovue/shadcn-vue/tree/dev/apps/v4/registry/bases/reka/ui/marker) into your project.\n    ::\n\n    ::step\n    Update the import paths to match your project setup.\n    ::\n  ::\n::\n\n::\n\n## Usage\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { Marker, MarkerContent, MarkerIcon, } from '@/components/ui/marker'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CMarker>\n    \u003CMarkerIcon>\n      \u003CCheckIcon />\n    \u003C/MarkerIcon>\n    \u003CMarkerContent>Explored 4 files\u003C/MarkerContent>\n  \u003C/Marker>\n\u003C/template>\n```\n\n\n## Composition\n\nUse the following composition to build a marker:\n\n```text\nMarker\n├── MarkerIcon\n└── MarkerContent\n```\n\n## Features\n\n- Inline marker, bordered row, and labeled separator variants\n- Decorative icon slot that is hidden from assistive tech\n- Polymorphic root via `render` for link and button markers\n- Pairs with the [`shimmer`](/docs/utilities/shimmer) utility for streaming status text\n- Customizable styling through the `class` prop on every part\n\n## Examples\n\n### Variants\n\nUse `variant` to switch between an inline marker, bordered row, and labeled separator.\n\n::component-preview\n---\nname: MarkerVariantsDemo\nclass: style-luma\n---\n::\n\n| Variant     | Description                                          |\n| ----------- | ---------------------------------------------------- |\n| `default`   | An inline marker for status, notes, and actions.     |\n| `border`    | A default marker with a bottom border under the row. |\n| `separator` | A centered label with divider lines on each side.    |\n\n### Status\n\nSet `role=\"status\"` and include a [`Spinner`](/docs/components/spinner) for streaming or in-progress markers so updates are announced.\n\n::component-preview\n---\nname: MarkerStatusDemo\nclass: style-luma\n---\n::\n\n\n### Shimmer\n\nAdd the [`shimmer`](/docs/utils/shimmer) utility class to `MarkerContent` for an animated streaming-text effect. The utility ships with the `shadcn` package — see the shimmer docs for installation.\n\n\n\n::component-preview\n---\nname: MarkerShimmerDemo\nclass: style-luma\n---\n::\n\n### Separator\n\nUse the `separator` variant for labeled dividers, such as dates or section breaks, in a conversation.\n\n::component-preview\n---\nname: MarkerSeparatorDemo\nclass: style-luma\n---\n::\n\n### Border\n\nUse the `border` variant for status rows that should keep the default marker alignment while separating the next row.\n\n::component-preview\n---\nname: MarkerBorderDemo\nclass: style-luma\n---\n::\n\n### With Icon\n\nUse `MarkerIcon` to render an icon alongside the content. Use `flex-col` to stack the icon above the content.\n\n\n::component-preview\n---\nname: MarkerIconDemo\nclass: style-luma\n---\n::\n\n### Links and Buttons\n\nTurn a marker into a link or button with the `render` prop on `Marker`.\n\n\n::component-preview\n---\nname: MarkerLinkButtonDemo\nclass: style-luma\n---\n::\n\n```tsx showLineNumbers\nimport { Marker, MarkerContent } from \"@/components/ui/marker\"\n\n\u003Ctemplate>\n  \u003CMarker as-child>\n    \u003Ca href=\"#links-and-buttons\">\n      \u003CMarkerIcon>\n        \u003CGitBranchIcon />\n      \u003C/MarkerIcon>\n      \u003CMarkerContent>View the pull request\u003C/MarkerContent>\n    \u003C/a>\n  \u003C/Marker>\n\u003C/template>\n```\n\n## Accessibility\n\n`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.\n\n### Status and Progress\n\nFor 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.\n\n```tsx showLineNumbers\n\u003CMarker role=\"status\">\n  \u003CMarkerIcon>\n    \u003CSpinner />\n  \u003C/MarkerIcon>\n  \u003CMarkerContent>Compacting conversation\u003C/MarkerContent>\n\u003C/Marker>\n```\n\n### Labeled Separators\n\nA 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.\n\n```tsx showLineNumbers\n\u003CMarker variant=\"separator\">\n  \u003CMarkerContent>Today\u003C/MarkerContent>\n\u003C/Marker>\n```\n\n::callout\n  **Note:** Do not add `role=\"separator\"` to a labeled divider. A separator\n  takes its accessible name from `aria-label`, not from its text, and its\n  contents are treated as presentational, so the visible label would not be\n  announced. Reserve `role=\"separator\"` for a divider with no meaningful text.\n::\n\n### Bordered Markers\n\nA 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.\n\n```tsx showLineNumbers\n\u003CMarker variant=\"border\">\n  \u003CMarkerIcon>\n    \u003CFileTextIcon />\n  \u003C/MarkerIcon>\n  \u003CMarkerContent>Opened implementation notes\u003C/MarkerContent>\n\u003C/Marker>\n```\n\n### Decorative Icons\n\n`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.\n\n```tsx showLineNumbers\n\u003CMarker aria-label=\"Synced\">\n  \u003CMarkerIcon>\n    \u003CCheckIcon />\n  \u003C/MarkerIcon>\n\u003C/Marker>\n```\n\n### Interactive Markers\n\nWhen a marker links or triggers an action, render it as a real `\u003Cbutton>` or `\u003Ca>` with the `render` prop so it is focusable and exposes the correct role. The accessible name comes from the marker text.\n\n```tsx showLineNumbers\n\u003CMarker as-child>\n  \u003Ca href=\"/files\" >\n    \u003CMarkerIcon>\n      \u003CFileTextIcon />\n    \u003C/MarkerIcon>\n    \u003CMarkerContent>Explored 4 files\u003C/MarkerContent>\n  \u003C/a>\n\u003C/Marker>\n```\n\n## API Reference\n\n### Marker\n\nThe root marker element. The file also exports `markerVariants` for composing the marker styles into custom components.\n\n| Prop        | Type                                   | Default     | Description                                      |\n| ----------- | -------------------------------------- | ----------- | ------------------------------------------------ |\n| `variant`   | `\"default\" \\| \"border\" \\| \"separator\"` | `\"default\"` | The marker layout.                               |\n| `render`    | `ReactElement \\| function`             | -           | Render as a different element, such as a link.   |\n| `class` | `string`                               | -           | Additional classes to apply to the root element. |\n\n### MarkerIcon\n\nA decorative icon slot. Hidden from assistive tech with `aria-hidden`.\n\n| Prop        | Type     | Default | Description                                   |\n| ----------- | -------- | ------- | --------------------------------------------- |\n| `class` | `string` | -       | Additional classes to apply to the icon slot. |\n\n### MarkerContent\n\nThe marker text content.\n\n| Prop        | Type     | Default | Description                                      |\n| ----------- | -------- | ------- | ------------------------------------------------ |\n| `class` | `string` | -       | Additional classes to apply to the content slot. |\n",{"title":149,"description":1078},"yXZ8EQAJNFTnC5ICeayvlJa7Ub90Zj2grFiLpvtjGoE",[1086,1087],{"title":145,"path":146,"stem":147,"children":-1},{"title":154,"path":155,"stem":156,"children":-1},1783164582720]