[{"data":1,"prerenderedAt":157},["ShallowReactive",2],{"navigation":3,"\u002Fdocs\u002Fintroduction":66,"surround-\u002Fdocs\u002Fintroduction":155},[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":10,"body":68,"component":14,"description":148,"extension":149,"hide":14,"lastUpdated":150,"links":13,"meta":151,"navigation":13,"new":14,"path":11,"rawbody":152,"seo":153,"soon":14,"stem":12,"__hash__":154},"content\u002Fdocs\u002F01.introduction.md",{"type":69,"value":70,"toc":141},"minimark",[71,80,102,107,123,127,130,134],[72,73,74,75,79],"p",{},"Welcome to ",[76,77,78],"strong",{},"Sulaf",". This is a collection of re-usable components that you can copy and paste into your apps.",[72,81,82,83,90,91,93,94,97,98,101],{},"If you use ",[84,85,89],"a",{"href":86,"rel":87},"https:\u002F\u002Fwww.shadcn-vue.com",[88],"nofollow","shadcn-vue"," you will find it easy to use these components. ",[76,92,78],{}," is a ",[76,95,96],{},"registry"," that contains a set of components that extend and make ",[84,99,89],{"href":86,"rel":100},[88]," more powerful than ever.",[103,104,106],"h2",{"id":105},"what-is-sulaf","What is Sulaf?",[72,108,109,113,114,118,119,122],{},[84,110,78],{"href":111,"rel":112},"https:\u002F\u002Fwww.almaany.com\u002Fen\u002Fdict\u002Far-en\u002F%D8%B3%D9%84%D8%A7%D9%81\u002F",[88]," ",[115,116,117],"code",{},"سٌلاف"," (it's pronounced as ",[115,120,121],{},"su-laaf",") is an authentic Arabic feminine name, meaning the finest and best type of wine, or the purest and best part of anything. The name reflects meanings of purity, refinement, and advancement.",[103,124,126],{"id":125},"why-i-built-sulaf","Why I built Sulaf?",[72,128,129],{},"I built it because I wanted it, I needed it, and I believe it will help many developers build beautiful interfaces faster and more easily. The second reason is that I noticed there are very few shadcn-vue registries available for Vue, and the ones that exist aren't quite there yet. In contrast, for React, you'll find countless shadcn registries. So, I decided to create my own and share it.",[103,131,133],{"id":132},"whats-next","What's Next?",[72,135,136,137,140],{},"Start ",[84,138,139],{"href":18},"Installing"," to see how to start using Sulaf.",{"title":142,"searchDepth":143,"depth":143,"links":144},"",2,[145,146,147],{"id":105,"depth":143,"text":106},{"id":125,"depth":143,"text":126},{"id":132,"depth":143,"text":133},"Beautiful, accessible Vue components built for shadcn-vue. Copy, paste, and make them yours.","md","2026-04-14T18:14:16.944Z",{},"---\ntitle: Introduction\ndescription: Beautiful, accessible Vue components built for shadcn-vue. Copy, paste, and make them yours.\n---\n\nWelcome to **Sulaf**. This is a collection of re-usable components that you can copy and paste into your apps.\n\nIf you use [shadcn-vue](https:\u002F\u002Fwww.shadcn-vue.com) you will find it easy to use these components. **Sulaf** is a **registry** that contains a set of components that extend and make [shadcn-vue](https:\u002F\u002Fwww.shadcn-vue.com) more powerful than ever.\n\n## What is Sulaf?\n\n[Sulaf](https:\u002F\u002Fwww.almaany.com\u002Fen\u002Fdict\u002Far-en\u002F%D8%B3%D9%84%D8%A7%D9%81\u002F) `سٌلاف` (it's pronounced as `su-laaf`) is an authentic Arabic feminine name, meaning the finest and best type of wine, or the purest and best part of anything. The name reflects meanings of purity, refinement, and advancement.\n\n## Why I built Sulaf?\n\nI built it because I wanted it, I needed it, and I believe it will help many developers build beautiful interfaces faster and more easily. The second reason is that I noticed there are very few shadcn-vue registries available for Vue, and the ones that exist aren't quite there yet. In contrast, for React, you'll find countless shadcn registries. So, I decided to create my own and share it.\n\n## What's Next?\n\n\u003C!-- Ready to build? Head over to the [Installation](\u002Fdocs\u002Finstallation) guide to set up your environment, or  -->\n\nStart [Installing](\u002Fdocs\u002Finstallation) to see how to start using Sulaf.\n",{"title":10,"description":148},"_URtUrE8W8XHuljZ9uiZEnf_Yl227G11SrTeJZQoYhg",[13,156],{"title":17,"path":18,"stem":19,"children":-1},1776190579270]