[{"data":1,"prerenderedAt":459},["ShallowReactive",2],{"navigation":3,"\u002Fdocs\u002Fcomponents\u002Ftimeline":89,"surround-\u002Fdocs\u002Fcomponents\u002Ftimeline":457},[4],{"title":5,"path":6,"stem":7,"children":8,"page":88},"Docs","\u002Fdocs","docs",[9,32],{"path":6,"stem":7,"title":10,"type":11,"children":12},"Overview","group",[13,19,23,27],{"title":14,"path":15,"stem":16,"tag":17,"type":18,"children":-1},"Introduction","\u002Fdocs\u002Fintroduction","docs\u002F1.introduction",null,"page",{"title":20,"path":21,"stem":22,"tag":17,"type":18,"children":-1},"Getting Started","\u002Fdocs\u002Fgetting-started","docs\u002F2.getting-started",{"title":24,"path":25,"stem":26,"tag":17,"type":18,"children":-1},"Registries","\u002Fdocs\u002Fregistries","docs\u002F3.registries",{"path":28,"stem":29,"title":30,"type":31},"\u002Fllms.txt","llms.txt","Llms.txt","asset",{"title":33,"path":34,"stem":35,"children":36,"page":88,"type":11},"Components","\u002Fdocs\u002Fcomponents","docs\u002Fcomponents",[37,43,47,52,56,60,64,68,72,76,80,84],{"title":38,"path":39,"stem":40,"tag":41,"type":42,"children":-1},"ActionSheet","\u002Fdocs\u002Fcomponents\u002Faction-sheet","docs\u002Fcomponents\u002Faction-sheet","new","component",{"title":44,"path":45,"stem":46,"tag":41,"type":42,"children":-1},"Autocomplete","\u002Fdocs\u002Fcomponents\u002Fautocomplete","docs\u002Fcomponents\u002Fautocomplete",{"title":48,"path":49,"stem":50,"tag":51,"type":42,"children":-1},"Color","\u002Fdocs\u002Fcomponents\u002Fcolor","docs\u002Fcomponents\u002Fcolor","alpha",{"title":53,"path":54,"stem":55,"tag":41,"type":42,"children":-1},"Filters","\u002Fdocs\u002Fcomponents\u002Ffilters","docs\u002Fcomponents\u002Ffilters",{"title":57,"path":58,"stem":59,"tag":41,"type":42,"children":-1},"Gallery","\u002Fdocs\u002Fcomponents\u002Fgallery","docs\u002Fcomponents\u002Fgallery",{"title":61,"path":62,"stem":63,"tag":41,"type":42,"children":-1},"Image","\u002Fdocs\u002Fcomponents\u002Fimage","docs\u002Fcomponents\u002Fimage",{"title":65,"path":66,"stem":67,"tag":41,"type":42,"children":-1},"Image Viewer","\u002Fdocs\u002Fcomponents\u002Fimage-viewer","docs\u002Fcomponents\u002Fimage-viewer",{"title":69,"path":70,"stem":71,"tag":41,"type":42,"children":-1},"PasswordField","\u002Fdocs\u002Fcomponents\u002Fpassword-field","docs\u002Fcomponents\u002Fpassword-field",{"title":73,"path":74,"stem":75,"tag":41,"type":42,"children":-1},"PhoneField","\u002Fdocs\u002Fcomponents\u002Fphone-field","docs\u002Fcomponents\u002Fphone-field",{"title":77,"path":78,"stem":79,"tag":41,"type":42,"children":-1},"Stack Menu","\u002Fdocs\u002Fcomponents\u002Fstack-menu","docs\u002Fcomponents\u002Fstack-menu",{"title":81,"path":82,"stem":83,"tag":41,"type":42,"children":-1},"TimeField","\u002Fdocs\u002Fcomponents\u002Ftime-field","docs\u002Fcomponents\u002Ftime-field",{"title":85,"path":86,"stem":87,"tag":41,"type":42,"children":-1},"Timeline","\u002Fdocs\u002Fcomponents\u002Ftimeline","docs\u002Fcomponents\u002Ftimeline",false,{"id":90,"title":85,"body":91,"description":450,"extension":451,"meta":452,"navigation":453,"path":86,"rawbody":454,"seo":455,"stem":87,"tag":41,"__hash__":456},"content\u002Fdocs\u002Fcomponents\u002Ftimeline.md",{"type":92,"value":93,"toc":433},"minimark",[94,98,102,107,172,176,179,184,188,198,202,206,213,216,223,227,254,257,263,267,270,341,344,371,374,404,408],[95,96,97],"p",{},"A composable timeline built from primitives. Use it to visualize an ordered sequence of events — logs, activity feeds, product journeys, or step-by-step stories — either top-to-bottom or left-to-right.",[99,100],"component-preview",{"name":101},"TimelineDemo",[103,104,106],"h2",{"id":105},"features","Features",[108,109,110,127,148,158],"ul",{},[111,112,113,117,118,122,123,126],"li",{},[114,115,116],"strong",{},"Two directions"," — Stack items top-to-bottom (",[119,120,121],"code",{},"vertical",") or left-to-right (",[119,124,125],{},"horizontal",")",[111,128,129,132,133,136,137,140,141,136,144,147],{},[114,130,131],{},"Side control"," — Place content on either side of the thread (",[119,134,135],{},"left","\u002F",[119,138,139],{},"right"," for vertical, ",[119,142,143],{},"top",[119,145,146],{},"bottom"," for horizontal)",[111,149,150,153,154,157],{},[114,151,152],{},"Centered thread"," — Opt-in alternating layout with ",[119,155,156],{},"align=\"center\""," for zigzag timelines",[111,159,160,163,164,167,168,171],{},[114,161,162],{},"Dot or icon markers"," — Switch between a small dot or an icon slot via ",[119,165,166],{},"TimelineMedia","'s ",[119,169,170],{},"variant"," prop",[103,173,175],{"id":174},"installation","Installation",[95,177,178],{},"Install from the Vuzeno registry with the shadcn-vue CLI:",[180,181],"installation-tabs",{":exec":182,"command":183},"true","shadcn-vue@latest add https:\u002F\u002Fvuzeno.com\u002Fr\u002Ftimeline.json",[103,185,187],{"id":186},"anatomy","Anatomy",[189,190,196],"pre",{"className":191,"code":193,"language":194,"meta":195},[192],"language-vue","\u003Ctemplate>\n  \u003CTimeline direction=\"vertical\">\n    \u003CTimelineItem>\n      \u003CTimelineMedia variant=\"icon\" \u002F>\n\n      \u003CTimelineContent>\n        \u003CTimelineHeader>\n          \u003CTimelineTitle \u002F>\n          \u003CTimelineDescription \u002F>\n        \u003C\u002FTimelineHeader>\n\n        \u003C!-- Content -->\n      \u003C\u002FTimelineContent>\n    \u003C\u002FTimelineItem>\n  \u003C\u002FTimeline>\n\u003C\u002Ftemplate>\n","vue","",[119,197,193],{"__ignoreMap":195},[103,199,201],{"id":200},"examples","Examples",[203,204,205],"h3",{"id":125},"Horizontal",[95,207,208,209,212],{},"Switch the orientation with ",[119,210,211],{},"direction=\"horizontal\"",". The thread runs left-to-right and content stacks above or below each marker.",[99,214],{"name":215},"TimelineHorizontalDemo",[189,217,221],{"className":218,"code":219,"language":194,"meta":220},[192],"\u003Cscript setup lang=\"ts\">\nimport {\n  Timeline,\n  TimelineContent,\n  TimelineDescription,\n  TimelineHeader,\n  TimelineItem,\n  TimelineMedia,\n  TimelineTitle,\n} from \"@vuzeno\u002Fregistry\u002Fui\u002Ftimeline\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTimeline direction=\"horizontal\" class=\"w-full\">\n    \u003CTimelineItem>\n      \u003CTimelineMedia \u002F>\n      \u003CTimelineContent>\n        \u003CTimelineHeader>\n          \u003CTimelineTitle>Draft\u003C\u002FTimelineTitle>\n          \u003CTimelineDescription>Idea captured\u003C\u002FTimelineDescription>\n        \u003C\u002FTimelineHeader>\n      \u003C\u002FTimelineContent>\n    \u003C\u002FTimelineItem>\n\n    \u003C!-- more items... -->\n  \u003C\u002FTimeline>\n\u003C\u002Ftemplate>\n","showLineNumbers",[119,222,219],{"__ignoreMap":195},[203,224,226],{"id":225},"alternating-sides","Alternating sides",[95,228,229,230,232,233,235,236,167,239,242,243,245,246,248,249,136,251,253],{},"Use ",[119,231,156],{}," on ",[119,234,85],{}," to center the thread, then set each ",[119,237,238],{},"TimelineItem",[119,240,241],{},"side"," to ",[119,244,135],{}," or ",[119,247,139],{}," (or ",[119,250,143],{},[119,252,146],{}," for horizontal) to build an alternating layout.",[99,255],{"name":256},"TimelineSideDemo",[189,258,261],{"className":259,"code":260,"language":194,"meta":220},[192],"\u003Ctemplate>\n  \u003CTimeline align=\"center\" class=\"w-full max-w-md\">\n    \u003CTimelineItem side=\"left\">\n      \u003CTimelineMedia \u002F>\n      \u003CTimelineContent>\n        \u003CTimelineHeader>\n          \u003CTimelineTitle>Project kickoff\u003C\u002FTimelineTitle>\n          \u003CTimelineDescription>Monday · 9:00 AM\u003C\u002FTimelineDescription>\n        \u003C\u002FTimelineHeader>\n      \u003C\u002FTimelineContent>\n    \u003C\u002FTimelineItem>\n\n    \u003CTimelineItem side=\"right\">\n      \u003CTimelineMedia \u002F>\n      \u003CTimelineContent>\n        \u003CTimelineHeader>\n          \u003CTimelineTitle>Design review\u003C\u002FTimelineTitle>\n          \u003CTimelineDescription>Tuesday · 2:30 PM\u003C\u002FTimelineDescription>\n        \u003C\u002FTimelineHeader>\n      \u003C\u002FTimelineContent>\n    \u003C\u002FTimelineItem>\n\n    \u003C!-- more items... -->\n  \u003C\u002FTimeline>\n\u003C\u002Ftemplate>\n",[119,262,260],{"__ignoreMap":195},[103,264,266],{"id":265},"api-reference","API Reference",[203,268,85],{"id":269},"timeline",[271,272,273,289],"table",{},[274,275,276],"thead",{},[277,278,279,283,286],"tr",{},[280,281,282],"th",{},"Prop",[280,284,285],{},"Type",[280,287,288],{},"Default",[290,291,292,310,324],"tbody",{},[277,293,294,300,305],{},[295,296,297],"td",{},[119,298,299],{},"direction",[295,301,302],{},[119,303,304],{},"\"vertical\" | \"horizontal\"",[295,306,307],{},[119,308,309],{},"\"vertical\"",[277,311,312,316,321],{},[295,313,314],{},[119,315,241],{},[295,317,318],{},[119,319,320],{},"\"left\" | \"right\" | \"top\" | \"bottom\"",[295,322,323],{},"-",[277,325,326,331,336],{},[295,327,328],{},[119,329,330],{},"align",[295,332,333],{},[119,334,335],{},"\"start\" | \"center\"",[295,337,338],{},[119,339,340],{},"\"start\"",[203,342,238],{"id":343},"timelineitem",[271,345,346,356],{},[274,347,348],{},[277,349,350,352,354],{},[280,351,282],{},[280,353,285],{},[280,355,288],{},[290,357,358],{},[277,359,360,364,368],{},[295,361,362],{},[119,363,241],{},[295,365,366],{},[119,367,320],{},[295,369,370],{},"inherit",[203,372,166],{"id":373},"timelinemedia",[271,375,376,386],{},[274,377,378],{},[277,379,380,382,384],{},[280,381,282],{},[280,383,285],{},[280,385,288],{},[290,387,388],{},[277,389,390,394,399],{},[295,391,392],{},[119,393,170],{},[295,395,396],{},[119,397,398],{},"\"dot\" | \"icon\"",[295,400,401],{},[119,402,403],{},"\"dot\"",[103,405,407],{"id":406},"notes","Notes",[108,409,410,426],{},[111,411,412,415,416,418,419,422,423,425],{},[119,413,414],{},"align=\"start\""," (the default) produces a thread on one side of each item. Mixing per-item ",[119,417,241],{}," values in ",[119,420,421],{},"start"," mode will shift the thread between items — use ",[119,424,156],{}," for alternating layouts.",[111,427,428,429,432],{},"The connector line is hidden on the last item via a ",[119,430,431],{},"last:"," variant, so a single-item timeline shows only the marker.",{"title":195,"searchDepth":434,"depth":434,"links":435},2,[436,437,438,439,444,449],{"id":105,"depth":434,"text":106},{"id":174,"depth":434,"text":175},{"id":186,"depth":434,"text":187},{"id":200,"depth":434,"text":201,"children":440},[441,443],{"id":125,"depth":442,"text":205},3,{"id":225,"depth":442,"text":226},{"id":265,"depth":434,"text":266,"children":445},[446,447,448],{"id":269,"depth":442,"text":85},{"id":343,"depth":442,"text":238},{"id":373,"depth":442,"text":166},{"id":406,"depth":434,"text":407},"A vertical or horizontal thread for displaying sequential data with composable items, markers, and content.","md",{},true,"---\ntitle: Timeline\ndescription: A vertical or horizontal thread for displaying sequential data with composable items, markers, and content.\ntag: new\n---\n\nA composable timeline built from primitives. Use it to visualize an ordered sequence of events — logs, activity feeds, product journeys, or step-by-step stories — either top-to-bottom or left-to-right.\n\n::component-preview\n---\nname: TimelineDemo\n---\n::\n\n## Features\n\n- **Two directions** — Stack items top-to-bottom (`vertical`) or left-to-right (`horizontal`)\n- **Side control** — Place content on either side of the thread (`left`\u002F`right` for vertical, `top`\u002F`bottom` for horizontal)\n- **Centered thread** — Opt-in alternating layout with `align=\"center\"` for zigzag timelines\n- **Dot or icon markers** — Switch between a small dot or an icon slot via `TimelineMedia`'s `variant` prop\n\n## Installation\n\nInstall from the Vuzeno registry with the shadcn-vue CLI:\n\n::installation-tabs\n---\ncommand: shadcn-vue@latest add https:\u002F\u002Fvuzeno.com\u002Fr\u002Ftimeline.json\nexec: true\n---\n::\n\n## Anatomy\n\n```vue\n\u003Ctemplate>\n  \u003CTimeline direction=\"vertical\">\n    \u003CTimelineItem>\n      \u003CTimelineMedia variant=\"icon\" \u002F>\n\n      \u003CTimelineContent>\n        \u003CTimelineHeader>\n          \u003CTimelineTitle \u002F>\n          \u003CTimelineDescription \u002F>\n        \u003C\u002FTimelineHeader>\n\n        \u003C!-- Content -->\n      \u003C\u002FTimelineContent>\n    \u003C\u002FTimelineItem>\n  \u003C\u002FTimeline>\n\u003C\u002Ftemplate>\n```\n\n## Examples\n\n### Horizontal\n\nSwitch the orientation with `direction=\"horizontal\"`. The thread runs left-to-right and content stacks above or below each marker.\n\n::component-preview\n---\nname: TimelineHorizontalDemo\n---\n::\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport {\n  Timeline,\n  TimelineContent,\n  TimelineDescription,\n  TimelineHeader,\n  TimelineItem,\n  TimelineMedia,\n  TimelineTitle,\n} from \"@vuzeno\u002Fregistry\u002Fui\u002Ftimeline\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTimeline direction=\"horizontal\" class=\"w-full\">\n    \u003CTimelineItem>\n      \u003CTimelineMedia \u002F>\n      \u003CTimelineContent>\n        \u003CTimelineHeader>\n          \u003CTimelineTitle>Draft\u003C\u002FTimelineTitle>\n          \u003CTimelineDescription>Idea captured\u003C\u002FTimelineDescription>\n        \u003C\u002FTimelineHeader>\n      \u003C\u002FTimelineContent>\n    \u003C\u002FTimelineItem>\n\n    \u003C!-- more items... -->\n  \u003C\u002FTimeline>\n\u003C\u002Ftemplate>\n```\n\n### Alternating sides\n\nUse `align=\"center\"` on `Timeline` to center the thread, then set each `TimelineItem`'s `side` to `left` or `right` (or `top`\u002F`bottom` for horizontal) to build an alternating layout.\n\n::component-preview\n---\nname: TimelineSideDemo\n---\n::\n\n```vue showLineNumbers\n\u003Ctemplate>\n  \u003CTimeline align=\"center\" class=\"w-full max-w-md\">\n    \u003CTimelineItem side=\"left\">\n      \u003CTimelineMedia \u002F>\n      \u003CTimelineContent>\n        \u003CTimelineHeader>\n          \u003CTimelineTitle>Project kickoff\u003C\u002FTimelineTitle>\n          \u003CTimelineDescription>Monday · 9:00 AM\u003C\u002FTimelineDescription>\n        \u003C\u002FTimelineHeader>\n      \u003C\u002FTimelineContent>\n    \u003C\u002FTimelineItem>\n\n    \u003CTimelineItem side=\"right\">\n      \u003CTimelineMedia \u002F>\n      \u003CTimelineContent>\n        \u003CTimelineHeader>\n          \u003CTimelineTitle>Design review\u003C\u002FTimelineTitle>\n          \u003CTimelineDescription>Tuesday · 2:30 PM\u003C\u002FTimelineDescription>\n        \u003C\u002FTimelineHeader>\n      \u003C\u002FTimelineContent>\n    \u003C\u002FTimelineItem>\n\n    \u003C!-- more items... -->\n  \u003C\u002FTimeline>\n\u003C\u002Ftemplate>\n```\n\n## API Reference\n\n### Timeline\n\n| Prop        | Type                                              | Default      |\n| ----------- | ------------------------------------------------- | ------------ |\n| `direction` | `\"vertical\" \\| \"horizontal\"`                      | `\"vertical\"` |\n| `side`      | `\"left\" \\| \"right\" \\| \"top\" \\| \"bottom\"`          | -            |\n| `align`     | `\"start\" \\| \"center\"`                             | `\"start\"`    |\n\n### TimelineItem\n\n| Prop   | Type                                     | Default |\n| ------ | ---------------------------------------- | ------- |\n| `side` | `\"left\" \\| \"right\" \\| \"top\" \\| \"bottom\"` | inherit |\n\n### TimelineMedia\n\n| Prop      | Type              | Default |\n| --------- | ----------------- | ------- |\n| `variant` | `\"dot\" \\| \"icon\"` | `\"dot\"` |\n\n## Notes\n\n- `align=\"start\"` (the default) produces a thread on one side of each item. Mixing per-item `side` values in `start` mode will shift the thread between items — use `align=\"center\"` for alternating layouts.\n- The connector line is hidden on the last item via a `last:` variant, so a single-item timeline shows only the marker.\n",{"title":85,"description":450},"pOYc5J-FEss3ddEqeCVLoV4FhLpkgt9lxTBpOkawRas",[458,17],{"title":81,"path":82,"stem":83,"children":-1},1776511812844]