[{"data":1,"prerenderedAt":385},["ShallowReactive",2],{"navigation_docs_en":3,"-en-getting-started-quick-start":44,"-en-getting-started-quick-start-surround":381},[4,22],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fen\u002Fgetting-started","en\u002F1.getting-started",[10,14,18],{"title":11,"path":12,"stem":13},"Quick Start","\u002Fen\u002Fgetting-started\u002Fquick-start","en\u002F1.getting-started\u002F2.quick-start",{"title":15,"path":16,"stem":17},"Installation","\u002Fen\u002Fgetting-started\u002Finstallation","en\u002F1.getting-started\u002Finstallation",{"title":19,"path":20,"stem":21},"Introduction","\u002Fen\u002Fgetting-started\u002Fintroduction","en\u002F1.getting-started\u002Fintroduction",{"title":23,"icon":24,"path":25,"stem":26,"children":27,"page":6},"Components","humbleicons:layers","\u002Fen\u002Fcomponents","en\u002F2.components",[28,32,36,40],{"title":29,"path":30,"stem":31},"Copy","\u002Fen\u002Fcomponents\u002Fcopy","en\u002F2.components\u002Fcopy",{"title":33,"path":34,"stem":35},"Full Screen Dialog","\u002Fen\u002Fcomponents\u002Ffull-screen-dialog","en\u002F2.components\u002Ffull-screen-dialog",{"title":37,"path":38,"stem":39},"Inline Tip","\u002Fen\u002Fcomponents\u002Finline-tip","en\u002F2.components\u002Finline-tip",{"title":41,"path":42,"stem":43},"Status Badge","\u002Fen\u002Fcomponents\u002Fstatus-badge","en\u002F2.components\u002Fstatus-badge",{"id":45,"title":11,"body":46,"description":375,"extension":376,"links":377,"meta":378,"navigation":285,"path":12,"seo":379,"stem":13,"__hash__":380},"docs_en\u002Fen\u002F1.getting-started\u002F2.quick-start.md",{"type":47,"value":48,"toc":369},"minimark",[49,53,58,69,73,76,83,110,113,156,160,167,170,190,197,201,204,362,365],[50,51,52],"p",{},"This guide will demonstrate how to quickly integrate a component into your project.",[54,55,57],"h2",{"id":56},"step-1-choose-a-component","Step 1: Choose a Component",[50,59,60,61,68],{},"Browse the component list on the left to find a component that suits your needs. For example, let's choose the ",[62,63,64],"strong",{},[65,66,29],"a",{"href":67},"..\u002Fdocs\u002Fcomponents\u002Fcopy"," component.",[54,70,72],{"id":71},"step-2-check-dependencies","Step 2: Check Dependencies",[50,74,75],{},"At the top or in the description of the component documentation page, it will usually state whether the component depends on other Shadcn Vue components.",[50,77,78,79,82],{},"For the ",[80,81,29],"code",{}," component, it depends on:",[84,85,86,93,98,104],"ul",{},[87,88,89,92],"li",{},[80,90,91],{},"Button"," component",[87,94,95,92],{},[80,96,97],{},"Tooltip",[87,99,100,103],{},[80,101,102],{},"@lucide\u002Fvue"," icons",[87,105,106,109],{},[80,107,108],{},"@vueuse\u002Fcore"," (for clipboard functionality)",[50,111,112],{},"Ensure that you have installed these dependencies in your project:",[114,115,120],"pre",{"className":116,"code":117,"language":118,"meta":119,"style":119},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx shadcn-vue@latest add button tooltip\nnpm install @vueuse\u002Fcore\n","bash","",[80,121,122,144],{"__ignoreMap":119},[123,124,127,131,135,138,141],"span",{"class":125,"line":126},"line",1,[123,128,130],{"class":129},"sBMFI","npx",[123,132,134],{"class":133},"sfazB"," shadcn-vue@latest",[123,136,137],{"class":133}," add",[123,139,140],{"class":133}," button",[123,142,143],{"class":133}," tooltip\n",[123,145,147,150,153],{"class":125,"line":146},2,[123,148,149],{"class":129},"npm",[123,151,152],{"class":133}," install",[123,154,155],{"class":133}," @vueuse\u002Fcore\n",[54,157,159],{"id":158},"step-3-copy-code","Step 3: Copy Code",[50,161,162,163,166],{},"Click the ",[62,164,165],{},"Code"," tab below the component preview. You will see the source code of the component.",[50,168,169],{},"Usually includes:",[84,171,172,179],{},[87,173,174,175,178],{},"Component file (e.g., ",[80,176,177],{},"Copy.vue",")",[87,180,181,182,185,186,189],{},"Style variant file (e.g., ",[80,183,184],{},"index.ts",", if ",[80,187,188],{},"cva"," is used)",[50,191,192,193,196],{},"Copy these files to your project, it is recommended to keep the same directory structure, e.g., ",[80,194,195],{},"components\u002Fprop-ui\u002Fcopy\u002F",".",[54,198,200],{"id":199},"step-4-use-component","Step 4: Use Component",[50,202,203],{},"Now you can use the component in your application:",[114,205,209],{"className":206,"code":207,"language":208,"meta":119,"style":119},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { Copy } from '@\u002Fcomponents\u002Fprop-ui\u002Fcopy'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv class=\"p-4\">\n        \u003CCopy content=\"Hello, PropShow Kit!\" \u002F>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[80,210,211,242,270,280,287,297,320,343,353],{"__ignoreMap":119},[123,212,213,217,221,225,228,231,234,237,239],{"class":125,"line":126},[123,214,216],{"class":215},"sMK4o","\u003C",[123,218,220],{"class":219},"swJcz","script",[123,222,224],{"class":223},"spNyl"," setup",[123,226,227],{"class":223}," lang",[123,229,230],{"class":215},"=",[123,232,233],{"class":215},"\"",[123,235,236],{"class":133},"ts",[123,238,233],{"class":215},[123,240,241],{"class":215},">\n",[123,243,244,248,251,255,258,261,264,267],{"class":125,"line":146},[123,245,247],{"class":246},"s7zQu","import",[123,249,250],{"class":215}," {",[123,252,254],{"class":253},"sTEyZ"," Copy",[123,256,257],{"class":215}," }",[123,259,260],{"class":246}," from",[123,262,263],{"class":215}," '",[123,265,266],{"class":133},"@\u002Fcomponents\u002Fprop-ui\u002Fcopy",[123,268,269],{"class":215},"'\n",[123,271,273,276,278],{"class":125,"line":272},3,[123,274,275],{"class":215},"\u003C\u002F",[123,277,220],{"class":219},[123,279,241],{"class":215},[123,281,283],{"class":125,"line":282},4,[123,284,286],{"emptyLinePlaceholder":285},true,"\n",[123,288,290,292,295],{"class":125,"line":289},5,[123,291,216],{"class":215},[123,293,294],{"class":219},"template",[123,296,241],{"class":215},[123,298,300,303,306,309,311,313,316,318],{"class":125,"line":299},6,[123,301,302],{"class":215},"    \u003C",[123,304,305],{"class":219},"div",[123,307,308],{"class":223}," class",[123,310,230],{"class":215},[123,312,233],{"class":215},[123,314,315],{"class":133},"p-4",[123,317,233],{"class":215},[123,319,241],{"class":215},[123,321,323,326,328,331,333,335,338,340],{"class":125,"line":322},7,[123,324,325],{"class":215},"        \u003C",[123,327,29],{"class":219},[123,329,330],{"class":223}," content",[123,332,230],{"class":215},[123,334,233],{"class":215},[123,336,337],{"class":133},"Hello, PropShow Kit!",[123,339,233],{"class":215},[123,341,342],{"class":215}," \u002F>\n",[123,344,346,349,351],{"class":125,"line":345},8,[123,347,348],{"class":215},"    \u003C\u002F",[123,350,305],{"class":219},[123,352,241],{"class":215},[123,354,356,358,360],{"class":125,"line":355},9,[123,357,275],{"class":215},[123,359,294],{"class":219},[123,361,241],{"class":215},[50,363,364],{},"It's that simple! You can modify the component code as needed to perfectly fit your project requirements.",[366,367,368],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":119,"searchDepth":146,"depth":146,"links":370},[371,372,373,374],{"id":56,"depth":146,"text":57},{"id":71,"depth":146,"text":72},{"id":158,"depth":146,"text":159},{"id":199,"depth":146,"text":200},"Quickly integrate PropShow Kit components into your project.","md",[],{},{"title":11,"description":375},"iZ72wOAGPS8DYgGhz_JawPsZ6fUtXAEbc0Mg4OA1vGQ",[382,383],null,{"title":15,"path":16,"stem":17,"description":384,"children":-1},"How to use PropShow Kit components in your project.",1774595237451]