[{"data":1,"prerenderedAt":1002},["ShallowReactive",2],{"navigation":3,"$fMW9jOOkNpZriWVK3P_bZYNOyYR2IEPvrHsC7cDBlJJc":405,"/docs/changelog":418,"surround-/docs/changelog":999},[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":83,"body":420,"description":992,"extension":993,"links":994,"meta":995,"navigation":132,"new":17,"path":84,"rawbody":996,"seo":997,"stem":85,"__hash__":998},"content/docs/10.changelog.md",{"type":421,"value":422,"toc":975},"minimark",[423,428,443,446,450,457,461,464,510,513,523,526,536,539,546,549,553,556,560,563,566,572,579,586,590,593,596,599,603,606,612,615,621,627,631,634,638,644,647,650,656,659,665,668,672,675,681,684,690,693,697,700,706,709,712,718,722,725,731,734,740,750,756,760,767,773,780,784,787,790,793,796,802,807,810,814,818,825,829,836,842,848,851,857,860,866,870,873,877,880,884,887,890,894,897,904,907,940,955,964,967],[424,425,427],"h2",{"id":426},"november-2025-catch-up","November 2025 - Catch up",[429,430,431,432,437,438,442],"p",{},"We've upgraded ",[433,434,436],"a",{"href":435},"/","shadcn-vue.com"," to Nuxt v4 and Tailwind v4. The site now uses the upgraded ",[439,440,441],"code",{},"new-york"," components.",[429,444,445],{},"We've also made some minor design updates to make the site faster and easier to navigate.",[447,448,146],"h3",{"id":449},"chart",[429,451,452,453,456],{},"We also refactored the ",[433,454,146],{"href":455},"/docs/chart"," component to match the original component, and stick to the API as close as possible.",[424,458,460],{"id":459},"october-2025-new-components","October 2025 - New Components",[429,462,463],{},"For this round of components, I looked at what we build every day, the boring stuff we rebuild over and over, and made reusable abstractions you can actually use.",[465,466,467,474,480,486,492,498,504],"ul",{},[468,469,470,473],"li",{},[433,471,306],{"href":472},"#spinner",": An indicator to show a loading state.",[468,475,476,479],{},[433,477,222],{"href":478},"#kbd",": Display a keyboard key or group of keys.",[468,481,482,485],{},[433,483,129],{"href":484},"#button-group",": A group of buttons for actions and split buttons.",[468,487,488,491],{},[433,489,210],{"href":490},"#input-group",": Input with icons, buttons, labels and more.",[468,493,494,497],{},[433,495,194],{"href":496},"#field",": One component. All your forms.",[468,499,500,503],{},[433,501,218],{"href":502},"#item",": Display lists of items, cards, and more.",[468,505,506,509],{},[433,507,190],{"href":508},"#empty",": Use this one for empty states.",[447,511,306],{"id":512},"spinner",[429,514,515,516,519,520,522],{},"Okay let's start with the easiest ones: ",[517,518,306],"strong",{}," and ",[517,521,222],{},". Pretty basic. We all know what they do.",[429,524,525],{},"Here's how you render a spinner:",[527,528,534],"pre",{"className":529,"code":531,"language":532,"meta":533},[530],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { Spinner } from '@/components/ui/spinner'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CSpinner />\n\u003C/template>\n","vue","",[439,535,531],{"__ignoreMap":533},[429,537,538],{},"Here's what it looks like:",[540,541],"component-preview",{"className":542,"name":545},[543,544],"[&_.preview]:h-[250px]","[&_pre]:!h-[250px]","SpinnerBasic",[429,547,548],{},"Here's what it looks like in a button:",[540,550],{"className":551,"name":552},[543,544],"SpinnerButtonDemo",[429,554,555],{},"You can edit the code and replace it with your own spinner.",[540,557],{"className":558,"name":559},[543,544],"SpinnerCustomDemo",[447,561,222],{"id":562},"kbd",[429,564,565],{},"Kbd is a component that renders a keyboard key.",[527,567,570],{"className":568,"code":569,"language":532,"meta":533},[530],"\u003Cscript setup lang=\"ts\">\nimport { Kbd, KbdGroup } from '@/components/ui/kbd'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CKbd>Ctrl\u003C/Kbd>\n\u003C/template>\n",[439,571,569],{"__ignoreMap":533},[429,573,574,575,578],{},"Use ",[439,576,577],{},"KbdGroup"," to group keyboard keys together.",[527,580,584],{"className":581,"code":582,"language":532,"meta":583},[530],"\u003Ctemplate>\n  \u003CKbdGroup>\n    \u003CKbd>Ctrl\u003C/Kbd>\n    \u003CKbd>B\u003C/Kbd>\n  \u003C/KbdGroup>\n\u003C/template>\n","showLineNumbers",[439,585,582],{"__ignoreMap":533},[540,587],{"className":588,"name":589},[543,544],"KbdDemo",[429,591,592],{},"You can add it to buttons, tooltips, input groups, and more.",[447,594,129],{"id":595},"button-group",[429,597,598],{},"I got a lot of requests for this one: Button Group. It's a container that groups related buttons together with consistent styling. Great for action groups, split buttons, and more.",[540,600],{"className":601,"name":602},[543,544],"ButtonGroupDemo",[429,604,605],{},"Here's the code:",[527,607,610],{"className":608,"code":609,"language":532,"meta":583},[530],"\u003Cscript setup lang=\"ts\">\nimport { ButtonGroup } from '@/components/ui/button-group'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CButtonGroup>\n    \u003CButton>Button 1\u003C/Button>\n    \u003CButton>Button 2\u003C/Button>\n  \u003C/ButtonGroup>\n\u003C/template>\n",[439,611,609],{"__ignoreMap":533},[429,613,614],{},"You can nest button groups to create more complex layouts with spacing.",[527,616,619],{"className":617,"code":618,"language":532,"meta":583},[530],"\u003Ctemplate>\n  \u003CButtonGroup>\n    \u003CButtonGroup>\n      \u003CButton>Button 1\u003C/Button>\n      \u003CButton>Button 2\u003C/Button>\n    \u003C/ButtonGroup>\n    \u003CButtonGroup>\n      \u003CButton>Button 3\u003C/Button>\n      \u003CButton>Button 4\u003C/Button>\n    \u003C/ButtonGroup>\n  \u003C/ButtonGroup>\n\u003C/template>\n",[439,620,618],{"__ignoreMap":533},[429,622,574,623,626],{},[439,624,625],{},"ButtonGroupSeparator"," to create split buttons. Classic dropdown pattern.",[540,628],{"className":629,"name":630},[543,544],"ButtonGroupWithDropdownMenuDemo",[429,632,633],{},"You can also use it to add prefix or suffix buttons and text to inputs.",[540,635],{"className":636,"name":637},[543,544],"ButtonGroupWithSelectDemo",[527,639,642],{"className":640,"code":641,"language":532,"meta":583},[530],"\u003Ctemplate>\n  \u003CButtonGroup>\n    \u003CButtonGroupText>Prefix\u003C/ButtonGroupText>\n    \u003CInput placeholder=\"Type something here...\" />\n    \u003CButton>Button\u003C/Button>\n  \u003C/ButtonGroup>\n\u003C/template>\n",[439,643,641],{"__ignoreMap":533},[447,645,210],{"id":646},"input-group",[429,648,649],{},"Input Group lets you add icons, buttons, and more to your inputs. You know, all those little bits you always need around your inputs.",[527,651,654],{"className":652,"code":653,"language":532,"meta":583},[530],"\u003Cscript setup lang=\"ts\">\nimport { InputGroup, InputGroupAddon, InputGroupInput } from '@/components/ui/input-group'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputGroup>\n    \u003CInputGroupInput placeholder=\"Search...\" />\n    \u003CInputGroupAddon>\n      \u003CSearchIcon />\n    \u003C/InputGroupAddon>\n  \u003C/InputGroup>\n\u003C/template>\n",[439,655,653],{"__ignoreMap":533},[429,657,658],{},"Here's a preview with icons:",[540,660],{"className":661,"name":664},[662,663],"[&_.preview]:h-[300px]","[&_pre]:!h-[300px]","InputGroupWithIcon",[429,666,667],{},"You can also add buttons to the input group.",[540,669],{"className":670,"name":671},[662,663],"InputGroupWithButton",[429,673,674],{},"Or text, labels, tooltips,...",[540,676],{"className":677,"name":680},[678,679],"[&_.preview]:h-[350px]","[&_pre]:!h-[350px]","InputGroupWithText",[429,682,683],{},"It also works with textareas so you can build really complex components with lots of knobs and dials or yet another prompt form.",[540,685],{"className":686,"name":689},[687,688],"[&_.preview]:h-[450px]","[&_pre]:!h-[450px]","InputGroupWithTextarea",[429,691,692],{},"Oh here are some cool ones with spinners:",[540,694],{"className":695,"name":696},[678,679],"InputGroupWithSpinner",[447,698,194],{"id":699},"field",[429,701,702,703,705],{},"Introducing ",[517,704,194],{},", a component for building really complex forms. The abstraction here is beautiful.",[429,707,708],{},"It took me a long time to get it right but I made it work with all your form libraries: Vee Validate, TanStack Form, Bring Your Own Form.",[429,710,711],{},"Here's a basic field with an input:",[527,713,716],{"className":714,"code":715,"language":532,"meta":583},[530],"\u003Cscript setup lang=\"ts\">\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from '@/components/ui/field'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CField>\n    \u003CFieldLabel html-for=\"username\">\n      Username\n    \u003C/FieldLabel>\n    \u003CInput id=\"username\" placeholder=\"Max Leiter\" />\n    \u003CFieldDescription>\n      Choose a unique username for your account.\n    \u003C/FieldDescription>\n  \u003C/Field>\n\u003C/template>\n",[439,717,715],{"__ignoreMap":533},[540,719],{"className":720,"name":721},[678,679],"FieldInputDemo",[429,723,724],{},"It works with all form controls. Inputs, textareas, selects, checkboxes, radios, switches, sliders, you name it. Here's a full example:",[540,726],{"className":727,"name":730},[728,729],"[&_.preview]:h-[850px]","[&_pre]:!h-[850px]","FieldDemo",[429,732,733],{},"Here are some checkbox fields:",[540,735],{"className":736,"name":739},[737,738],"[&_.preview]:h-[500px]","[&_pre]:!h-[500px]","FieldCheckboxDemo",[429,741,742,743,519,746,749],{},"You can group fields together using ",[439,744,745],{},"FieldGroup",[439,747,748],{},"FieldSet",". Perfect for\nmulti-section forms.",[527,751,754],{"className":752,"code":753,"language":532,"meta":583},[530],"\u003Ctemplate>\n  \u003CFieldSet>\n    \u003CFieldLegend />\n    \u003CFieldGroup>\n      \u003CField />\n      \u003CField />\n    \u003C/FieldGroup>\n  \u003C/FieldSet>\n\u003C/template>\n",[439,755,753],{"__ignoreMap":533},[540,757],{"className":758,"name":759},[737,738],"FieldFieldsetDemo",[429,761,762,763,766],{},"Making it responsive is easy. Use ",[439,764,765],{},"orientation=\"responsive\""," and it switches\nbetween vertical and horizontal layouts based on container width. Done.",[540,768],{"className":769,"name":772},[770,771],"[&_.preview]:h-[600px]","[&_pre]:!h-[600px]","FieldResponsiveDemo",[429,774,775,776,779],{},"Wait here's more. Wrap your fields in ",[439,777,778],{},"FieldLabel"," to create a selectable field group. Really easy. And it looks great.",[540,781],{"className":782,"name":783},[770,771],"FieldChoiceCardDemo",[447,785,218],{"id":786},"item",[429,788,789],{},"This one is a straightforward flex container that can house nearly any type of content.",[429,791,792],{},"I've built this so many times that I decided to create a component for it. Now I use it all the time. I use it to display lists of items, cards, and more.",[429,794,795],{},"Here's a basic item:",[527,797,800],{"className":798,"code":799,"language":532,"meta":583},[530],"\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>\n    \u003CItemMedia variant=\"icon\">\n      \u003CHomeIcon />\n    \u003C/ItemMedia>\n    \u003CItemContent>\n      \u003CItemTitle>Dashboard\u003C/ItemTitle>\n      \u003CItemDescription>Overview of your account and activity.\u003C/ItemDescription>\n    \u003C/ItemContent>\n  \u003C/Item>\n\u003C/template>\n",[439,801,799],{"__ignoreMap":533},[540,803],{"className":804,"name":806},[662,805,663],"[&_.preview]:p-4","ItemDemo",[429,808,809],{},"You can add icons, avatars, or images to the item.",[540,811],{"className":812,"name":813},[662,805,663],"ItemIconDemo",[540,815],{"className":816,"name":817},[662,805,663],"ItemAvatarDemo",[429,819,820,821,824],{},"And here's what a list of items looks like with ",[439,822,823],{},"ItemGroup",":",[540,826],{"className":827,"name":828},[737,805,738],"ItemGroupDemo",[429,830,831,832,835],{},"Need it as a link? Use the ",[439,833,834],{},"asChild"," prop:",[527,837,840],{"className":838,"code":839,"language":532,"meta":583},[530],"\u003Ctemplate>\n  \u003CItem as-child>\n    \u003Ca href=\"/dashboard\">\n      \u003CItemMedia variant=\"icon\">\n        \u003CHomeIcon />\n      \u003C/ItemMedia>\n      \u003CItemContent>\n        \u003CItemTitle>Dashboard\u003C/ItemTitle>\n        \u003CItemDescription>Overview of your account and activity.\u003C/ItemDescription>\n      \u003C/ItemContent>\n    \u003C/a>\n  \u003C/Item>\n\u003C/template>\n",[439,841,839],{"__ignoreMap":533},[540,843],{"className":844,"name":847},[845,805,846],"[&_.preview]:h-[400px]","[&_pre]:!h-[400px]","ItemLinkDemo",[447,849,190],{"id":850},"empty",[429,852,853,854,856],{},"Okay last one: ",[517,855,190],{},". Use this to display empty states in your app.",[429,858,859],{},"Here's how you use it:",[527,861,864],{"className":862,"code":863,"language":532,"meta":583},[530],"\u003Cscript setup lang=\"ts\">\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyMedia,\n  EmptyTitle,\n} from '@/components/ui/empty'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CEmpty>\n    \u003CEmptyMedia variant=\"icon\">\n      \u003CInboxIcon />\n    \u003C/EmptyMedia>\n    \u003CEmptyTitle>No messages\u003C/EmptyTitle>\n    \u003CEmptyDescription>You don't have any messages yet.\u003C/EmptyDescription>\n    \u003CEmptyContent>\n      \u003CButton>Send a message\u003C/Button>\n    \u003C/EmptyContent>\n  \u003C/Empty>\n\u003C/template>\n",[439,865,863],{"__ignoreMap":533},[540,867],{"className":868,"name":869},[845,805,846],"EmptyDemo",[429,871,872],{},"You can use it with avatars:",[540,874],{"className":875,"name":876},[845,846],"EmptyAvatarDemo",[429,878,879],{},"Or with input groups for things like search results or email subscriptions:",[540,881],{"className":882,"name":883},[687,688],"EmptyInputGroupDemo",[429,885,886],{},"That's it. Seven new components. Works with all your libraries. Ready for your projects.",[888,889],"hr",{},[424,891,893],{"id":892},"february-2025-reka-ui-npx-shadcn-vuelatest-init","February 2025 - Reka UI & npx shadcn-vue@latest init",[429,895,896],{},"We've updated the latest registry to support Reka UI instead of Radix Vue.",[429,898,899,900,903],{},"The updated CLI is now available. You can now install components, themes, composables, utils and more using ",[439,901,902],{},"npx shadcn-vue add",".",[429,905,906],{},"This is a major step towards distributing code that you and your LLMs can access and use.",[908,909,910],"callout",{},[429,911,912,913,919,920,923,924,929,930,935,936,939],{},"With the released of ",[433,914,918],{"href":915,"rel":916},"https://reka-ui.com/",[917],"nofollow","Reka UI v2",", ",[439,921,922],{},"shadcn-vue@latest"," command will now install Reka UI. If you want to keep using ",[433,925,928],{"href":926,"rel":927},"https://radix-vue.com/",[917],"Radix Vue",", please visit ",[433,931,934],{"href":932,"rel":933},"https://radix.shadcn-vue.com/",[917],"here"," and run ",[439,937,938],{},"shadcn-vue@radix"," command instead.",[941,942,943,946,949],"ol",{},[468,944,945],{},"First up, when you init into a new app, we update your existing Tailwind files instead of overriding.",[468,947,948],{},"A component now ship its own dependencies. Take the accordion for example, it can define its Tailwind keyframes. When you add it to your project, we’ll update your tailwind.config.ts file accordingly.",[468,950,951,952,903],{},"You can also install remote components using url. ",[439,953,954],{},"npx shadcn-vue add https://acme.com/registry/navbar.json",[941,956,958,961],{"start":957},4,[468,959,960],{},"We have created a new schema that you can use to ship your own component registry. And since it has support for urls, you can even use it to distribute private components.",[468,962,963],{},"And a few more updates like better error handling and monorepo support.",[429,965,966],{},"You can try the new cli today.",[527,968,973],{"className":969,"code":971,"language":972,"meta":533},[970],"language-bash","npx shadcn-vue@latest init Sidebar01 Login01\n","bash",[439,974,971],{"__ignoreMap":533},{"title":533,"searchDepth":976,"depth":976,"links":977},2,[978,982,991],{"id":426,"depth":976,"text":427,"children":979},[980],{"id":449,"depth":981,"text":146},3,{"id":459,"depth":976,"text":460,"children":983},[984,985,986,987,988,989,990],{"id":512,"depth":981,"text":306},{"id":562,"depth":981,"text":222},{"id":595,"depth":981,"text":129},{"id":646,"depth":981,"text":210},{"id":699,"depth":981,"text":194},{"id":786,"depth":981,"text":218},{"id":850,"depth":981,"text":190},{"id":892,"depth":976,"text":893},"Latest updates and announcements.","md",null,{},"---\ntitle: Changelog\ndescription: Latest updates and announcements.\n---\n\n## November 2025 - Catch up\n\nWe've upgraded [shadcn-vue.com](/) to Nuxt v4 and Tailwind v4. The site now uses the upgraded `new-york` components.\n\nWe've also made some minor design updates to make the site faster and easier to navigate.\n\n### Chart\n\nWe also refactored the [Chart](/docs/chart) component to match the original component, and stick to the API as close as possible.\n\n## October 2025 - New Components\n\nFor this round of components, I looked at what we build every day, the boring stuff we rebuild over and over, and made reusable abstractions you can actually use.\n\n- [Spinner](#spinner): An indicator to show a loading state.\n- [Kbd](#kbd): Display a keyboard key or group of keys.\n- [Button Group](#button-group): A group of buttons for actions and split buttons.\n- [Input Group](#input-group): Input with icons, buttons, labels and more.\n- [Field](#field): One component. All your forms.\n- [Item](#item): Display lists of items, cards, and more.\n- [Empty](#empty): Use this one for empty states.\n\n### Spinner\n\nOkay let's start with the easiest ones: **Spinner** and **Kbd**. Pretty basic. We all know what they do.\n\nHere's how you render a spinner:\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { Spinner } from '@/components/ui/spinner'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CSpinner />\n\u003C/template>\n```\n\nHere's what it looks like:\n\n::component-preview\n---\nname: SpinnerBasic\nclass: \"[&_.preview]:h-[250px] [&_pre]:!h-[250px]\"\n---\n::\n\nHere's what it looks like in a button:\n\n::component-preview\n---\nname: SpinnerButtonDemo\nclass: \"[&_.preview]:h-[250px] [&_pre]:!h-[250px]\"\n---\n::\n\nYou can edit the code and replace it with your own spinner.\n\n::component-preview\n---\nname: SpinnerCustomDemo\nclass: \"[&_.preview]:h-[250px] [&_pre]:!h-[250px]\"\n---\n::\n\n### Kbd\n\nKbd is a component that renders a keyboard key.\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { Kbd, KbdGroup } from '@/components/ui/kbd'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CKbd>Ctrl\u003C/Kbd>\n\u003C/template>\n```\n\nUse `KbdGroup` to group keyboard keys together.\n\n```vue showLineNumbers\n\u003Ctemplate>\n  \u003CKbdGroup>\n    \u003CKbd>Ctrl\u003C/Kbd>\n    \u003CKbd>B\u003C/Kbd>\n  \u003C/KbdGroup>\n\u003C/template>\n```\n\n::component-preview\n---\nname: KbdDemo\nclass: \"[&_.preview]:h-[250px] [&_pre]:!h-[250px]\"\n---\n::\n\nYou can add it to buttons, tooltips, input groups, and more.\n\n### Button Group\n\nI got a lot of requests for this one: Button Group. It's a container that groups related buttons together with consistent styling. Great for action groups, split buttons, and more.\n\n::component-preview\n---\nname: ButtonGroupDemo\nclass: \"[&_.preview]:h-[250px] [&_pre]:!h-[250px]\"\n---\n::\n\nHere's the code:\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { ButtonGroup } from '@/components/ui/button-group'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CButtonGroup>\n    \u003CButton>Button 1\u003C/Button>\n    \u003CButton>Button 2\u003C/Button>\n  \u003C/ButtonGroup>\n\u003C/template>\n```\n\nYou can nest button groups to create more complex layouts with spacing.\n\n```vue showLineNumbers\n\u003Ctemplate>\n  \u003CButtonGroup>\n    \u003CButtonGroup>\n      \u003CButton>Button 1\u003C/Button>\n      \u003CButton>Button 2\u003C/Button>\n    \u003C/ButtonGroup>\n    \u003CButtonGroup>\n      \u003CButton>Button 3\u003C/Button>\n      \u003CButton>Button 4\u003C/Button>\n    \u003C/ButtonGroup>\n  \u003C/ButtonGroup>\n\u003C/template>\n```\n\nUse `ButtonGroupSeparator` to create split buttons. Classic dropdown pattern.\n\n::component-preview\n---\nname: ButtonGroupWithDropdownMenuDemo\nclass: \"[&_.preview]:h-[250px] [&_pre]:!h-[250px]\"\n---\n::\n\nYou can also use it to add prefix or suffix buttons and text to inputs.\n\n::component-preview\n---\nname: ButtonGroupWithSelectDemo\nclass: \"[&_.preview]:h-[250px] [&_pre]:!h-[250px]\"\n---\n::\n\n```vue showLineNumbers\n\u003Ctemplate>\n  \u003CButtonGroup>\n    \u003CButtonGroupText>Prefix\u003C/ButtonGroupText>\n    \u003CInput placeholder=\"Type something here...\" />\n    \u003CButton>Button\u003C/Button>\n  \u003C/ButtonGroup>\n\u003C/template>\n```\n\n### Input Group\n\nInput Group lets you add icons, buttons, and more to your inputs. You know, all those little bits you always need around your inputs.\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { InputGroup, InputGroupAddon, InputGroupInput } from '@/components/ui/input-group'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputGroup>\n    \u003CInputGroupInput placeholder=\"Search...\" />\n    \u003CInputGroupAddon>\n      \u003CSearchIcon />\n    \u003C/InputGroupAddon>\n  \u003C/InputGroup>\n\u003C/template>\n```\n\nHere's a preview with icons:\n\n::component-preview\n---\nname: InputGroupWithIcon\nclass: \"[&_.preview]:h-[300px] [&_pre]:!h-[300px]\"\n---\n::\n\nYou can also add buttons to the input group.\n\n::component-preview\n---\nname: InputGroupWithButton\nclass: \"[&_.preview]:h-[300px] [&_pre]:!h-[300px]\"\n---\n::\n\nOr text, labels, tooltips,...\n\n::component-preview\n---\nname: InputGroupWithText\nclass: \"[&_.preview]:h-[350px] [&_pre]:!h-[350px]\"\n---\n::\n\nIt also works with textareas so you can build really complex components with lots of knobs and dials or yet another prompt form.\n\n::component-preview\n---\nname: InputGroupWithTextarea\nclass: \"[&_.preview]:h-[450px] [&_pre]:!h-[450px]\"\n---\n::\n\nOh here are some cool ones with spinners:\n\n::component-preview\n---\nname: InputGroupWithSpinner\nclass: \"[&_.preview]:h-[350px] [&_pre]:!h-[350px]\"\n---\n::\n\n### Field\n\nIntroducing **Field**, a component for building really complex forms. The abstraction here is beautiful.\n\nIt took me a long time to get it right but I made it work with all your form libraries: Vee Validate, TanStack Form, Bring Your Own Form.\n\nHere's a basic field with an input:\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from '@/components/ui/field'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CField>\n    \u003CFieldLabel html-for=\"username\">\n      Username\n    \u003C/FieldLabel>\n    \u003CInput id=\"username\" placeholder=\"Max Leiter\" />\n    \u003CFieldDescription>\n      Choose a unique username for your account.\n    \u003C/FieldDescription>\n  \u003C/Field>\n\u003C/template>\n```\n\n::component-preview\n---\nname: FieldInputDemo\nclass: \"[&_.preview]:h-[350px] [&_pre]:!h-[350px]\"\n---\n::\n\nIt works with all form controls. Inputs, textareas, selects, checkboxes, radios, switches, sliders, you name it. Here's a full example:\n\n::component-preview\n---\nname: FieldDemo\nclass: \"[&_.preview]:h-[850px] [&_pre]:!h-[850px]\"\n---\n::\n\nHere are some checkbox fields:\n\n::component-preview\n---\nname: FieldCheckboxDemo\nclass: \"[&_.preview]:h-[500px] [&_pre]:!h-[500px]\"\n---\n::\n\nYou can group fields together using `FieldGroup` and `FieldSet`. Perfect for\nmulti-section forms.\n\n```vue showLineNumbers\n\u003Ctemplate>\n  \u003CFieldSet>\n    \u003CFieldLegend />\n    \u003CFieldGroup>\n      \u003CField />\n      \u003CField />\n    \u003C/FieldGroup>\n  \u003C/FieldSet>\n\u003C/template>\n```\n\n::component-preview\n---\nname: FieldFieldsetDemo\nclass: \"[&_.preview]:h-[500px] [&_pre]:!h-[500px]\"\n---\n::\n\nMaking it responsive is easy. Use `orientation=\"responsive\"` and it switches\nbetween vertical and horizontal layouts based on container width. Done.\n\n::component-preview\n---\nname: FieldResponsiveDemo\nclass: \"[&_.preview]:h-[600px] [&_pre]:!h-[600px]\"\n---\n::\n\nWait here's more. Wrap your fields in `FieldLabel` to create a selectable field group. Really easy. And it looks great.\n\n::component-preview\n---\nname: FieldChoiceCardDemo\nclass: \"[&_.preview]:h-[600px] [&_pre]:!h-[600px]\"\n---\n::\n\n### Item\n\nThis one is a straightforward flex container that can house nearly any type of content.\n\nI've built this so many times that I decided to create a component for it. Now I use it all the time. I use it to display lists of items, cards, and more.\n\nHere's a basic item:\n\n```vue showLineNumbers\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>\n    \u003CItemMedia variant=\"icon\">\n      \u003CHomeIcon />\n    \u003C/ItemMedia>\n    \u003CItemContent>\n      \u003CItemTitle>Dashboard\u003C/ItemTitle>\n      \u003CItemDescription>Overview of your account and activity.\u003C/ItemDescription>\n    \u003C/ItemContent>\n  \u003C/Item>\n\u003C/template>\n```\n\n::component-preview\n---\nname: ItemDemo\nclass: \"[&_.preview]:h-[300px] [&_.preview]:p-4 [&_pre]:!h-[300px]\"\n---\n::\n\nYou can add icons, avatars, or images to the item.\n\n::component-preview\n---\nname: ItemIconDemo\nclass: \"[&_.preview]:h-[300px] [&_.preview]:p-4 [&_pre]:!h-[300px]\"\n---\n::\n\n::component-preview\n---\nname: ItemAvatarDemo\nclass: \"[&_.preview]:h-[300px] [&_.preview]:p-4 [&_pre]:!h-[300px]\"\n---\n::\n\nAnd here's what a list of items looks like with `ItemGroup`:\n\n::component-preview\n---\nname: ItemGroupDemo\nclass: \"[&_.preview]:h-[500px] [&_.preview]:p-4 [&_pre]:!h-[500px]\"\n---\n::\n\nNeed it as a link? Use the `asChild` prop:\n\n```vue showLineNumbers\n\u003Ctemplate>\n  \u003CItem as-child>\n    \u003Ca href=\"/dashboard\">\n      \u003CItemMedia variant=\"icon\">\n        \u003CHomeIcon />\n      \u003C/ItemMedia>\n      \u003CItemContent>\n        \u003CItemTitle>Dashboard\u003C/ItemTitle>\n        \u003CItemDescription>Overview of your account and activity.\u003C/ItemDescription>\n      \u003C/ItemContent>\n    \u003C/a>\n  \u003C/Item>\n\u003C/template>\n```\n\n::component-preview\n---\nname: ItemLinkDemo\nclass: \"[&_.preview]:h-[400px] [&_.preview]:p-4 [&_pre]:!h-[400px]\"\n---\n::\n\n### Empty\n\nOkay last one: **Empty**. Use this to display empty states in your app.\n\nHere's how you use it:\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyMedia,\n  EmptyTitle,\n} from '@/components/ui/empty'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CEmpty>\n    \u003CEmptyMedia variant=\"icon\">\n      \u003CInboxIcon />\n    \u003C/EmptyMedia>\n    \u003CEmptyTitle>No messages\u003C/EmptyTitle>\n    \u003CEmptyDescription>You don't have any messages yet.\u003C/EmptyDescription>\n    \u003CEmptyContent>\n      \u003CButton>Send a message\u003C/Button>\n    \u003C/EmptyContent>\n  \u003C/Empty>\n\u003C/template>\n```\n\n::component-preview\n---\nname: EmptyDemo\nclass: \"[&_.preview]:h-[400px] [&_.preview]:p-4 [&_pre]:!h-[400px]\"\n---\n::\n\nYou can use it with avatars:\n\n::component-preview\n---\nname: EmptyAvatarDemo\nclass: \"[&_.preview]:h-[400px] [&_pre]:!h-[400px]\"\n---\n::\n\nOr with input groups for things like search results or email subscriptions:\n\n::component-preview\n---\nname: EmptyInputGroupDemo\nclass: \"[&_.preview]:h-[450px] [&_pre]:!h-[450px]\"\n---\n::\n\nThat's it. Seven new components. Works with all your libraries. Ready for your projects.\n\n---\n\n## February 2025 - Reka UI & npx shadcn-vue@latest init\n\nWe've updated the latest registry to support Reka UI instead of Radix Vue.\n\nThe updated CLI is now available. You can now install components, themes, composables, utils and more using `npx shadcn-vue add`.\n\nThis is a major step towards distributing code that you and your LLMs can access and use.\n\n::callout\nWith the released of [Reka UI v2](https://reka-ui.com/), `shadcn-vue@latest` command will now install Reka UI. If you want to keep using [Radix Vue](https://radix-vue.com/), please visit [here](https://radix.shadcn-vue.com/) and run `shadcn-vue@radix` command instead.\n::\n\n1. First up, when you init into a new app, we update your existing Tailwind files instead of overriding.\n2. A component now ship its own dependencies. Take the accordion for example, it can define its Tailwind keyframes. When you add it to your project, we’ll update your tailwind.config.ts file accordingly.\n3. You can also install remote components using url. `npx shadcn-vue add https://acme.com/registry/navbar.json`.\n\u003C!-- 4. We have also improve the init command. It does framework detection and can even init a brand new Next.js app in one command. `npx shadcn init`. -->\n4. We have created a new schema that you can use to ship your own component registry. And since it has support for urls, you can even use it to distribute private components.\n5. And a few more updates like better error handling and monorepo support.\n\nYou can try the new cli today.\n\n```bash\nnpx shadcn-vue@latest init Sidebar01 Login01\n```\n",{"title":83,"description":992},"rPdrE0UPH5Ukkze21yw-Fq1ve1S6VCHG9LmQQfvazr4",[1000,1001],{"title":79,"path":80,"stem":81,"children":-1},{"title":87,"path":88,"stem":89,"children":-1},1775649977110]