[{"data":1,"prerenderedAt":303},["ShallowReactive",2],{"navigation":3,"\u002Fdocs\u002Fgetting-started":89,"surround-\u002Fdocs\u002Fgetting-started":300},[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":20,"body":91,"description":292,"extension":293,"meta":294,"navigation":296,"path":21,"rawbody":297,"seo":298,"stem":22,"tag":17,"__hash__":299},"content\u002Fdocs\u002F2.getting-started.md",{"type":92,"value":93,"toc":281},"minimark",[94,99,103,126,137,141,153,163,167,176,189,192,197,231,238,243,246,250,253,257,260,278],[95,96,98],"h2",{"id":97},"prerequisites","Prerequisites",[100,101,102],"p",{},"Before installing Vuzeno components, make sure you have:",[104,105,106,114,120],"ul",{},[107,108,109,113],"li",{},[110,111,112],"strong",{},"Vue 3.5+"," — Vuzeno uses the latest Vue features",[107,115,116,119],{},[110,117,118],{},"Tailwind CSS 4"," — For styling components",[107,121,122,125],{},[110,123,124],{},"shadcn-vue"," — Vuzeno extends shadcn-vue, so you'll need an existing setup",[100,127,128,129,136],{},"If you haven't set up shadcn-vue yet, follow their ",[130,131,135],"a",{"href":132,"rel":133},"https:\u002F\u002Fwww.shadcn-vue.com\u002Fdocs\u002Finstallation",[134],"nofollow","installation guide"," first.",[95,138,140],{"id":139},"registry-setup","Registry setup",[100,142,143,144,148,149,152],{},"Add Vuzeno to your ",[145,146,147],"code",{},"components.json"," registries so you can install components with the ",[145,150,151],{},"@vuzeno\u002F"," shorthand:",[154,155,161],"pre",{"className":156,"code":158,"language":159,"meta":160},[157],"language-json","{\n  \"registries\": {\n    \"@vuzeno\": \"https:\u002F\u002Fvuzeno.com\u002Fr\u002F{name}.json\"\n  }\n}\n","json","",[145,162,158],{"__ignoreMap":160},[95,164,166],{"id":165},"installation","Installation",[100,168,169,170,175],{},"Vuzeno is a ",[130,171,174],{"href":172,"rel":173},"https:\u002F\u002Fwww.shadcn-vue.com\u002Fdocs\u002Fregistry",[134],"shadcn-vue registry",". Install components with the shadcn-vue CLI.",[100,177,178,181,182,185,186,188],{},[110,179,180],{},"Requirements:"," Your project must already be set up with shadcn-vue (run ",[145,183,184],{},"bunx shadcn-vue@latest init"," if needed) and have a ",[145,187,147],{}," file.",[100,190,191],{},"Add a Vuzeno component:",[193,194],"installation-tabs",{":exec":195,"command":196},"true","shadcn-vue@latest add @vuzeno\u002F[component]",[100,198,199,200,203,204,207,208,207,211,207,214,207,217,207,220,223,224,227,228],{},"Replace ",[145,201,202],{},"[component]"," with the component name: ",[145,205,206],{},"autocomplete",", ",[145,209,210],{},"filters",[145,212,213],{},"image",[145,215,216],{},"image-viewer",[145,218,219],{},"gallery",[145,221,222],{},"phone-field",", or ",[145,225,226],{},"time-field",". Without registry setup, you can also install by URL: ",[145,229,230],{},"shadcn-vue add https:\u002F\u002Fvuzeno.com\u002Fr\u002F[component].json",[100,232,233,234,237],{},"The CLI will install the component and its registry dependencies (e.g. shadcn-vue Combobox, Input Group) into your project. Some components list extra npm dependencies on their docs (e.g. ",[145,235,236],{},"libphonenumber-js"," for Phone Field)—install those if prompted or as shown on the component page.",[239,240,242],"h3",{"id":241},"manual-installation","Manual installation",[100,244,245],{},"You can also copy component source code from the docs into your project. Each component page includes dependencies, source snippets, and usage examples.",[95,247,249],{"id":248},"typescript","TypeScript",[100,251,252],{},"Vuzeno is written in TypeScript and provides full type definitions. No additional configuration is required — types are inferred automatically.",[95,254,256],{"id":255},"next-steps","Next Steps",[100,258,259],{},"Ready to add your first component? Check out:",[104,261,262,268,273],{},[107,263,264,267],{},[130,265,266],{"href":74},"Phone Field"," — A great starting point with auto-formatting and validation",[107,269,270,272],{},[130,271,61],{"href":62}," — Enhanced images with zoom capabilities",[107,274,275,277],{},[130,276,53],{"href":54}," — Build complex filtering interfaces",[100,279,280],{},"Each component page includes detailed documentation, props reference, and usage examples.",{"title":160,"searchDepth":282,"depth":282,"links":283},2,[284,285,286,290,291],{"id":97,"depth":282,"text":98},{"id":139,"depth":282,"text":140},{"id":165,"depth":282,"text":166,"children":287},[288],{"id":241,"depth":289,"text":242},3,{"id":248,"depth":282,"text":249},{"id":255,"depth":282,"text":256},"Start using Vuzeno","md",{"name":295},"getting-started",true,"---\ntitle: Getting Started\ndescription: Start using Vuzeno\nname: getting-started\n---\n\n## Prerequisites\n\nBefore installing Vuzeno components, make sure you have:\n\n- **Vue 3.5+** — Vuzeno uses the latest Vue features\n- **Tailwind CSS 4** — For styling components\n- **shadcn-vue** — Vuzeno extends shadcn-vue, so you'll need an existing setup\n\nIf you haven't set up shadcn-vue yet, follow their [installation guide](https:\u002F\u002Fwww.shadcn-vue.com\u002Fdocs\u002Finstallation) first.\n\n## Registry setup\n\nAdd Vuzeno to your `components.json` registries so you can install components with the `@vuzeno\u002F` shorthand:\n\n```json\n{\n  \"registries\": {\n    \"@vuzeno\": \"https:\u002F\u002Fvuzeno.com\u002Fr\u002F{name}.json\"\n  }\n}\n```\n\n## Installation\n\nVuzeno is a [shadcn-vue registry](https:\u002F\u002Fwww.shadcn-vue.com\u002Fdocs\u002Fregistry). Install components with the shadcn-vue CLI.\n\n**Requirements:** Your project must already be set up with shadcn-vue (run `bunx shadcn-vue@latest init` if needed) and have a `components.json` file.\n\nAdd a Vuzeno component:\n\n::installation-tabs\n---\ncommand: shadcn-vue@latest add @vuzeno\u002F[component]\nexec: true\n---\n::\n\nReplace `[component]` with the component name: `autocomplete`, `filters`, `image`, `image-viewer`, `gallery`, `phone-field`, or `time-field`. Without registry setup, you can also install by URL: `shadcn-vue add https:\u002F\u002Fvuzeno.com\u002Fr\u002F[component].json`\n\nThe CLI will install the component and its registry dependencies (e.g. shadcn-vue Combobox, Input Group) into your project. Some components list extra npm dependencies on their docs (e.g. `libphonenumber-js` for Phone Field)—install those if prompted or as shown on the component page.\n\n### Manual installation\n\nYou can also copy component source code from the docs into your project. Each component page includes dependencies, source snippets, and usage examples.\n\n## TypeScript\n\nVuzeno is written in TypeScript and provides full type definitions. No additional configuration is required — types are inferred automatically.\n\n## Next Steps\n\nReady to add your first component? Check out:\n\n- [Phone Field](\u002Fdocs\u002Fcomponents\u002Fphone-field) — A great starting point with auto-formatting and validation\n- [Image](\u002Fdocs\u002Fcomponents\u002Fimage) — Enhanced images with zoom capabilities\n- [Filters](\u002Fdocs\u002Fcomponents\u002Ffilters) — Build complex filtering interfaces\n\nEach component page includes detailed documentation, props reference, and usage examples.\n",{"title":20,"description":292},"8Dwc4RupwXDTiavmkSkPLkBOZa7xPRf1JhZXJR9Obhw",[301,302],{"title":14,"path":15,"stem":16,"children":-1},{"title":24,"path":25,"stem":26,"children":-1},1776810304720]