[{"data":1,"prerenderedAt":287},["ShallowReactive",2],{"navigation":3,"\u002Fdocs\u002Finstallation":66,"surround-\u002Fdocs\u002Finstallation":284},[4],{"title":5,"path":6,"stem":7,"children":8,"page":14},"Docs","\u002Fdocs","docs",[9,16,20,60],{"title":10,"path":11,"stem":12,"navigation":13,"new":14,"soon":14,"hide":14,"type":15,"children":-1},"Introduction","\u002Fdocs\u002Fintroduction","docs\u002F01.introduction",null,false,"page",{"title":17,"path":18,"stem":19,"navigation":13,"new":14,"soon":14,"hide":14,"type":15,"children":-1},"Installation","\u002Fdocs\u002Finstallation","docs\u002F02.installation",{"title":21,"path":22,"stem":23,"children":24,"navigation":13,"new":14,"soon":14,"hide":14,"type":59},"Components","\u002Fdocs\u002Fcomponents","docs\u002F03.components",[25,31,35,39,43,47,51,55],{"title":26,"path":27,"stem":28,"navigation":13,"new":29,"soon":14,"hide":14,"type":30,"children":-1},"Autocomplete","\u002Fdocs\u002Fcomponents\u002Fautocomplete","docs\u002F03.components\u002F01.autocomplete",true,"component",{"title":32,"path":33,"stem":34,"navigation":13,"new":29,"soon":14,"hide":14,"type":30,"children":-1},"Show More","\u002Fdocs\u002Fcomponents\u002Fshow-more","docs\u002F03.components\u002F02.show-more",{"title":36,"path":37,"stem":38,"navigation":13,"new":29,"soon":14,"hide":14,"type":30,"children":-1},"Typography","\u002Fdocs\u002Fcomponents\u002Ftypography","docs\u002F03.components\u002F03.typography",{"title":40,"path":41,"stem":42,"navigation":13,"new":14,"soon":29,"hide":14,"type":30,"children":-1},"Code Block","\u002Fdocs\u002Fcomponents\u002Fcode-block","docs\u002F03.components\u002Fcode-block",{"title":44,"path":45,"stem":46,"navigation":13,"new":14,"soon":29,"hide":14,"type":30,"children":-1},"Code Snippet","\u002Fdocs\u002Fcomponents\u002Fcode-snippet","docs\u002F03.components\u002Fcode-snippet",{"title":48,"path":49,"stem":50,"navigation":13,"new":14,"soon":29,"hide":14,"type":30,"children":-1},"Guided Tour","\u002Fdocs\u002Fcomponents\u002Fguided-tour","docs\u002F03.components\u002Fguided-tour",{"title":52,"path":53,"stem":54,"navigation":13,"new":14,"soon":29,"hide":14,"type":30,"children":-1},"Meter","\u002Fdocs\u002Fcomponents\u002Fmeter","docs\u002F03.components\u002Fmeter",{"title":56,"path":57,"stem":58,"navigation":13,"new":14,"soon":29,"hide":14,"type":30,"children":-1},"Star Rating","\u002Fdocs\u002Fcomponents\u002Fstar-rating","docs\u002F03.components\u002Fstar-rating","group",{"title":61,"path":62,"stem":63,"children":64,"navigation":13,"new":14,"soon":29,"hide":29,"type":59},"Animations","\u002Fdocs\u002Fanimation","docs\u002F04.animation\u002Findex",[65],{"title":61,"path":62,"stem":63,"navigation":13,"new":14,"soon":29,"hide":29,"type":15,"children":-1},{"id":67,"title":17,"body":68,"component":14,"description":277,"extension":278,"hide":14,"lastUpdated":279,"links":13,"meta":280,"navigation":13,"new":14,"path":18,"rawbody":281,"seo":282,"soon":14,"stem":19,"__hash__":283},"content\u002Fdocs\u002F02.installation.md",{"type":69,"value":70,"toc":266},"minimark",[71,75,80,83,103,122,126,136,141,148,158,165,171,174,180,184,190,209,217,223,229,233,242,248,252,255,259],[72,73,74],"p",{},"Sulaf components are distributed as raw source code that you add directly to your project. This gives you full control and ownership over the implementation.",[76,77,79],"h2",{"id":78},"prerequisites","Prerequisites",[72,81,82],{},"Before adding Sulaf components, you need an existing project with:",[84,85,86,93,98],"ul",{},[87,88,89],"li",{},[90,91,92],"strong",{},"Vue 3.4+",[87,94,95],{},[90,96,97],{},"Tailwind CSS",[87,99,100],{},[90,101,102],{},"shadcn-vue",[72,104,105,106,109,110,117,118,121],{},"If you haven't set up ",[107,108,102],"code",{}," yet, follow their ",[111,112,116],"a",{"href":113,"rel":114},"https:\u002F\u002Fshadcn-vue.com\u002Fdocs\u002Finstallation",[115],"nofollow","installation guide",". Your project must have a valid ",[107,119,120],{},"components.json"," file.",[76,123,125],{"id":124},"choose-your-installation-method","Choose your installation method",[72,127,128,129,132,133,135],{},"You can add components using the ",[90,130,131],{},"Sulaf CLI"," (the fastest method) or by leveraging the standard ",[90,134,102],{}," CLI.",[137,138,140],"h3",{"id":139},"method-1-using-sulaf-cli-recommended","Method 1: Using Sulaf CLI (Recommended)",[72,142,143,144,147],{},"The dedicated ",[107,145,146],{},"sulaf"," acts as a seamless wrapper, letting you add components with zero extra configuration.",[149,150,156],"pre",{"className":151,"code":153,"language":154,"meta":155},[152],"language-bash","npx sulaf@latest \u003Ccomponent-name>\n","bash","",[107,157,153],{"__ignoreMap":155},[72,159,160,161,164],{},"For example, to add the ",[107,162,163],{},"autocomplete"," component:",[149,166,169],{"className":167,"code":168,"language":154,"meta":155},[152],"npx sulaf@latest autocomplete\n",[107,170,168],{"__ignoreMap":155},[72,172,173],{},"You can install all components at once with:",[149,175,178],{"className":176,"code":177,"language":154,"meta":155},[152],"npx sulaf@latest all\n",[107,179,177],{"__ignoreMap":155},[137,181,183],{"id":182},"method-2-registry-setup-usnig-shadcn-vue-cli-directly","Method 2: Registry Setup (usnig shadcn-vue CLI directly)",[72,185,186,187,189],{},"If you prefer using the standard ",[107,188,102],{}," CLI, you can register Sulaf as a recognized component source within your project.",[191,192,193,198],"ol",{},[87,194,195,196,121],{},"Open your ",[107,197,120],{},[87,199,200,201,204,205,208],{},"Add ",[107,202,203],{},"@sulaf"," to the ",[107,206,207],{},"registries"," object:",[149,210,215],{"className":211,"code":213,"language":214,"meta":155},[212],"language-json","{\n  \"aliases\": { ... },\n  \"registries\": {\n    \"@sulaf\": \"https:\u002F\u002Fsulaf-socd8d.cranl.net\u002Fr\u002Fcomponents\u002F{name}.json\"\n  }\n}\n","json",[107,216,213],{"__ignoreMap":155},[191,218,220],{"start":219},3,[87,221,222],{},"Add components using the shorthand prefix:",[149,224,227],{"className":225,"code":226,"language":154,"meta":155},[152],"npx shadcn-vue@latest add @sulaf\u002Fautocomplete\n",[107,228,226],{"__ignoreMap":155},[137,230,232],{"id":231},"method-3-direct-url-shadcn-vue-cli","Method 3: Direct URL (shadcn-vue CLI)",[72,234,235,236,238,239,241],{},"If you don't want to modify your ",[107,237,120],{}," registry, you can pass the direct URL to the ",[107,240,102],{}," CLI:",[149,243,246],{"className":244,"code":245,"language":154,"meta":155},[152],"npx shadcn-vue@latest add https:\u002F\u002Fsulaf-socd8d.cranl.net\u002Fr\u002Fcomponents\u002Fautocomplete.json\n",[107,247,245],{"__ignoreMap":155},[137,249,251],{"id":250},"method-4-manual-installation","Method 4: Manual installation",[72,253,254],{},"You can also copy component source code directly from our documentation pages into your project. Each page includes the required snippets, dependency list, and usage examples.",[76,256,258],{"id":257},"next-steps","Next Steps",[72,260,261,262,265],{},"Start ",[111,263,264],{"href":22},"Browsing Components"," to see what's available.",{"title":155,"searchDepth":267,"depth":267,"links":268},2,[269,270,276],{"id":78,"depth":267,"text":79},{"id":124,"depth":267,"text":125,"children":271},[272,273,274,275],{"id":139,"depth":219,"text":140},{"id":182,"depth":219,"text":183},{"id":231,"depth":219,"text":232},{"id":250,"depth":219,"text":251},{"id":257,"depth":267,"text":258},"Learn how to set up Sulaf in your project using our CLI or shadcn-vue.","md","2026-04-14T18:14:16.944Z",{},"---\ntitle: Installation\ndescription: Learn how to set up Sulaf in your project using our CLI or shadcn-vue.\n---\n\nSulaf components are distributed as raw source code that you add directly to your project. This gives you full control and ownership over the implementation.\n\n## Prerequisites\n\nBefore adding Sulaf components, you need an existing project with:\n\n- **Vue 3.4+**\n- **Tailwind CSS**\n- **shadcn-vue**\n\nIf you haven't set up `shadcn-vue` yet, follow their [installation guide](https:\u002F\u002Fshadcn-vue.com\u002Fdocs\u002Finstallation). Your project must have a valid `components.json` file.\n\n## Choose your installation method\n\nYou can add components using the **Sulaf CLI** (the fastest method) or by leveraging the standard **shadcn-vue** CLI.\n\n### Method 1: Using Sulaf CLI (Recommended)\n\nThe dedicated `sulaf` acts as a seamless wrapper, letting you add components with zero extra configuration.\n\n```bash\nnpx sulaf@latest \u003Ccomponent-name>\n```\n\nFor example, to add the `autocomplete` component:\n\n```bash\nnpx sulaf@latest autocomplete\n```\n\nYou can install all components at once with:\n\n```bash\nnpx sulaf@latest all\n```\n\n### Method 2: Registry Setup (usnig shadcn-vue CLI directly)\n\nIf you prefer using the standard `shadcn-vue` CLI, you can register Sulaf as a recognized component source within your project.\n\n1. Open your `components.json` file.\n2. Add `@sulaf` to the `registries` object:\n\n```json\n{\n  \"aliases\": { ... },\n  \"registries\": {\n    \"@sulaf\": \"https:\u002F\u002Fsulaf-socd8d.cranl.net\u002Fr\u002Fcomponents\u002F{name}.json\"\n  }\n}\n```\n\n3. Add components using the shorthand prefix:\n\n```bash\nnpx shadcn-vue@latest add @sulaf\u002Fautocomplete\n```\n\n### Method 3: Direct URL (shadcn-vue CLI)\n\nIf you don't want to modify your `components.json` registry, you can pass the direct URL to the `shadcn-vue` CLI:\n\n```bash\nnpx shadcn-vue@latest add https:\u002F\u002Fsulaf-socd8d.cranl.net\u002Fr\u002Fcomponents\u002Fautocomplete.json\n```\n\n### Method 4: Manual installation\n\nYou can also copy component source code directly from our documentation pages into your project. Each page includes the required snippets, dependency list, and usage examples.\n\n## Next Steps\n\nStart [Browsing Components](\u002Fdocs\u002Fcomponents) to see what's available.\n",{"title":17,"description":277},"HZ0wk9ZdAQms5b1R0HB3WlT3sArEHMdoolQc27LFSb8",[285,286],{"title":10,"path":11,"stem":12,"children":-1},{"title":21,"path":22,"stem":23,"children":-1},1776190579459]