[{"data":1,"prerenderedAt":1210},["ShallowReactive",2],{"navigation":3,"$f2vxmxe0ttlw1b":470,"\u002Fdocs\u002Fcomponents\u002Fitem":481,"surround-\u002Fdocs\u002Fcomponents\u002Fitem":1207},[4],{"title":5,"path":6,"stem":7,"children":8,"page":18},"Docs","\u002Fdocs","docs",[9,298,324,342,348,365,391,405],{"title":10,"path":11,"stem":12,"children":13,"new":18,"type":297},"Components","\u002Fdocs\u002Fcomponents","docs\u002F02.components",[14,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293],{"title":15,"path":16,"stem":17,"new":18,"type":19,"children":-1},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002Fcomponents\u002Faccordion",false,"component",{"title":21,"path":22,"stem":23,"new":18,"type":19,"children":-1},"Alert","\u002Fdocs\u002Fcomponents\u002Falert","docs\u002Fcomponents\u002Falert",{"title":25,"path":26,"stem":27,"new":18,"type":19,"children":-1},"Alert Dialog","\u002Fdocs\u002Fcomponents\u002Falert-dialog","docs\u002Fcomponents\u002Falert-dialog",{"title":29,"path":30,"stem":31,"new":18,"type":19,"children":-1},"Aspect Ratio","\u002Fdocs\u002Fcomponents\u002Faspect-ratio","docs\u002Fcomponents\u002Faspect-ratio",{"title":33,"path":34,"stem":35,"new":18,"type":19,"children":-1},"Attachment","\u002Fdocs\u002Fcomponents\u002Fattachment","docs\u002Fcomponents\u002Fattachment",{"title":37,"path":38,"stem":39,"new":18,"type":19,"children":-1},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002Fcomponents\u002Favatar",{"title":41,"path":42,"stem":43,"new":18,"type":19,"children":-1},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002Fcomponents\u002Fbadge",{"title":45,"path":46,"stem":47,"new":18,"type":19,"children":-1},"Breadcrumb","\u002Fdocs\u002Fcomponents\u002Fbreadcrumb","docs\u002Fcomponents\u002Fbreadcrumb",{"title":49,"path":50,"stem":51,"new":18,"type":19,"children":-1},"Bubble","\u002Fdocs\u002Fcomponents\u002Fbubble","docs\u002Fcomponents\u002Fbubble",{"title":53,"path":54,"stem":55,"new":18,"type":19,"children":-1},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002Fcomponents\u002Fbutton",{"title":57,"path":58,"stem":59,"new":18,"type":19,"children":-1},"Button Group","\u002Fdocs\u002Fcomponents\u002Fbutton-group","docs\u002Fcomponents\u002Fbutton-group",{"title":61,"path":62,"stem":63,"new":18,"type":19,"children":-1},"Calendar","\u002Fdocs\u002Fcomponents\u002Fcalendar","docs\u002Fcomponents\u002Fcalendar",{"title":65,"path":66,"stem":67,"new":18,"type":19,"children":-1},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002Fcomponents\u002Fcard",{"title":69,"path":70,"stem":71,"new":18,"type":19,"children":-1},"Carousel","\u002Fdocs\u002Fcomponents\u002Fcarousel","docs\u002Fcomponents\u002Fcarousel",{"title":73,"path":74,"stem":75,"new":18,"type":19,"children":-1},"Chart","\u002Fdocs\u002Fcomponents\u002Fchart","docs\u002Fcomponents\u002Fchart",{"title":77,"path":78,"stem":79,"new":18,"type":19,"children":-1},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002Fcomponents\u002Fcheckbox",{"title":81,"path":82,"stem":83,"new":18,"type":19,"children":-1},"Collapsible","\u002Fdocs\u002Fcomponents\u002Fcollapsible","docs\u002Fcomponents\u002Fcollapsible",{"title":85,"path":86,"stem":87,"new":18,"type":19,"children":-1},"Combobox","\u002Fdocs\u002Fcomponents\u002Fcombobox","docs\u002Fcomponents\u002Fcombobox",{"title":89,"path":90,"stem":91,"new":18,"type":19,"children":-1},"Command","\u002Fdocs\u002Fcomponents\u002Fcommand","docs\u002Fcomponents\u002Fcommand",{"title":93,"path":94,"stem":95,"new":18,"type":19,"children":-1},"Context Menu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002Fcomponents\u002Fcontext-menu",{"title":97,"path":98,"stem":99,"new":18,"type":19,"children":-1},"Data Table","\u002Fdocs\u002Fcomponents\u002Fdata-table","docs\u002Fcomponents\u002Fdata-table",{"title":101,"path":102,"stem":103,"new":18,"type":19,"children":-1},"Date Picker","\u002Fdocs\u002Fcomponents\u002Fdate-picker","docs\u002Fcomponents\u002Fdate-picker",{"title":105,"path":106,"stem":107,"new":18,"type":19,"children":-1},"Dialog","\u002Fdocs\u002Fcomponents\u002Fdialog","docs\u002Fcomponents\u002Fdialog",{"title":109,"path":110,"stem":111,"new":18,"type":19,"children":-1},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002Fcomponents\u002Fdrawer",{"title":113,"path":114,"stem":115,"new":18,"type":19,"children":-1},"Dropdown Menu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002Fcomponents\u002Fdropdown-menu",{"title":117,"path":118,"stem":119,"new":18,"type":19,"children":-1},"Empty","\u002Fdocs\u002Fcomponents\u002Fempty","docs\u002Fcomponents\u002Fempty",{"title":121,"path":122,"stem":123,"new":18,"type":19,"children":-1},"Field","\u002Fdocs\u002Fcomponents\u002Ffield","docs\u002Fcomponents\u002Ffield",{"title":125,"path":126,"stem":127,"new":18,"type":19,"children":-1},"Form","\u002Fdocs\u002Fcomponents\u002Fform","docs\u002Fcomponents\u002Fform",{"title":129,"path":130,"stem":131,"new":18,"type":19,"children":-1},"Hover Card","\u002Fdocs\u002Fcomponents\u002Fhover-card","docs\u002Fcomponents\u002Fhover-card",{"title":133,"path":134,"stem":135,"new":18,"type":19,"children":-1},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002Fcomponents\u002Finput",{"title":137,"path":138,"stem":139,"new":18,"type":19,"children":-1},"Input Group","\u002Fdocs\u002Fcomponents\u002Finput-group","docs\u002Fcomponents\u002Finput-group",{"title":141,"path":142,"stem":143,"new":18,"type":19,"children":-1},"Input OTP","\u002Fdocs\u002Fcomponents\u002Finput-otp","docs\u002Fcomponents\u002Finput-otp",{"title":145,"path":146,"stem":147,"new":18,"type":19,"children":-1},"Item","\u002Fdocs\u002Fcomponents\u002Fitem","docs\u002Fcomponents\u002Fitem",{"title":149,"path":150,"stem":151,"new":18,"type":19,"children":-1},"Kbd","\u002Fdocs\u002Fcomponents\u002Fkbd","docs\u002Fcomponents\u002Fkbd",{"title":153,"path":154,"stem":155,"new":18,"type":19,"children":-1},"Label","\u002Fdocs\u002Fcomponents\u002Flabel","docs\u002Fcomponents\u002Flabel",{"title":157,"path":158,"stem":159,"new":18,"type":19,"children":-1},"Marker","\u002Fdocs\u002Fcomponents\u002Fmarker","docs\u002Fcomponents\u002Fmarker",{"title":161,"path":162,"stem":163,"new":18,"type":19,"children":-1},"Menubar","\u002Fdocs\u002Fcomponents\u002Fmenubar","docs\u002Fcomponents\u002Fmenubar",{"title":165,"path":166,"stem":167,"new":18,"type":19,"children":-1},"Message","\u002Fdocs\u002Fcomponents\u002Fmessage","docs\u002Fcomponents\u002Fmessage",{"title":169,"path":170,"stem":171,"new":18,"type":19,"children":-1},"Message Scroller","\u002Fdocs\u002Fcomponents\u002Fmessage-scroller","docs\u002Fcomponents\u002Fmessage-scroller",{"title":173,"path":174,"stem":175,"new":18,"type":19,"children":-1},"Native Select","\u002Fdocs\u002Fcomponents\u002Fnative-select","docs\u002Fcomponents\u002Fnative-select",{"title":177,"path":178,"stem":179,"new":18,"type":19,"children":-1},"Navigation Menu","\u002Fdocs\u002Fcomponents\u002Fnavigation-menu","docs\u002Fcomponents\u002Fnavigation-menu",{"title":181,"path":182,"stem":183,"new":18,"type":19,"children":-1},"Number Field","\u002Fdocs\u002Fcomponents\u002Fnumber-field","docs\u002Fcomponents\u002Fnumber-field",{"title":185,"path":186,"stem":187,"new":18,"type":19,"children":-1},"Pagination","\u002Fdocs\u002Fcomponents\u002Fpagination","docs\u002Fcomponents\u002Fpagination",{"title":189,"path":190,"stem":191,"new":18,"type":19,"children":-1},"Pin Input","\u002Fdocs\u002Fcomponents\u002Fpin-input","docs\u002Fcomponents\u002Fpin-input",{"title":193,"path":194,"stem":195,"new":18,"type":19,"children":-1},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002Fcomponents\u002Fpopover",{"title":197,"path":198,"stem":199,"new":18,"type":19,"children":-1},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002Fcomponents\u002Fprogress",{"title":201,"path":202,"stem":203,"new":204,"type":19,"children":-1},"Questionnaire","\u002Fdocs\u002Fcomponents\u002Fquestionnaire","docs\u002Fcomponents\u002Fquestionnaire",true,{"title":206,"path":207,"stem":208,"new":18,"type":19,"children":-1},"Radio Group","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002Fcomponents\u002Fradio-group",{"title":210,"path":211,"stem":212,"new":18,"type":19,"children":-1},"Range Calendar","\u002Fdocs\u002Fcomponents\u002Frange-calendar","docs\u002Fcomponents\u002Frange-calendar",{"title":214,"path":215,"stem":216,"new":18,"type":19,"children":-1},"Resizable","\u002Fdocs\u002Fcomponents\u002Fresizable","docs\u002Fcomponents\u002Fresizable",{"title":218,"path":219,"stem":220,"new":18,"type":19,"children":-1},"Scroll Area","\u002Fdocs\u002Fcomponents\u002Fscroll-area","docs\u002Fcomponents\u002Fscroll-area",{"title":222,"path":223,"stem":224,"new":18,"type":19,"children":-1},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002Fcomponents\u002Fselect",{"title":226,"path":227,"stem":228,"new":18,"type":19,"children":-1},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002Fcomponents\u002Fseparator",{"title":230,"path":231,"stem":232,"new":18,"type":19,"children":-1},"Sheet","\u002Fdocs\u002Fcomponents\u002Fsheet","docs\u002Fcomponents\u002Fsheet",{"title":234,"path":235,"stem":236,"new":18,"type":19,"children":-1},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002Fcomponents\u002Fsidebar",{"title":238,"path":239,"stem":240,"new":18,"type":19,"children":-1},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002Fcomponents\u002Fskeleton",{"title":242,"path":243,"stem":244,"new":18,"type":19,"children":-1},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002Fcomponents\u002Fslider",{"title":246,"path":247,"stem":248,"new":18,"type":19,"children":-1},"Sonner","\u002Fdocs\u002Fcomponents\u002Fsonner","docs\u002Fcomponents\u002Fsonner",{"title":250,"path":251,"stem":252,"new":18,"type":19,"children":-1},"Spinner","\u002Fdocs\u002Fcomponents\u002Fspinner","docs\u002Fcomponents\u002Fspinner",{"title":254,"path":255,"stem":256,"new":18,"type":19,"children":-1},"Stepper","\u002Fdocs\u002Fcomponents\u002Fstepper","docs\u002Fcomponents\u002Fstepper",{"title":258,"path":259,"stem":260,"new":18,"type":19,"children":-1},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002Fcomponents\u002Fswitch",{"title":262,"path":263,"stem":264,"new":18,"type":19,"children":-1},"Table","\u002Fdocs\u002Fcomponents\u002Ftable","docs\u002Fcomponents\u002Ftable",{"title":266,"path":267,"stem":268,"new":18,"type":19,"children":-1},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002Fcomponents\u002Ftabs",{"title":270,"path":271,"stem":272,"new":18,"type":19,"children":-1},"Tags Input","\u002Fdocs\u002Fcomponents\u002Ftags-input","docs\u002Fcomponents\u002Ftags-input",{"title":274,"path":275,"stem":276,"new":18,"type":19,"children":-1},"Textarea","\u002Fdocs\u002Fcomponents\u002Ftextarea","docs\u002Fcomponents\u002Ftextarea",{"title":278,"path":279,"stem":280,"new":18,"type":19,"children":-1},"Toast","\u002Fdocs\u002Fcomponents\u002Ftoast","docs\u002Fcomponents\u002Ftoast",{"title":282,"path":283,"stem":284,"new":18,"type":19,"children":-1},"Toggle","\u002Fdocs\u002Fcomponents\u002Ftoggle","docs\u002Fcomponents\u002Ftoggle",{"title":286,"path":287,"stem":288,"new":18,"type":19,"children":-1},"Toggle Group","\u002Fdocs\u002Fcomponents\u002Ftoggle-group","docs\u002Fcomponents\u002Ftoggle-group",{"title":290,"path":291,"stem":292,"new":18,"type":19,"children":-1},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002Fcomponents\u002Ftooltip",{"title":294,"path":295,"stem":296,"new":18,"type":19,"children":-1},"Typography","\u002Fdocs\u002Fcomponents\u002Ftypography","docs\u002Fcomponents\u002Ftypography","group",{"title":299,"path":300,"stem":301,"children":302,"new":18,"type":297},"Installation","\u002Fdocs\u002Finstallation","docs\u002F02.installation",[303,308,312,316,320],{"title":304,"path":305,"stem":306,"new":18,"type":307,"children":-1},"Vite","\u002Fdocs\u002Finstallation\u002Fvite","docs\u002Finstallation\u002F01.vite","page",{"title":309,"path":310,"stem":311,"new":18,"type":307,"children":-1},"Nuxt","\u002Fdocs\u002Finstallation\u002Fnuxt","docs\u002Finstallation\u002F02.nuxt",{"title":313,"path":314,"stem":315,"new":18,"type":307,"children":-1},"Astro","\u002Fdocs\u002Finstallation\u002Fastro","docs\u002Finstallation\u002F03.astro",{"title":317,"path":318,"stem":319,"new":18,"type":307,"children":-1},"Laravel","\u002Fdocs\u002Finstallation\u002Flaravel","docs\u002Finstallation\u002F04.laravel",{"title":321,"path":322,"stem":323,"new":18,"type":307,"children":-1},"Manual Installation","\u002Fdocs\u002Finstallation\u002Fmanual","docs\u002Finstallation\u002F05.manual",{"title":325,"path":326,"stem":327,"children":328,"new":18,"type":297},"Dark Mode","\u002Fdocs\u002Fdark-mode","docs\u002F05.dark-mode",[329,332,335,339],{"title":304,"path":330,"stem":331,"new":18,"type":307,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fvite","docs\u002Fdark-mode\u002F01.vite",{"title":309,"path":333,"stem":334,"new":18,"type":307,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fnuxt","docs\u002Fdark-mode\u002F02.nuxt",{"title":336,"path":337,"stem":338,"new":18,"type":307,"children":-1},"Vitepress","\u002Fdocs\u002Fdark-mode\u002Fvitepress","docs\u002Fdark-mode\u002F03.vitepress",{"title":313,"path":340,"stem":341,"new":18,"type":307,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fastro","docs\u002Fdark-mode\u002F04.astro",{"title":343,"path":344,"stem":345,"children":346,"new":18,"type":297},"Directory","\u002Fdocs\u002Fdirectory","docs\u002Fdirectory\u002Findex",[347],{"title":343,"path":344,"stem":345,"new":18,"type":307,"children":-1},{"title":349,"path":350,"stem":351,"children":352,"new":18,"type":297},"Forms","\u002Fdocs\u002Fforms","docs\u002Fforms",[353,357,361],{"title":354,"path":355,"stem":356,"new":18,"type":307,"children":-1},"VeeValidate","\u002Fdocs\u002Fforms\u002Fvee-validate","docs\u002Fforms\u002F01.vee-validate",{"title":358,"path":359,"stem":360,"new":18,"type":307,"children":-1},"TanStack Form","\u002Fdocs\u002Fforms\u002Ftanstack-form","docs\u002Fforms\u002F02.tanstack-form",{"title":362,"path":363,"stem":364,"new":18,"type":307,"children":-1},"Formisch","\u002Fdocs\u002Fforms\u002Fformisch","docs\u002Fforms\u002F03.formisch",{"title":366,"path":367,"stem":368,"children":369,"new":18,"type":297},"Registry","\u002Fdocs\u002Fregistry","docs\u002Fregistry\u002Findex",[370,371,375,379,383,387],{"title":366,"path":367,"stem":368,"new":18,"type":307,"children":-1},{"title":372,"path":373,"stem":374,"new":18,"type":307,"children":-1},"Examples","\u002Fdocs\u002Fregistry\u002Fexamples","docs\u002Fregistry\u002Fexamples",{"title":376,"path":377,"stem":378,"new":18,"type":307,"children":-1},"FAQ","\u002Fdocs\u002Fregistry\u002Ffaq","docs\u002Fregistry\u002Ffaq",{"title":380,"path":381,"stem":382,"new":18,"type":307,"children":-1},"Getting Started","\u002Fdocs\u002Fregistry\u002Fgetting-started","docs\u002Fregistry\u002Fgetting-started",{"title":384,"path":385,"stem":386,"new":18,"type":307,"children":-1},"registry-item.json","\u002Fdocs\u002Fregistry\u002Fregistry-item-json","docs\u002Fregistry\u002Fregistry-item-json",{"title":388,"path":389,"stem":390,"new":18,"type":307,"children":-1},"registry.json","\u002Fdocs\u002Fregistry\u002Fregistry-json","docs\u002Fregistry\u002Fregistry-json",{"title":392,"path":393,"stem":394,"children":395,"new":18,"type":297},"Utilities","\u002Fdocs\u002Futilities","docs\u002Futilities\u002Findex",[396,397,401],{"title":392,"path":393,"stem":394,"new":18,"type":307,"children":-1},{"title":398,"path":399,"stem":400,"new":18,"type":307,"children":-1},"scroll-fade","\u002Fdocs\u002Futilities\u002Fscroll-fade","docs\u002Futilities\u002Fscroll-fade",{"title":402,"path":403,"stem":404,"new":18,"type":307,"children":-1},"shimmer","\u002Fdocs\u002Futilities\u002Fshimmer","docs\u002Futilities\u002Fshimmer",{"path":6,"stem":7,"title":406,"type":297,"children":407},"Get Started",[408,412,419,423,427,433,437,441,445,449,453,457,461,465],{"title":409,"path":410,"stem":411,"new":18,"type":307,"children":-1},"Introduction","\u002Fdocs\u002Fintroduction","docs\u002F01.introduction",{"title":299,"path":300,"stem":301,"children":413,"new":18,"type":297},[414,415,416,417,418],{"title":304,"path":305,"stem":306,"new":18,"type":307,"children":-1},{"title":309,"path":310,"stem":311,"new":18,"type":307,"children":-1},{"title":313,"path":314,"stem":315,"new":18,"type":307,"children":-1},{"title":317,"path":318,"stem":319,"new":18,"type":307,"children":-1},{"title":321,"path":322,"stem":323,"new":18,"type":307,"children":-1},{"title":420,"path":421,"stem":422,"new":18,"type":307,"children":-1},"components.json","\u002Fdocs\u002Fcomponents-json","docs\u002F03.components-json",{"title":424,"path":425,"stem":426,"new":18,"type":307,"children":-1},"Theming","\u002Fdocs\u002Ftheming","docs\u002F04.theming",{"title":325,"path":326,"stem":327,"children":428,"new":18,"type":297},[429,430,431,432],{"title":304,"path":330,"stem":331,"new":18,"type":307,"children":-1},{"title":309,"path":333,"stem":334,"new":18,"type":307,"children":-1},{"title":336,"path":337,"stem":338,"new":18,"type":307,"children":-1},{"title":313,"path":340,"stem":341,"new":18,"type":307,"children":-1},{"title":434,"path":435,"stem":436,"new":18,"type":307,"children":-1},"CLI","\u002Fdocs\u002Fcli","docs\u002F06.cli",{"title":438,"path":439,"stem":440,"new":18,"type":307,"children":-1},"JavaScript","\u002Fdocs\u002Fjavascript","docs\u002F07.javascript",{"title":442,"path":443,"stem":444,"new":18,"type":307,"children":-1},"RTL","\u002Fdocs\u002Frtl","docs\u002F08.rtl",{"title":446,"path":447,"stem":448,"new":18,"type":307,"children":-1},"Figma","\u002Fdocs\u002Ffigma","docs\u002F09.figma",{"title":450,"path":451,"stem":452,"new":18,"type":307,"children":-1},"Changelog","\u002Fdocs\u002Fchangelog","docs\u002F10.changelog",{"title":454,"path":455,"stem":456,"new":18,"type":307,"children":-1},"Legacy Docs","\u002Fdocs\u002Flegacy","docs\u002F11.legacy",{"title":458,"path":459,"stem":460,"new":18,"type":307,"children":-1},"Skills","\u002Fdocs\u002Fskills","docs\u002Fskills",{"title":462,"path":463,"stem":464,"new":18,"type":307,"children":-1},"Typeset","\u002Fdocs\u002Ftypeset","docs\u002Ftypeset",{"title":392,"path":393,"stem":394,"children":466,"new":18,"type":297},[467,468,469],{"title":392,"path":393,"stem":394,"new":18,"type":307,"children":-1},{"title":398,"path":399,"stem":400,"new":18,"type":307,"children":-1},{"title":402,"path":403,"stem":404,"new":18,"type":307,"children":-1},{"repo":471},{"id":472,"name":473,"repo":474,"description":475,"createdAt":476,"updatedAt":477,"pushedAt":478,"stars":479,"watchers":479,"forks":479,"defaultBranch":480},1360880822,"v-design","v-stella\u002Fv-design","An open-source Vue design system and component registry.","2026-09-08T03:28:46Z","2026-09-09T08:39:14Z","2026-09-09T08:36:47Z",0,"dev",{"id":482,"title":145,"body":483,"description":1200,"extension":1201,"links":1202,"meta":1203,"navigation":204,"new":18,"path":146,"rawbody":1204,"seo":1205,"stem":147,"__hash__":1206},"content\u002Fdocs\u002Fcomponents\u002Fitem.md",{"type":484,"value":485,"toc":1171},"minimark",[486,498,505,511,515,570,574,583,586,591,595,599,612,615,619,622,625,629,633,637,640,644,648,652,656,663,667,671,674,678,681,684,755,761,767,773,776,781,809,815,819,824,850,856,860,866,907,913,919,923,928,934,960,966,970,975,1001,1007,1011,1016,1042,1048,1052,1057,1083,1089,1093,1098,1124,1130,1134,1139,1165],[487,488,489,490,493,494,497],"p",{},"The ",[491,492,145],"code",{}," component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the ",[491,495,496],{},"ItemGroup"," component to create a list of items.",[487,499,500,501,504],{},"You can pretty much achieve the same result with the ",[491,502,503],{},"div"," element and some classes, but I've built this so many times that I decided to create a component for it. Now I use it all the time.",[506,507],"component-preview",{"name":508,"className":509},"ItemDemo",[510],"[&_.preview]:p-0",[512,513,299],"h2",{"id":514},"installation",[516,517,518,533,546],"code-tabs",{},[519,520,521,527],"tabs-list",{},[522,523,525],"tabs-trigger",{"value":524},"cli",[487,526,434],{},[522,528,530],{"value":529},"manual",[487,531,532],{},"Manual",[534,535,536],"tabs-content",{"value":524},[537,538,544],"pre",{"className":539,"code":541,"language":542,"meta":543},[540],"language-bash","npx shadcn-vue@latest add item\n","bash","",[491,545,541],{"__ignoreMap":543},[534,547,548],{"value":529},[549,550,551,565],"steps",{},[552,553,554],"step",{},[487,555,556,557,564],{},"Copy and paste the ",[558,559,563],"a",{"href":560,"rel":561},"https:\u002F\u002Fgithub.com\u002Funovue\u002Fshadcn-vue\u002Ftree\u002Fdev\u002Fapps\u002Fv4\u002Fregistry\u002Fnew-york-v4\u002Fui\u002Fitem",[562],"nofollow","GitHub source code"," into your project.",[552,566,567],{},[487,568,569],{},"Update the import paths to match your project setup.",[512,571,573],{"id":572},"usage","Usage",[537,575,581],{"className":576,"code":578,"language":579,"meta":580},[577],"language-vue","\u003Cscript setup lang=\"ts\">\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemHeader,\n  ItemMedia,\n  ItemTitle,\n} from '@\u002Fcomponents\u002Fui\u002Fitem'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CItem>\n    \u003CItemHeader>Item Header\u003C\u002FItemHeader>\n    \u003CItemMedia \u002F>\n    \u003CItemContent>\n      \u003CItemTitle>Item\u003C\u002FItemTitle>\n      \u003CItemDescription>Item\u003C\u002FItemDescription>\n    \u003C\u002FItemContent>\n    \u003CItemFooter>Item Footer\u003C\u002FItemFooter>\n  \u003C\u002FItem>\n\u003C\u002Ftemplate>\n","vue","showLineNumbers",[491,582,578],{"__ignoreMap":543},[512,584,372],{"id":585},"examples",[587,588,590],"h3",{"id":589},"variants","Variants",[506,592],{"name":593,"previewClass":594},"ItemVariantDemo","h-[27rem] sm:h-96",[587,596,598],{"id":597},"size","Size",[487,600,489,601,603,604,607,608,611],{},[491,602,145],{}," component has different sizes for different use cases. For example, you can use the ",[491,605,606],{},"sm"," size for a compact item or the ",[491,609,610],{},"default"," size for a standard item.",[506,613],{"name":614},"ItemSizeDemo",[587,616,618],{"id":617},"icon","Icon",[506,620],{"name":621},"ItemIconDemo",[587,623,37],{"id":624},"avatar",[506,626],{"name":627,"previewClass":628},"ItemAvatarDemo","h-88 sm:h-72",[587,630,632],{"id":631},"image","Image",[506,634],{"name":635,"previewClass":636},"ItemImageDemo","h-[26rem]",[587,638,639],{"id":297},"Group",[506,641],{"name":642,"previewClass":643},"ItemGroupDemo","h-[30rem] sm:h-80",[587,645,647],{"id":646},"header","Header",[506,649],{"name":650,"previewClass":651},"ItemHeaderDemo","h-88",[587,653,655],{"id":654},"link","Link",[487,657,658,659,662],{},"To render an item as a link, use the ",[491,660,661],{},"as-child"," prop. The hover and focus states will be applied to the anchor element.",[506,664],{"name":665,"previewClass":666},"ItemLinkDemo","h-80 sm:h-72",[587,668,670],{"id":669},"dropdown","Dropdown",[506,672],{"name":673,"previewClass":651},"ItemDropdownDemo",[512,675,677],{"id":676},"api-reference","API Reference",[587,679,145],{"id":680},"item",[487,682,683],{},"The main component for displaying content with media, title, description, and actions.",[685,686,687,703],"table",{},[688,689,690],"thead",{},[691,692,693,697,700],"tr",{},[694,695,696],"th",{},"Prop",[694,698,699],{},"Type",[694,701,702],{},"Default",[704,705,706,724,739],"tbody",{},[691,707,708,714,719],{},[709,710,711],"td",{},[491,712,713],{},"variant",[709,715,716],{},[491,717,718],{},"\"default\" | \"outline\" | \"muted\"",[709,720,721],{},[491,722,723],{},"\"default\"",[691,725,726,730,735],{},[709,727,728],{},[491,729,597],{},[709,731,732],{},[491,733,734],{},"\"default\" | \"sm\"",[709,736,737],{},[491,738,723],{},[691,740,741,745,750],{},[709,742,743],{},[491,744,661],{},[709,746,747],{},[491,748,749],{},"boolean",[709,751,752],{},[491,753,754],{},"false",[537,756,759],{"className":757,"code":758,"language":579,"meta":543},[577],"\u003Ctemplate>\n  \u003CItem size=\"\" variant=\"\">\n    \u003CItemMedia \u002F>\n    \u003CItemContent>\n      \u003CItemTitle>Item\u003C\u002FItemTitle>\n      \u003CItemDescription>Item\u003C\u002FItemDescription>\n    \u003C\u002FItemContent>\n    \u003CItemActions \u002F>\n  \u003C\u002FItem>\n\u003C\u002Ftemplate>\n",[491,760,758],{"__ignoreMap":543},[487,762,763,764,766],{},"You can use the ",[491,765,661],{}," prop to render a custom component as the item, for example a link. The hover and focus states will be applied to the custom component.",[537,768,771],{"className":769,"code":770,"language":579,"meta":543},[577],"\u003Cscript setup lang=\"ts\">\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from '@\u002Fcomponents\u002Fui\u002Fitem'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CItem as-child>\n    \u003Ca href=\"\u002Fdashboard\">\n      \u003CItemMedia variant=\"icon\">\n        \u003CHome \u002F>\n      \u003C\u002FItemMedia>\n      \u003CItemContent>\n        \u003CItemTitle>Dashboard\u003C\u002FItemTitle>\n        \u003CItemDescription>\n          Overview of your account and activity.\n        \u003C\u002FItemDescription>\n      \u003C\u002FItemContent>\n    \u003C\u002Fa>\n  \u003C\u002FItem>\n\u003C\u002Ftemplate>\n",[491,772,770],{"__ignoreMap":543},[587,774,496],{"id":775},"itemgroup",[487,777,489,778,780],{},[491,779,496],{}," component is a container that groups related items together with consistent styling.",[685,782,783,793],{},[688,784,785],{},[691,786,787,789,791],{},[694,788,696],{},[694,790,699],{},[694,792,702],{},[704,794,795],{},[691,796,797,802,807],{},[709,798,799],{},[491,800,801],{},"class",[709,803,804],{},[491,805,806],{},"string",[709,808],{},[537,810,813],{"className":811,"code":812,"language":579,"meta":543},[577],"\u003Ctemplate>\n  \u003CItemGroup>\n    \u003CItem \u002F>\n    \u003CItem \u002F>\n  \u003C\u002FItemGroup>\n\u003C\u002Ftemplate>\n",[491,814,812],{"__ignoreMap":543},[587,816,818],{"id":817},"itemseparator","ItemSeparator",[487,820,489,821,823],{},[491,822,818],{}," component is a separator that separates items in the item group.",[685,825,826,836],{},[688,827,828],{},[691,829,830,832,834],{},[694,831,696],{},[694,833,699],{},[694,835,702],{},[704,837,838],{},[691,839,840,844,848],{},[709,841,842],{},[491,843,801],{},[709,845,846],{},[491,847,806],{},[709,849],{},[537,851,854],{"className":852,"code":853,"language":579,"meta":543},[577],"\u003Ctemplate>\n  \u003CItemGroup>\n    \u003CItem \u002F>\n    \u003CItemSeparator \u002F>\n    \u003CItem \u002F>\n  \u003C\u002FItemGroup>\n\u003C\u002Ftemplate>\n",[491,855,853],{"__ignoreMap":543},[587,857,859],{"id":858},"itemmedia","ItemMedia",[487,861,862,863,865],{},"Use the ",[491,864,859],{}," component to display media content such as icons, images, or avatars.",[685,867,868,878],{},[688,869,870],{},[691,871,872,874,876],{},[694,873,696],{},[694,875,699],{},[694,877,702],{},[704,879,880,895],{},[691,881,882,886,891],{},[709,883,884],{},[491,885,713],{},[709,887,888],{},[491,889,890],{},"\"default\" | \"icon\" | \"image\"",[709,892,893],{},[491,894,723],{},[691,896,897,901,905],{},[709,898,899],{},[491,900,801],{},[709,902,903],{},[491,904,806],{},[709,906],{},[537,908,911],{"className":909,"code":910,"language":579,"meta":543},[577],"\u003Ctemplate>\n  \u003CItemMedia variant=\"icon\">\n    \u003CIcon \u002F>\n  \u003C\u002FItemMedia>\n\u003C\u002Ftemplate>\n",[491,912,910],{"__ignoreMap":543},[537,914,917],{"className":915,"code":916,"language":579,"meta":543},[577],"\u003Ctemplate>\n  \u003CItemMedia variant=\"image\">\n    \u003Cimg src=\"...\" alt=\"...\">\n  \u003C\u002FItemMedia>\n\u003C\u002Ftemplate>\n",[491,918,916],{"__ignoreMap":543},[587,920,922],{"id":921},"itemcontent","ItemContent",[487,924,489,925,927],{},[491,926,922],{}," component wraps the title and description of the item.",[487,929,930,931,933],{},"You can skip ",[491,932,922],{}," if you only need a title.",[685,935,936,946],{},[688,937,938],{},[691,939,940,942,944],{},[694,941,696],{},[694,943,699],{},[694,945,702],{},[704,947,948],{},[691,949,950,954,958],{},[709,951,952],{},[491,953,801],{},[709,955,956],{},[491,957,806],{},[709,959],{},[537,961,964],{"className":962,"code":963,"language":579,"meta":543},[577],"\u003Ctemplate>\n  \u003CItemContent>\n    \u003CItemTitle>Item\u003C\u002FItemTitle>\n    \u003CItemDescription>Item\u003C\u002FItemDescription>\n  \u003C\u002FItemContent>\n\u003C\u002Ftemplate>\n",[491,965,963],{"__ignoreMap":543},[587,967,969],{"id":968},"itemtitle","ItemTitle",[487,971,862,972,974],{},[491,973,969],{}," component to display the title of the item.",[685,976,977,987],{},[688,978,979],{},[691,980,981,983,985],{},[694,982,696],{},[694,984,699],{},[694,986,702],{},[704,988,989],{},[691,990,991,995,999],{},[709,992,993],{},[491,994,801],{},[709,996,997],{},[491,998,806],{},[709,1000],{},[537,1002,1005],{"className":1003,"code":1004,"language":579,"meta":543},[577],"\u003Ctemplate>\n  \u003CItemTitle>Item Title\u003C\u002FItemTitle>\n\u003C\u002Ftemplate>\n",[491,1006,1004],{"__ignoreMap":543},[587,1008,1010],{"id":1009},"itemdescription","ItemDescription",[487,1012,862,1013,1015],{},[491,1014,1010],{}," component to display the description of the item.",[685,1017,1018,1028],{},[688,1019,1020],{},[691,1021,1022,1024,1026],{},[694,1023,696],{},[694,1025,699],{},[694,1027,702],{},[704,1029,1030],{},[691,1031,1032,1036,1040],{},[709,1033,1034],{},[491,1035,801],{},[709,1037,1038],{},[491,1039,806],{},[709,1041],{},[537,1043,1046],{"className":1044,"code":1045,"language":579,"meta":543},[577],"\u003Ctemplate>\n  \u003CItemDescription>Item description\u003C\u002FItemDescription>\n\u003C\u002Ftemplate>\n",[491,1047,1045],{"__ignoreMap":543},[587,1049,1051],{"id":1050},"itemactions","ItemActions",[487,1053,862,1054,1056],{},[491,1055,1051],{}," component to display action buttons or other interactive elements.",[685,1058,1059,1069],{},[688,1060,1061],{},[691,1062,1063,1065,1067],{},[694,1064,696],{},[694,1066,699],{},[694,1068,702],{},[704,1070,1071],{},[691,1072,1073,1077,1081],{},[709,1074,1075],{},[491,1076,801],{},[709,1078,1079],{},[491,1080,806],{},[709,1082],{},[537,1084,1087],{"className":1085,"code":1086,"language":579,"meta":543},[577],"\u003Ctemplate>\n  \u003CItemActions>\n    \u003CButton>Action\u003C\u002FButton>\n    \u003CButton>Action\u003C\u002FButton>\n  \u003C\u002FItemActions>\n\u003C\u002Ftemplate>\n",[491,1088,1086],{"__ignoreMap":543},[587,1090,1092],{"id":1091},"itemheader","ItemHeader",[487,1094,862,1095,1097],{},[491,1096,1092],{}," component to display a header in the item.",[685,1099,1100,1110],{},[688,1101,1102],{},[691,1103,1104,1106,1108],{},[694,1105,696],{},[694,1107,699],{},[694,1109,702],{},[704,1111,1112],{},[691,1113,1114,1118,1122],{},[709,1115,1116],{},[491,1117,801],{},[709,1119,1120],{},[491,1121,806],{},[709,1123],{},[537,1125,1128],{"className":1126,"code":1127,"language":579,"meta":543},[577],"\u003Ctemplate>\n  \u003CItemHeader>Item Header\u003C\u002FItemHeader>\n\u003C\u002Ftemplate>\n",[491,1129,1127],{"__ignoreMap":543},[587,1131,1133],{"id":1132},"itemfooter","ItemFooter",[487,1135,862,1136,1138],{},[491,1137,1133],{}," component to display a footer in the item.",[685,1140,1141,1151],{},[688,1142,1143],{},[691,1144,1145,1147,1149],{},[694,1146,696],{},[694,1148,699],{},[694,1150,702],{},[704,1152,1153],{},[691,1154,1155,1159,1163],{},[709,1156,1157],{},[491,1158,801],{},[709,1160,1161],{},[491,1162,806],{},[709,1164],{},[537,1166,1169],{"className":1167,"code":1168,"language":579,"meta":543},[577],"\u003Ctemplate>\n  \u003CItemFooter>Item Footer\u003C\u002FItemFooter>\n\u003C\u002Ftemplate>\n",[491,1170,1168],{"__ignoreMap":543},{"title":543,"searchDepth":1172,"depth":1172,"links":1173},2,[1174,1175,1176,1188],{"id":514,"depth":1172,"text":299},{"id":572,"depth":1172,"text":573},{"id":585,"depth":1172,"text":372,"children":1177},[1178,1180,1181,1182,1183,1184,1185,1186,1187],{"id":589,"depth":1179,"text":590},3,{"id":597,"depth":1179,"text":598},{"id":617,"depth":1179,"text":618},{"id":624,"depth":1179,"text":37},{"id":631,"depth":1179,"text":632},{"id":297,"depth":1179,"text":639},{"id":646,"depth":1179,"text":647},{"id":654,"depth":1179,"text":655},{"id":669,"depth":1179,"text":670},{"id":676,"depth":1172,"text":677,"children":1189},[1190,1191,1192,1193,1194,1195,1196,1197,1198,1199],{"id":680,"depth":1179,"text":145},{"id":775,"depth":1179,"text":496},{"id":817,"depth":1179,"text":818},{"id":858,"depth":1179,"text":859},{"id":921,"depth":1179,"text":922},{"id":968,"depth":1179,"text":969},{"id":1009,"depth":1179,"text":1010},{"id":1050,"depth":1179,"text":1051},{"id":1091,"depth":1179,"text":1092},{"id":1132,"depth":1179,"text":1133},"A versatile component that you can use to display any content.","md",null,{"component":204},"---\ntitle: Item\ndescription: A versatile component that you can use to display any content.\ncomponent: true\n---\n\nThe `Item` component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the `ItemGroup` component to create a list of items.\n\nYou can pretty much achieve the same result with the `div` element and some classes, but I've built this so many times that I decided to create a component for it. Now I use it all the time.\n\n::component-preview\n---\nname: ItemDemo\nclass: '[&_.preview]:p-0'\n---\n::\n\n## Installation\n\n:::::code-tabs\n\n:::tabs-list\n\n  ::tabs-trigger{value=\"cli\"}\n  CLI\n  ::\n\n  ::tabs-trigger{value=\"manual\"}\n  Manual\n  ::\n\n:::\n\n::tabs-content{value=\"cli\"}\n\n```bash\nnpx shadcn-vue@latest add item\n```\n\n::\n\n::::tabs-content{value=\"manual\"}\n  :::steps\n    ::step\n    Copy and paste the [GitHub source code](https:\u002F\u002Fgithub.com\u002Funovue\u002Fshadcn-vue\u002Ftree\u002Fdev\u002Fapps\u002Fv4\u002Fregistry\u002Fnew-york-v4\u002Fui\u002Fitem) into your project.\n    ::\n\n    ::step\n    Update the import paths to match your project setup.\n    ::\n  :::\n::::\n\n:::::\n\n## Usage\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemHeader,\n  ItemMedia,\n  ItemTitle,\n} from '@\u002Fcomponents\u002Fui\u002Fitem'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CItem>\n    \u003CItemHeader>Item Header\u003C\u002FItemHeader>\n    \u003CItemMedia \u002F>\n    \u003CItemContent>\n      \u003CItemTitle>Item\u003C\u002FItemTitle>\n      \u003CItemDescription>Item\u003C\u002FItemDescription>\n    \u003C\u002FItemContent>\n    \u003CItemFooter>Item Footer\u003C\u002FItemFooter>\n  \u003C\u002FItem>\n\u003C\u002Ftemplate>\n```\n\n## Examples\n\n### Variants\n\n::component-preview\n---\nname: ItemVariantDemo\npreviewClass: h-[27rem] sm:h-96\n---\n::\n\n### Size\n\nThe `Item` component has different sizes for different use cases. For example, you can use the `sm` size for a compact item or the `default` size for a standard item.\n\n::component-preview\n---\nname: ItemSizeDemo\n---\n::\n\n### Icon\n\n::component-preview\n---\nname: ItemIconDemo\n---\n::\n\n### Avatar\n\n::component-preview\n---\nname: ItemAvatarDemo\npreviewClass: h-88 sm:h-72\n---\n::\n\n### Image\n\n::component-preview\n---\nname: ItemImageDemo\npreviewClass: h-[26rem]\n---\n::\n\n### Group\n\n::component-preview\n---\nname: ItemGroupDemo\npreviewClass: h-[30rem] sm:h-80\n---\n::\n\n### Header\n\n::component-preview\n---\nname: ItemHeaderDemo\npreviewClass: h-88\n---\n::\n\n### Link\n\nTo render an item as a link, use the `as-child` prop. The hover and focus states will be applied to the anchor element.\n\n::component-preview\n---\nname: ItemLinkDemo\npreviewClass: h-80 sm:h-72\n---\n::\n\n### Dropdown\n\n::component-preview\n---\nname: ItemDropdownDemo\npreviewClass: h-88\n---\n::\n\n## API Reference\n\n### Item\n\nThe main component for displaying content with media, title, description, and actions.\n\n| Prop       | Type                                | Default     |\n| ---------- | ----------------------------------- | ----------- |\n| `variant`  | `\"default\" \\| \"outline\" \\| \"muted\"` | `\"default\"` |\n| `size`     | `\"default\" \\| \"sm\"`                 | `\"default\"` |\n| `as-child` | `boolean`                           | `false`     |\n\n```vue\n\u003Ctemplate>\n  \u003CItem size=\"\" variant=\"\">\n    \u003CItemMedia \u002F>\n    \u003CItemContent>\n      \u003CItemTitle>Item\u003C\u002FItemTitle>\n      \u003CItemDescription>Item\u003C\u002FItemDescription>\n    \u003C\u002FItemContent>\n    \u003CItemActions \u002F>\n  \u003C\u002FItem>\n\u003C\u002Ftemplate>\n```\n\nYou can use the `as-child` prop to render a custom component as the item, for example a link. The hover and focus states will be applied to the custom component.\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from '@\u002Fcomponents\u002Fui\u002Fitem'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CItem as-child>\n    \u003Ca href=\"\u002Fdashboard\">\n      \u003CItemMedia variant=\"icon\">\n        \u003CHome \u002F>\n      \u003C\u002FItemMedia>\n      \u003CItemContent>\n        \u003CItemTitle>Dashboard\u003C\u002FItemTitle>\n        \u003CItemDescription>\n          Overview of your account and activity.\n        \u003C\u002FItemDescription>\n      \u003C\u002FItemContent>\n    \u003C\u002Fa>\n  \u003C\u002FItem>\n\u003C\u002Ftemplate>\n```\n\n### ItemGroup\n\nThe `ItemGroup` component is a container that groups related items together with consistent styling.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `class`     | `string` |         |\n\n```vue\n\u003Ctemplate>\n  \u003CItemGroup>\n    \u003CItem \u002F>\n    \u003CItem \u002F>\n  \u003C\u002FItemGroup>\n\u003C\u002Ftemplate>\n```\n\n### ItemSeparator\n\nThe `ItemSeparator` component is a separator that separates items in the item group.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `class`     | `string` |         |\n\n```vue\n\u003Ctemplate>\n  \u003CItemGroup>\n    \u003CItem \u002F>\n    \u003CItemSeparator \u002F>\n    \u003CItem \u002F>\n  \u003C\u002FItemGroup>\n\u003C\u002Ftemplate>\n```\n\n### ItemMedia\n\nUse the `ItemMedia` component to display media content such as icons, images, or avatars.\n\n| Prop        | Type                             | Default     |\n| ----------- | -------------------------------- | ----------- |\n| `variant`   | `\"default\" \\| \"icon\" \\| \"image\"` | `\"default\"` |\n| `class`     | `string`                         |             |\n\n```vue\n\u003Ctemplate>\n  \u003CItemMedia variant=\"icon\">\n    \u003CIcon \u002F>\n  \u003C\u002FItemMedia>\n\u003C\u002Ftemplate>\n```\n\n```vue\n\u003Ctemplate>\n  \u003CItemMedia variant=\"image\">\n    \u003Cimg src=\"...\" alt=\"...\">\n  \u003C\u002FItemMedia>\n\u003C\u002Ftemplate>\n```\n\n### ItemContent\n\nThe `ItemContent` component wraps the title and description of the item.\n\nYou can skip `ItemContent` if you only need a title.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `class`     | `string` |         |\n\n```vue\n\u003Ctemplate>\n  \u003CItemContent>\n    \u003CItemTitle>Item\u003C\u002FItemTitle>\n    \u003CItemDescription>Item\u003C\u002FItemDescription>\n  \u003C\u002FItemContent>\n\u003C\u002Ftemplate>\n```\n\n### ItemTitle\n\nUse the `ItemTitle` component to display the title of the item.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `class`     | `string` |         |\n\n```vue\n\u003Ctemplate>\n  \u003CItemTitle>Item Title\u003C\u002FItemTitle>\n\u003C\u002Ftemplate>\n```\n\n### ItemDescription\n\nUse the `ItemDescription` component to display the description of the item.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `class`     | `string` |         |\n\n```vue\n\u003Ctemplate>\n  \u003CItemDescription>Item description\u003C\u002FItemDescription>\n\u003C\u002Ftemplate>\n```\n\n### ItemActions\n\nUse the `ItemActions` component to display action buttons or other interactive elements.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `class`     | `string` |         |\n\n```vue\n\u003Ctemplate>\n  \u003CItemActions>\n    \u003CButton>Action\u003C\u002FButton>\n    \u003CButton>Action\u003C\u002FButton>\n  \u003C\u002FItemActions>\n\u003C\u002Ftemplate>\n```\n\n### ItemHeader\n\nUse the `ItemHeader` component to display a header in the item.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `class`     | `string` |         |\n\n```vue\n\u003Ctemplate>\n  \u003CItemHeader>Item Header\u003C\u002FItemHeader>\n\u003C\u002Ftemplate>\n```\n\n### ItemFooter\n\nUse the `ItemFooter` component to display a footer in the item.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `class`     | `string` |         |\n\n```vue\n\u003Ctemplate>\n  \u003CItemFooter>Item Footer\u003C\u002FItemFooter>\n\u003C\u002Ftemplate>\n```\n",{"title":145,"description":1200},"BDhkBKzmb398Pd5jujZ9odCFa1vnW7Dcs1Wh129MPEg",[1208,1209],{"title":141,"path":142,"stem":143,"children":-1},{"title":149,"path":150,"stem":151,"children":-1},1788943234702]