[{"data":1,"prerenderedAt":518},["ShallowReactive",2],{"navigation_docs_en":3,"-en-getting-started-installation":44,"-en-getting-started-installation-surround":513},[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":15,"body":46,"description":507,"extension":508,"links":509,"meta":510,"navigation":169,"path":16,"seo":511,"stem":17,"__hash__":512},"docs_en\u002Fen\u002F1.getting-started\u002Finstallation.md",{"type":47,"value":48,"toc":501},"minimark",[49,53,58,72,75,106,110,120,279,283,314,318,325,367,497],[50,51,52],"p",{},"PropShow Kit is not an npm package, so you don't need to install it. Instead, you need to copy the component source code into your project.",[54,55,57],"h2",{"id":56},"prerequisites","Prerequisites",[50,59,60,61,71],{},"Before using PropShow Kit components, please ensure your project is already configured with ",[62,63,64],"strong",{},[65,66,70],"a",{"href":67,"rel":68},"https:\u002F\u002Fwww.shadcn-vue.com\u002Fdocs\u002Finstallation.html",[69],"nofollow","Shadcn Vue",".",[50,73,74],{},"Your project should have the following dependencies installed:",[76,77,78,85,90,95,100],"ul",{},[79,80,81],"li",{},[82,83,84],"code",{},"tailwindcss",[79,86,87],{},[82,88,89],{},"class-variance-authority",[79,91,92],{},[82,93,94],{},"clsx",[79,96,97],{},[82,98,99],{},"tailwind-merge",[79,101,102,105],{},[82,103,104],{},"@lucide\u002Fvue"," (or other icon libraries)",[54,107,109],{"id":108},"configure-utility-function","Configure Utility Function",[50,111,112,113,116,117,71],{},"Most components depend on the ",[82,114,115],{},"cn"," utility function to merge class names. If you have configured your project according to the Shadcn Vue guide, you should already have this function in ",[82,118,119],{},"lib\u002Futils.ts",[121,122,127],"pre",{"className":123,"code":124,"language":125,"meta":126,"style":126},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import type { ClassValue } from 'clsx'\n\nimport { clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n    return twMerge(clsx(inputs))\n}\n","typescript","",[82,128,129,164,171,191,211,216,252,273],{"__ignoreMap":126},[130,131,134,138,141,145,149,152,155,158,161],"span",{"class":132,"line":133},"line",1,[130,135,137],{"class":136},"s7zQu","import",[130,139,140],{"class":136}," type",[130,142,144],{"class":143},"sMK4o"," {",[130,146,148],{"class":147},"sTEyZ"," ClassValue",[130,150,151],{"class":143}," }",[130,153,154],{"class":136}," from",[130,156,157],{"class":143}," '",[130,159,94],{"class":160},"sfazB",[130,162,163],{"class":143},"'\n",[130,165,167],{"class":132,"line":166},2,[130,168,170],{"emptyLinePlaceholder":169},true,"\n",[130,172,174,176,178,181,183,185,187,189],{"class":132,"line":173},3,[130,175,137],{"class":136},[130,177,144],{"class":143},[130,179,180],{"class":147}," clsx",[130,182,151],{"class":143},[130,184,154],{"class":136},[130,186,157],{"class":143},[130,188,94],{"class":160},[130,190,163],{"class":143},[130,192,194,196,198,201,203,205,207,209],{"class":132,"line":193},4,[130,195,137],{"class":136},[130,197,144],{"class":143},[130,199,200],{"class":147}," twMerge",[130,202,151],{"class":143},[130,204,154],{"class":136},[130,206,157],{"class":143},[130,208,99],{"class":160},[130,210,163],{"class":143},[130,212,214],{"class":132,"line":213},5,[130,215,170],{"emptyLinePlaceholder":169},[130,217,219,222,226,230,233,237,240,243,246,249],{"class":132,"line":218},6,[130,220,221],{"class":136},"export",[130,223,225],{"class":224},"spNyl"," function",[130,227,229],{"class":228},"s2Zo4"," cn",[130,231,232],{"class":143},"(...",[130,234,236],{"class":235},"sHdIc","inputs",[130,238,239],{"class":143},":",[130,241,148],{"class":242},"sBMFI",[130,244,245],{"class":147},"[]",[130,247,248],{"class":143},")",[130,250,251],{"class":143}," {\n",[130,253,255,258,260,264,266,268,270],{"class":132,"line":254},7,[130,256,257],{"class":136},"    return",[130,259,200],{"class":228},[130,261,263],{"class":262},"swJcz","(",[130,265,94],{"class":228},[130,267,263],{"class":262},[130,269,236],{"class":147},[130,271,272],{"class":262},"))\n",[130,274,276],{"class":132,"line":275},8,[130,277,278],{"class":143},"}\n",[54,280,282],{"id":281},"add-components","Add Components",[284,285,286,289,296,303],"ol",{},[79,287,288],{},"Select the component you need from the left menu.",[79,290,291,292,295],{},"Click the ",[62,293,294],{},"Code"," tab to view the component source code.",[79,297,298,299,302],{},"Copy the code to your project's ",[82,300,301],{},"components\u002Fui"," directory (or wherever you keep your components).",[79,304,305,306,309,310,313],{},"If the component depends on other components (such as ",[82,307,308],{},"Button"," or ",[82,311,312],{},"Badge","), make sure you have installed those base components as well.",[54,315,317],{"id":316},"example","Example",[50,319,320,321,324],{},"Suppose you want to use the ",[82,322,323],{},"StatusBadge"," component:",[284,326,327,354,364],{},[79,328,329,330,332,333],{},"Ensure you have installed the Shadcn Vue ",[82,331,312],{}," component:\n",[121,334,338],{"className":335,"code":336,"language":337,"meta":126,"style":126},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx shadcn-vue@latest add badge\n","bash",[82,339,340],{"__ignoreMap":126},[130,341,342,345,348,351],{"class":132,"line":133},[130,343,344],{"class":242},"npx",[130,346,347],{"class":160}," shadcn-vue@latest",[130,349,350],{"class":160}," add",[130,352,353],{"class":160}," badge\n",[79,355,356,357,360,361,71],{},"Copy the code of ",[82,358,359],{},"StatusBadge.vue"," to ",[82,362,363],{},"components\u002Fui\u002Fstatus-badge\u002FStatusBadge.vue",[79,365,366],{},"Import and use it in your page:",[121,368,372],{"className":369,"code":370,"language":371,"meta":126,"style":126},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport StatusBadge from '@\u002Fcomponents\u002Fui\u002Fstatus-badge\u002FStatusBadge.vue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003CStatusBadge variant=\"default\" status=\"success\">\n        Online\n    \u003C\u002FStatusBadge>\n\u003C\u002Ftemplate>\n","vue",[82,373,374,402,419,428,432,441,474,479,488],{"__ignoreMap":126},[130,375,376,379,382,385,388,391,394,397,399],{"class":132,"line":133},[130,377,378],{"class":143},"\u003C",[130,380,381],{"class":262},"script",[130,383,384],{"class":224}," setup",[130,386,387],{"class":224}," lang",[130,389,390],{"class":143},"=",[130,392,393],{"class":143},"\"",[130,395,396],{"class":160},"ts",[130,398,393],{"class":143},[130,400,401],{"class":143},">\n",[130,403,404,406,409,412,414,417],{"class":132,"line":166},[130,405,137],{"class":136},[130,407,408],{"class":147}," StatusBadge ",[130,410,411],{"class":136},"from",[130,413,157],{"class":143},[130,415,416],{"class":160},"@\u002Fcomponents\u002Fui\u002Fstatus-badge\u002FStatusBadge.vue",[130,418,163],{"class":143},[130,420,421,424,426],{"class":132,"line":173},[130,422,423],{"class":143},"\u003C\u002F",[130,425,381],{"class":262},[130,427,401],{"class":143},[130,429,430],{"class":132,"line":193},[130,431,170],{"emptyLinePlaceholder":169},[130,433,434,436,439],{"class":132,"line":213},[130,435,378],{"class":143},[130,437,438],{"class":262},"template",[130,440,401],{"class":143},[130,442,443,446,448,451,453,455,458,460,463,465,467,470,472],{"class":132,"line":218},[130,444,445],{"class":143},"    \u003C",[130,447,323],{"class":262},[130,449,450],{"class":224}," variant",[130,452,390],{"class":143},[130,454,393],{"class":143},[130,456,457],{"class":160},"default",[130,459,393],{"class":143},[130,461,462],{"class":224}," status",[130,464,390],{"class":143},[130,466,393],{"class":143},[130,468,469],{"class":160},"success",[130,471,393],{"class":143},[130,473,401],{"class":143},[130,475,476],{"class":132,"line":254},[130,477,478],{"class":147},"        Online\n",[130,480,481,484,486],{"class":132,"line":275},[130,482,483],{"class":143},"    \u003C\u002F",[130,485,323],{"class":262},[130,487,401],{"class":143},[130,489,491,493,495],{"class":132,"line":490},9,[130,492,423],{"class":143},[130,494,438],{"class":262},[130,496,401],{"class":143},[498,499,500],"style",{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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);}",{"title":126,"searchDepth":166,"depth":166,"links":502},[503,504,505,506],{"id":56,"depth":166,"text":57},{"id":108,"depth":166,"text":109},{"id":281,"depth":166,"text":282},{"id":316,"depth":166,"text":317},"How to use PropShow Kit components in your project.","md",null,{},{"title":15,"description":507},"QIIlW-jSi-1P0Vu0L7XJfLQgIKJ94JIXwsePfo6jKP0",[514,516],{"title":11,"path":12,"stem":13,"description":515,"children":-1},"Quickly integrate PropShow Kit components into your project.",{"title":19,"path":20,"stem":21,"description":517,"children":-1},"PropShow Kit - A collection of extended components for Shadcn Vue.",1774595237934]