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