[{"data":1,"prerenderedAt":880},["ShallowReactive",2],{"navigation":3,"docs-/docs/components/component-preview":139,"surround-/docs/components/component-preview":877},[4],{"title":5,"path":6,"stem":7,"children":8,"page":32,"type":33},"Docs","/docs","docs",[9,34,58,83],{"title":10,"icon":11,"path":12,"stem":13,"children":14,"page":32,"type":33},"Getting Started","i-lucide-rocket","/docs/getting-started","docs/1.getting-started",[15,20,24,28],{"title":16,"path":17,"stem":18,"type":19,"children":-1},"Introduction","/docs/getting-started/introduction","docs/1.getting-started/2.introduction","page",{"title":21,"path":22,"stem":23,"type":19,"children":-1},"Installation","/docs/getting-started/installation","docs/1.getting-started/3.installation",{"title":25,"path":26,"stem":27,"type":19,"children":-1},"Configuration","/docs/getting-started/configuration","docs/1.getting-started/4.configuration",{"title":29,"path":30,"stem":31,"type":19,"children":-1},"Writing Content","/docs/getting-started/writing-content","docs/1.getting-started/5.writing-content",false,"group",{"title":35,"path":36,"stem":37,"children":38,"page":32,"type":33},"Core Concepts","/docs/concepts","docs/2.concepts",[39,44,48,53],{"title":40,"path":41,"stem":42,"icon":43,"type":19,"children":-1},"Edition","/docs/concepts/edition","docs/2.concepts/2.edition","i-lucide-pencil",{"title":25,"path":45,"stem":46,"icon":47,"type":19,"children":-1},"/docs/concepts/configuration","docs/2.concepts/3.configuration","i-lucide-settings",{"title":49,"path":50,"stem":51,"icon":52,"type":19,"children":-1},"LLMs Integration","/docs/concepts/llms","docs/2.concepts/7.llms","i-lucide-message-circle-code",{"title":54,"path":55,"stem":56,"icon":57,"type":19,"children":-1},"Nuxt","/docs/concepts/nuxt","docs/2.concepts/8.nuxt","i-simple-icons-nuxt",{"title":59,"path":60,"stem":61,"children":62,"page":32,"type":33},"Essentials","/docs/essentials","docs/3.essentials",[63,68,73,78],{"title":64,"path":65,"stem":66,"icon":67,"type":19,"children":-1},"Markdown Syntax","/docs/essentials/markdown-syntax","docs/3.essentials/1.markdown-syntax","i-lucide-heading-1",{"title":69,"path":70,"stem":71,"icon":72,"type":19,"children":-1},"Code Blocks","/docs/essentials/code-blocks","docs/3.essentials/2.code-blocks","i-lucide-code-xml",{"title":74,"path":75,"stem":76,"icon":77,"type":19,"children":-1},"Components","/docs/essentials/components","docs/3.essentials/3.components","i-lucide-component",{"title":79,"path":80,"stem":81,"icon":82,"type":19,"children":-1},"Images and Embeds","/docs/essentials/images-embeds","docs/3.essentials/4.images-embeds","i-lucide-image",{"title":74,"icon":77,"path":84,"stem":85,"children":86,"page":32,"type":33},"/docs/components","docs/4.components",[87,91,95,99,103,107,111,115,119,123,127,131,135],{"title":88,"path":89,"stem":90,"type":19,"children":-1},"Components Overview","/docs/components/overview","docs/4.components/1.overview",{"title":92,"path":93,"stem":94,"type":19,"children":-1},"CodeCollapsibleWrapper","/docs/components/code-collapsible","docs/4.components/10.code-collapsible",{"title":96,"path":97,"stem":98,"type":19,"children":-1},"CopyButton","/docs/components/copy-button","docs/4.components/11.copy-button",{"title":100,"path":101,"stem":102,"type":19,"children":-1},"ButtonA","/docs/components/button-a","docs/4.components/12.button-a",{"title":104,"path":105,"stem":106,"type":19,"children":-1},"Prose","/docs/components/prose","docs/4.components/13.prose",{"title":108,"path":109,"stem":110,"type":19,"children":-1},"Button","/docs/components/button","docs/4.components/2.button",{"title":112,"path":113,"stem":114,"type":19,"children":-1},"Separator","/docs/components/separator","docs/4.components/3.separator",{"title":116,"path":117,"stem":118,"type":19,"children":-1},"Callout","/docs/components/callout","docs/4.components/4.callout",{"title":120,"path":121,"stem":122,"type":19,"children":-1},"Steps","/docs/components/steps","docs/4.components/5.steps",{"title":124,"path":125,"stem":126,"type":19,"children":-1},"Tabs","/docs/components/tabs","docs/4.components/6.tabs",{"title":128,"path":129,"stem":130,"type":19,"children":-1},"CodeTabs","/docs/components/code-tabs","docs/4.components/7.code-tabs",{"title":132,"path":133,"stem":134,"type":19,"children":-1},"ComponentPreview","/docs/components/component-preview","docs/4.components/8.component-preview",{"title":136,"path":137,"stem":138,"type":19,"children":-1},"LinkedCard","/docs/components/linked-card","docs/4.components/9.linked-card",{"id":140,"title":132,"body":141,"description":871,"extension":872,"links":873,"meta":874,"navigation":299,"path":133,"seo":875,"sitemap":32,"stem":134,"__hash__":876},"docs/docs/4.components/8.component-preview.md",{"type":142,"value":143,"toc":858},"minimark",[144,148,152,157,173,217,220,224,230,238,241,428,432,435,530,534,537,565,569,574,577,610,614,617,649,653,656,689,693,834,838,841,847,854],[145,146,132],"h1",{"id":147},"componentpreview",[149,150,151],"p",{},"A component for displaying live component demos with optional source code viewing. Useful for showcasing UI components in documentation.",[153,154,156],"h2",{"id":155},"usage","Usage",[149,158,159,160,164,165,168,169,172],{},"Use the ",[161,162,163],"code",{},"::component-preview"," MDC syntax with the ",[161,166,167],{},"name"," prop pointing to a component in ",[161,170,171],{},"~/components/demo/",":",[174,175,180],"pre",{"className":176,"code":177,"language":178,"meta":179,"style":179},"language-mdc shiki shiki-themes github-light-default github-dark","::component-preview{name=\"ButtonDemo\"}\n::\n","mdc","",[161,181,182,211],{"__ignoreMap":179},[183,184,187,191,195,198,201,204,208],"span",{"class":185,"line":186},"line",1,[183,188,190],{"class":189},"s80WL","::",[183,192,194],{"class":193},"s5xbh","component-preview",[183,196,197],{"class":189},"{",[183,199,167],{"class":200},"si9m_",[183,202,203],{"class":189},"=",[183,205,207],{"class":206},"skyLg","\"ButtonDemo\"",[183,209,210],{"class":189},"}\n",[183,212,214],{"class":185,"line":213},2,[183,215,216],{"class":189},"::\n",[149,218,219],{},"The component will render the demo and optionally show its source code.",[153,221,223],{"id":222},"creating-demo-components","Creating Demo Components",[149,225,226,227,229],{},"Demo components should be placed in ",[161,228,171],{}," directory:",[174,231,236],{"className":232,"code":234,"language":235},[233],"language-text","components/\n└── demo/\n    ├── ButtonDemo.vue\n    ├── ButtonOutline.vue\n    └── ButtonSizes.vue\n","text",[161,237,234],{"__ignoreMap":179},[149,239,240],{},"Example demo component:",[174,242,246],{"className":243,"code":244,"language":245,"meta":179,"style":179},"language-vue shiki shiki-themes github-light-default github-dark","\u003C!-- components/demo/ButtonDemo.vue -->\n\u003Cscript setup>\nimport { Button } from '~/components/ui/button'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"flex gap-2\">\n    \u003CButton>Default\u003C/Button>\n    \u003CButton variant=\"outline\">\n      Outline\n    \u003C/Button>\n    \u003CButton variant=\"ghost\">\n      Ghost\n    \u003C/Button>\n  \u003C/div>\n\u003C/template>\n","vue",[161,247,248,254,268,284,294,301,311,330,345,362,368,378,394,400,409,419],{"__ignoreMap":179},[183,249,250],{"class":185,"line":186},[183,251,253],{"class":252},"s6M7L","\u003C!-- components/demo/ButtonDemo.vue -->\n",[183,255,256,259,262,265],{"class":185,"line":213},[183,257,258],{"class":189},"\u003C",[183,260,261],{"class":193},"script",[183,263,264],{"class":200}," setup",[183,266,267],{"class":189},">\n",[183,269,271,275,278,281],{"class":185,"line":270},3,[183,272,274],{"class":273},"spYc3","import",[183,276,277],{"class":189}," { Button } ",[183,279,280],{"class":273},"from",[183,282,283],{"class":206}," '~/components/ui/button'\n",[183,285,287,290,292],{"class":185,"line":286},4,[183,288,289],{"class":189},"\u003C/",[183,291,261],{"class":193},[183,293,267],{"class":189},[183,295,297],{"class":185,"line":296},5,[183,298,300],{"emptyLinePlaceholder":299},true,"\n",[183,302,304,306,309],{"class":185,"line":303},6,[183,305,258],{"class":189},[183,307,308],{"class":193},"template",[183,310,267],{"class":189},[183,312,314,317,320,323,325,328],{"class":185,"line":313},7,[183,315,316],{"class":189},"  \u003C",[183,318,319],{"class":193},"div",[183,321,322],{"class":200}," class",[183,324,203],{"class":189},[183,326,327],{"class":206},"\"flex gap-2\"",[183,329,267],{"class":189},[183,331,333,336,338,341,343],{"class":185,"line":332},8,[183,334,335],{"class":189},"    \u003C",[183,337,108],{"class":193},[183,339,340],{"class":189},">Default\u003C/",[183,342,108],{"class":193},[183,344,267],{"class":189},[183,346,348,350,352,355,357,360],{"class":185,"line":347},9,[183,349,335],{"class":189},[183,351,108],{"class":193},[183,353,354],{"class":200}," variant",[183,356,203],{"class":189},[183,358,359],{"class":206},"\"outline\"",[183,361,267],{"class":189},[183,363,365],{"class":185,"line":364},10,[183,366,367],{"class":189},"      Outline\n",[183,369,371,374,376],{"class":185,"line":370},11,[183,372,373],{"class":189},"    \u003C/",[183,375,108],{"class":193},[183,377,267],{"class":189},[183,379,381,383,385,387,389,392],{"class":185,"line":380},12,[183,382,335],{"class":189},[183,384,108],{"class":193},[183,386,354],{"class":200},[183,388,203],{"class":189},[183,390,391],{"class":206},"\"ghost\"",[183,393,267],{"class":189},[183,395,397],{"class":185,"line":396},13,[183,398,399],{"class":189},"      Ghost\n",[183,401,403,405,407],{"class":185,"line":402},14,[183,404,373],{"class":189},[183,406,108],{"class":193},[183,408,267],{"class":189},[183,410,412,415,417],{"class":185,"line":411},15,[183,413,414],{"class":189},"  \u003C/",[183,416,319],{"class":193},[183,418,267],{"class":189},[183,420,422,424,426],{"class":185,"line":421},16,[183,423,289],{"class":189},[183,425,308],{"class":193},[183,427,267],{"class":189},[153,429,431],{"id":430},"alignment","Alignment",[149,433,434],{},"Control the alignment of the preview content:",[174,436,438],{"className":176,"code":437,"language":178,"meta":179,"style":179},"::component-preview{name=\"ButtonDemo\" align=\"start\"}\n::\n\n::component-preview{name=\"ButtonDemo\" align=\"center\"}\n::\n\n::component-preview{name=\"ButtonDemo\" align=\"end\"}\n::\n",[161,439,440,464,468,472,495,499,503,526],{"__ignoreMap":179},[183,441,442,444,446,448,450,452,454,457,459,462],{"class":185,"line":186},[183,443,190],{"class":189},[183,445,194],{"class":193},[183,447,197],{"class":189},[183,449,167],{"class":200},[183,451,203],{"class":189},[183,453,207],{"class":206},[183,455,456],{"class":200}," align",[183,458,203],{"class":189},[183,460,461],{"class":206},"\"start\"",[183,463,210],{"class":189},[183,465,466],{"class":185,"line":213},[183,467,216],{"class":189},[183,469,470],{"class":185,"line":270},[183,471,300],{"emptyLinePlaceholder":299},[183,473,474,476,478,480,482,484,486,488,490,493],{"class":185,"line":286},[183,475,190],{"class":189},[183,477,194],{"class":193},[183,479,197],{"class":189},[183,481,167],{"class":200},[183,483,203],{"class":189},[183,485,207],{"class":206},[183,487,456],{"class":200},[183,489,203],{"class":189},[183,491,492],{"class":206},"\"center\"",[183,494,210],{"class":189},[183,496,497],{"class":185,"line":296},[183,498,216],{"class":189},[183,500,501],{"class":185,"line":303},[183,502,300],{"emptyLinePlaceholder":299},[183,504,505,507,509,511,513,515,517,519,521,524],{"class":185,"line":313},[183,506,190],{"class":189},[183,508,194],{"class":193},[183,510,197],{"class":189},[183,512,167],{"class":200},[183,514,203],{"class":189},[183,516,207],{"class":206},[183,518,456],{"class":200},[183,520,203],{"class":189},[183,522,523],{"class":206},"\"end\"",[183,525,210],{"class":189},[183,527,528],{"class":185,"line":332},[183,529,216],{"class":189},[153,531,533],{"id":532},"hide-source-code","Hide Source Code",[149,535,536],{},"Hide the source code tab to show only the live preview:",[174,538,540],{"className":176,"code":539,"language":178,"meta":179,"style":179},"::component-preview{name=\"ButtonDemo\" hide-code}\n::\n",[161,541,542,561],{"__ignoreMap":179},[183,543,544,546,548,550,552,554,556,559],{"class":185,"line":186},[183,545,190],{"class":189},[183,547,194],{"class":193},[183,549,197],{"class":189},[183,551,167],{"class":200},[183,553,203],{"class":189},[183,555,207],{"class":206},[183,557,558],{"class":200}," hide-code",[183,560,210],{"class":189},[183,562,563],{"class":185,"line":213},[183,564,216],{"class":189},[153,566,568],{"id":567},"preview-types","Preview Types",[570,571,573],"h3",{"id":572},"component-default","Component (default)",[149,575,576],{},"Standard component preview with tabs for preview and source:",[174,578,580],{"className":176,"code":579,"language":178,"meta":179,"style":179},"::component-preview{name=\"ButtonDemo\" type=\"component\"}\n::\n",[161,581,582,606],{"__ignoreMap":179},[183,583,584,586,588,590,592,594,596,599,601,604],{"class":185,"line":186},[183,585,190],{"class":189},[183,587,194],{"class":193},[183,589,197],{"class":189},[183,591,167],{"class":200},[183,593,203],{"class":189},[183,595,207],{"class":206},[183,597,598],{"class":200}," type",[183,600,203],{"class":189},[183,602,603],{"class":206},"\"component\"",[183,605,210],{"class":189},[183,607,608],{"class":185,"line":213},[183,609,216],{"class":189},[570,611,613],{"id":612},"example","Example",[149,615,616],{},"Similar to component type:",[174,618,620],{"className":176,"code":619,"language":178,"meta":179,"style":179},"::component-preview{name=\"ButtonDemo\" type=\"example\"}\n::\n",[161,621,622,645],{"__ignoreMap":179},[183,623,624,626,628,630,632,634,636,638,640,643],{"class":185,"line":186},[183,625,190],{"class":189},[183,627,194],{"class":193},[183,629,197],{"class":189},[183,631,167],{"class":200},[183,633,203],{"class":189},[183,635,207],{"class":206},[183,637,598],{"class":200},[183,639,203],{"class":189},[183,641,642],{"class":206},"\"example\"",[183,644,210],{"class":189},[183,646,647],{"class":185,"line":213},[183,648,216],{"class":189},[570,650,652],{"id":651},"block","Block",[149,654,655],{},"For larger components, shows as image on mobile and iframe on desktop:",[174,657,659],{"className":176,"code":658,"language":178,"meta":179,"style":179},"::component-preview{name=\"DashboardDemo\" type=\"block\"}\n::\n",[161,660,661,685],{"__ignoreMap":179},[183,662,663,665,667,669,671,673,676,678,680,683],{"class":185,"line":186},[183,664,190],{"class":189},[183,666,194],{"class":193},[183,668,197],{"class":189},[183,670,167],{"class":200},[183,672,203],{"class":189},[183,674,675],{"class":206},"\"DashboardDemo\"",[183,677,598],{"class":200},[183,679,203],{"class":189},[183,681,682],{"class":206},"\"block\"",[183,684,210],{"class":189},[183,686,687],{"class":185,"line":213},[183,688,216],{"class":189},[153,690,692],{"id":691},"props","Props",[694,695,696,715],"table",{},[697,698,699],"thead",{},[700,701,702,706,709,712],"tr",{},[703,704,705],"th",{},"Prop",[703,707,708],{},"Type",[703,710,711],{},"Default",[703,713,714],{},"Description",[716,717,718,741,761,778,798,818],"tbody",{},[700,719,720,725,730,736],{},[721,722,723],"td",{},[161,724,167],{},[721,726,727],{},[161,728,729],{},"string",[721,731,732],{},[733,734,735],"strong",{},"required",[721,737,738,739],{},"Component name in ",[161,740,171],{},[700,742,743,748,753,758],{},[721,744,745],{},[161,746,747],{},"align",[721,749,750],{},[161,751,752],{},"'center' | 'start' | 'end'",[721,754,755],{},[161,756,757],{},"'center'",[721,759,760],{},"Content alignment",[700,762,763,768,772,775],{},[721,764,765],{},[161,766,767],{},"description",[721,769,770],{},[161,771,729],{},[721,773,774],{},"-",[721,776,777],{},"Optional description text",[700,779,780,785,790,795],{},[721,781,782],{},[161,783,784],{},"hideCode",[721,786,787],{},[161,788,789],{},"boolean",[721,791,792],{},[161,793,794],{},"false",[721,796,797],{},"Hide the source code tab",[700,799,800,805,810,815],{},[721,801,802],{},[161,803,804],{},"type",[721,806,807],{},[161,808,809],{},"'block' | 'component' | 'example'",[721,811,812],{},[161,813,814],{},"'component'",[721,816,817],{},"Preview type",[700,819,820,825,829,831],{},[721,821,822],{},[161,823,824],{},"class",[721,826,827],{},[161,828,729],{},[721,830,774],{},[721,832,833],{},"Additional CSS classes",[153,835,837],{"id":836},"error-handling","Error Handling",[149,839,840],{},"If the specified component is not found, an error message will be displayed:",[174,842,845],{"className":843,"code":844,"language":235},[233],"Component `ComponentName` not found in registry.\n",[161,846,844],{"__ignoreMap":179},[149,848,849,850,853],{},"Ensure the component exists at ",[161,851,852],{},"~/components/demo/{name}.vue",".",[855,856,857],"style",{},"html pre.shiki code .s80WL, html code.shiki .s80WL{--shiki-light:#1F2328;--shiki-dark:#E1E4E8}html pre.shiki code .s5xbh, html code.shiki .s5xbh{--shiki-light:#116329;--shiki-dark:#85E89D}html pre.shiki code .si9m_, html code.shiki .si9m_{--shiki-light:#0550AE;--shiki-dark:#B392F0}html pre.shiki code .skyLg, html code.shiki .skyLg{--shiki-light:#0A3069;--shiki-dark:#9ECBFF}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 .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 .s6M7L, html code.shiki .s6M7L{--shiki-light:#6E7781;--shiki-dark:#6A737D}html pre.shiki code .spYc3, html code.shiki .spYc3{--shiki-light:#CF222E;--shiki-dark:#F97583}",{"title":179,"searchDepth":213,"depth":213,"links":859},[860,861,862,863,864,869,870],{"id":155,"depth":213,"text":156},{"id":222,"depth":213,"text":223},{"id":430,"depth":213,"text":431},{"id":532,"depth":213,"text":533},{"id":567,"depth":213,"text":568,"children":865},[866,867,868],{"id":572,"depth":270,"text":573},{"id":612,"depth":270,"text":613},{"id":651,"depth":270,"text":652},{"id":691,"depth":213,"text":692},{"id":836,"depth":213,"text":837},"Display component demos with live preview and source code","md",null,{},{"title":132,"description":871},"WxToo7i1ZvZMAau4gZq6fCDGFVdWqWY6_zLCh9HrJsA",[878,879],{"title":128,"path":129,"stem":130,"children":-1},{"title":136,"path":137,"stem":138,"children":-1},1779983236002]