[{"data":1,"prerenderedAt":1521},["ShallowReactive",2],{"navigation":3,"$f2vxmxe0ttlw1b":470,"\u002Fdocs\u002Fchangelog":481,"surround-\u002Fdocs\u002Fchangelog":1518},[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":450,"body":483,"description":1511,"extension":1512,"links":1513,"meta":1514,"navigation":204,"new":18,"path":451,"rawbody":1515,"seo":1516,"stem":452,"__hash__":1517},"content\u002Fdocs\u002F10.changelog.md",{"type":484,"value":485,"toc":1478},"minimark",[486,491,495,524,528,531,543,558,568,571,583,586,591,599,610,618,625,628,643,661,669,692,695,701,712,715,718,731,750,758,768,773,776,780,787,790,796,803,814,818,832,864,867,870,878,881,884,888,891,894,897,900,903,907,910,913,917,921,941,945,949,960,963,966,972,976,979,1023,1026,1034,1037,1043,1046,1052,1055,1059,1062,1066,1069,1072,1078,1085,1092,1096,1099,1102,1105,1109,1112,1118,1121,1127,1133,1137,1140,1144,1150,1153,1156,1162,1165,1171,1174,1178,1181,1187,1190,1196,1199,1205,1208,1214,1217,1220,1226,1230,1233,1239,1242,1248,1258,1264,1268,1275,1281,1288,1293,1296,1299,1302,1305,1311,1316,1319,1323,1327,1334,1338,1345,1351,1355,1358,1364,1367,1373,1377,1380,1384,1387,1391,1394,1397,1401,1404,1410,1413,1445,1460,1469,1472],[487,488,490],"h2",{"id":489},"august-2026-typeset-questionnaire-upgrades","August 2026 - Typeset, Questionnaire & Upgrades",[492,493,494],"p",{},"A new styling system, a new component, and two upgrades under the hood.",[496,497,498,506,512,518],"ul",{},[499,500,501,505],"li",{},[502,503,462],"a",{"href":504},"#typeset",": One CSS file that styles your rendered markdown.",[499,507,508,511],{},[502,509,201],{"href":510},"#questionnaire",": Multi-step questions, one at a time.",[499,513,514,517],{},[502,515,109],{"href":516},"#drawer",": Now built on Reka UI.",[499,519,520,523],{},[502,521,97],{"href":522},"#data-table",": Now on TanStack Table v9.",[525,526,462],"h3",{"id":527},"typeset",[492,529,530],{},"You render markdown and get back plain unstyled HTML. So you style it: headings, paragraphs, lists, tables. Then you do it again for the docs. Then again for the chat app.",[492,532,533,534,538,539,542],{},"We ported ",[535,536,537],"strong",{},"shadcn\u002Ftypeset"," to fix that. It's one CSS file that styles everything inside a ",[540,541,527],"code",{}," container, and it lives in your project, so you can change it whenever you need to.",[492,544,545,546,549,550,553,554,557],{},"We read a lot about type — scale ratios, tracking, optical sizing, measure, leading — tried exposing all of it, and it was too much. So we condensed it into three controls: ",[535,547,548],{},"size",", ",[535,551,552],{},"leading",", and ",[535,555,556],{},"flow",". Heading sizes, list indents, the gap under a heading, the space around a rule: everything derives from those three. We call it rhythm.",[559,560,566],"pre",{"className":561,"code":563,"language":564,"meta":565},[562],"language-css",".typeset-docs {\n  --typeset-font-body: var(--font-geist-sans);\n  --typeset-font-heading: var(--font-geist-sans);\n  --typeset-font-mono: var(--font-geist-mono);\n  --typeset-size: 15px;\n  --typeset-leading: 1.75;\n  --typeset-flow: 1.25em;\n}\n","css","",[540,567,563],{"__ignoreMap":565},[492,569,570],{},"It fits its container, so the same content scales down in a chat bubble and up in an article. It uses your theme tokens for colors, fonts, and radius. And it's built for streaming: when a new block arrives, earlier blocks don't shift their margins or borders.",[492,572,573,574,578,579,582],{},"Head to the ",[502,575,577],{"href":576},"\u002Ftypeset","typeset builder"," to pick your fonts and rhythm, preview them on real content, and copy out the CSS. Full details in the ",[502,580,581],{"href":463},"Typeset docs",".",[525,584,201],{"id":585},"questionnaire",[492,587,588,590],{},[535,589,201],{}," is a new component for asking a series of questions, one at a time: single-choice, multiple-choice, freeform, and skippable.",[592,593],"component-preview",{"name":594,"className":595,"previewClass":597,"align":598},"QuestionnaireDemo",[596],"style-nova","min-h-[560px] p-4 sm:p-8","end",[492,600,601,602,605,606,609],{},"It handles navigation, answer registration, validation, and progress for you. Every part accepts ",[540,603,604],{},"as"," and ",[540,607,608],{},"as-child",", so you can compose it into a card or a dialog and let the dialog keep its accessible name from the question title.",[559,611,616],{"className":612,"code":614,"language":615,"meta":565},[613],"language-bash","npx shadcn-vue@latest add questionnaire\n","bash",[540,617,614],{"__ignoreMap":565},[492,619,620,621,624],{},"See the ",[502,622,623],{"href":202},"Questionnaire docs"," for keyboard shortcuts, conditional questions, controlled answers, and resuming a session.",[525,626,109],{"id":627},"drawer",[492,629,630,633,634,636,637,639,640,582],{},[535,631,632],{},"This is a breaking change."," ",[502,635,109],{"href":110}," now uses Reka UI's first-class ",[540,638,109],{}," primitive instead of ",[540,641,642],{},"vaul-vue",[492,644,645,646,648,649,652,653,656,657,660],{},"You can drop the ",[540,647,642],{}," dependency. The ",[540,650,651],{},"direction"," prop becomes ",[540,654,655],{},"swipe-direction"," — the direction the drawer dismisses toward, not the side it sits on — and ",[540,658,659],{},"should-scale-background"," is gone.",[559,662,667],{"className":663,"code":665,"language":666,"meta":565},[664],"language-vue","\u003C!-- Before -->\n\u003CDrawer direction=\"bottom\">\n\n\u003C!-- After -->\n\u003CDrawer swipe-direction=\"down\">\n","vue",[540,668,665],{"__ignoreMap":565},[492,670,671,672,549,675,549,678,553,681,684,685,687,688,691],{},"The values are ",[540,673,674],{},"up",[540,676,677],{},"right",[540,679,680],{},"down",[540,682,683],{},"left",", with ",[540,686,680],{}," as the default — so a plain ",[540,689,690],{},"\u003CDrawer>"," is still the bottom drawer.",[492,693,694],{},"Re-run the CLI to pick up the new component:",[559,696,699],{"className":697,"code":698,"language":615,"meta":565},[613],"npx shadcn-vue@latest add drawer\n",[540,700,698],{"__ignoreMap":565},[492,702,703,704,605,708,582],{},"We also added demos for ",[502,705,707],{"href":706},"\u002Fdocs\u002Fcomponents\u002Fdrawer#sides","sides",[502,709,711],{"href":710},"\u002Fdocs\u002Fcomponents\u002Fdrawer#scrollable-content","scrollable content",[592,713],{"name":714},"DrawerSides",[525,716,97],{"id":717},"data-table",[492,719,720,721,723,724,727,728,582],{},"The ",[502,722,97],{"href":98}," guide, the tasks and dashboard examples, and the ",[540,725,726],{},"dashboard-01"," block now use ",[535,729,730],{},"TanStack Table v9",[492,732,733,734,737,738,741,742,745,746,749],{},"v9 is feature-based: you opt into sorting, filtering, pagination, and the rest with ",[540,735,736],{},"tableFeatures()",", and anything you don't register is tree-shaken out of your bundle. ",[540,739,740],{},"useVueTable"," becomes ",[540,743,744],{},"useTable",", row models move onto the features object, and the ",[540,747,748],{},"valueUpdater"," helper is gone — v9 manages that state internally.",[559,751,756],{"className":752,"code":754,"language":755,"meta":565},[753],"language-ts","export const features = tableFeatures({\n  columnFilteringFeature,\n  rowPaginationFeature,\n  rowSortingFeature,\n  filteredRowModel: createFilteredRowModel(),\n  paginatedRowModel: createPaginatedRowModel(),\n  sortedRowModel: createSortedRowModel(),\n  filterFns: { includesString: filterFn_includesString },\n  sortFns: { alphanumeric: sortFn_alphanumeric, text: sortFn_text },\n})\n","ts",[540,757,754],{"__ignoreMap":565},[492,759,760,761,605,764,767],{},"One thing to watch: the built-in filter and sort functions have to be registered under ",[540,762,763],{},"filterFns",[540,765,766],{},"sortFns",". If you reference one by string without registering it, it silently does nothing.",[592,769],{"name":770,"previewClass":771,"align":772},"DataTableDemo","items-start h-auto px-4 md:px-8","start",[492,774,775],{},"The guide has been rewritten end to end for v9.",[487,777,779],{"id":778},"july-2026-rhea-components-for-chat-interfaces","July 2026 - Rhea & Components for Chat Interfaces",[492,781,782,783,786],{},"Two big additions this month: a new style, ",[535,784,785],{},"Rhea",", and a set of components for building chat interfaces.",[525,788,785],{"id":789},"rhea",[492,791,792,793,795],{},"Say hello to ",[535,794,785],{},", a new style for shadcn-vue.",[492,797,798,799,802],{},"Rhea is the latest shadcn\u002Fui look, mirroring the upstream ",[540,800,801],{},"base-rhea"," style as closely as possible. It keeps the rounded, soft aesthetic you already know but refines the details: denser surfaces, ring-based focus states, and subtle press interactions on buttons. Built for focused product interfaces.",[492,804,805,806,810,811,813],{},"Rhea is opt-in. The default style stays the same, so nothing changes for your existing projects. Head to the ",[502,807,809],{"href":808},"\u002F","customizer"," and pick ",[535,812,785],{}," from the style switcher to preview it, then copy the theme into your app.",[525,815,817],{"id":816},"chat-interface-components","Chat interface components",[492,819,820,821,549,823,549,825,549,827,553,829,831],{},"We're also releasing a new set of components for building chat interfaces: ",[535,822,169],{},[535,824,165],{},[535,826,49],{},[535,828,33],{},[535,830,157],{},". Plus two new CSS utilities to round them out.",[496,833,834,840,846,852,858],{},[499,835,836,839],{},[502,837,169],{"href":838},"#message-scroller",": The scroll container for a conversation.",[499,841,842,845],{},[502,843,165],{"href":844},"#message",": Lay out a row in the conversation.",[499,847,848,851],{},[502,849,49],{"href":850},"#bubble",": Render the message surface.",[499,853,854,857],{},[502,855,33],{"href":856},"#attachment",": Render files and images.",[499,859,860,863],{},[502,861,157],{"href":862},"#marker",": Render status updates and separators.",[525,865,169],{"id":866},"message-scroller",[492,868,869],{},"The scroll container for a conversation. It handles the parts that are easy to get wrong: anchored turns, streamed replies, saved thread restore, prepended history, jump-to-message, scroll controls, and visibility tracking.",[592,871],{"name":872,"className":873,"previewClass":877},"MessageScrollerStreamingDemo",[874,875,876],"style-luma","rounded-[34px]","sm:rounded-4xl","h-auto theme-green bg-surface dark:bg-background p-4 min-[480px]:p-8 min-[560px]:p-10 sm:px-10 sm:py-16",[525,879,165],{"id":880},"message",[492,882,883],{},"Message lays out a row in the conversation with avatar, alignment, header, content, footer, and grouped messages.",[592,885],{"name":886,"previewClass":887},"MessageDemo","h-auto theme-blue",[525,889,49],{"id":890},"bubble",[492,892,893],{},"Bubble renders the message surface, with variants, alignment, reactions, links, buttons, and collapsible content.",[592,895],{"name":896,"previewClass":887},"BubbleVariantsDemo",[525,898,33],{"id":899},"attachment",[492,901,902],{},"Attachment renders files and images with media, metadata, upload state, actions, and a full-card trigger.",[592,904],{"name":905,"previewClass":906},"AttachmentDemo","h-auto theme-blue bg-surface dark:bg-background",[525,908,157],{"id":909},"marker",[492,911,912],{},"Marker renders status updates, system notes, bordered rows, and labeled separators.",[592,914],{"name":915,"className":916,"previewClass":887},"MarkerDemo",[874],[525,918,920],{"id":919},"scroll-fade-and-shimmer","scroll-fade and shimmer",[492,922,923,924,928,929,933,934,937,938,582],{},"Two CSS utilities to finish off the set. ",[502,925,926],{"href":399},[540,927,398],{}," dissolves content at the edges of a scroll container, and ",[502,930,931],{"href":403},[540,932,402],{}," adds a shimmer effect to text, perfect for streaming and loading states. Both ship with the ",[540,935,936],{},"shadcn-vue"," package, so there's nothing to install after ",[540,939,940],{},"init",[592,942],{"name":943,"previewClass":944},"ScrollFadeDemo","h-auto",[487,946,948],{"id":947},"november-2025-catch-up","November 2025 - Catch up",[492,950,951,952,955,956,959],{},"We've upgraded ",[502,953,954],{"href":808},"shadcn-vue.com"," to Nuxt v4 and Tailwind v4. The site now uses the upgraded ",[540,957,958],{},"new-york"," components.",[492,961,962],{},"We've also made some minor design updates to make the site faster and easier to navigate.",[525,964,73],{"id":965},"chart",[492,967,968,969,971],{},"We also refactored the ",[502,970,73],{"href":74}," component to match the original component, and stick to the API as close as possible.",[487,973,975],{"id":974},"october-2025-new-components","October 2025 - New Components",[492,977,978],{},"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.",[496,980,981,987,993,999,1005,1011,1017],{},[499,982,983,986],{},[502,984,250],{"href":985},"#spinner",": An indicator to show a loading state.",[499,988,989,992],{},[502,990,149],{"href":991},"#kbd",": Display a keyboard key or group of keys.",[499,994,995,998],{},[502,996,57],{"href":997},"#button-group",": A group of buttons for actions and split buttons.",[499,1000,1001,1004],{},[502,1002,137],{"href":1003},"#input-group",": Input with icons, buttons, labels and more.",[499,1006,1007,1010],{},[502,1008,121],{"href":1009},"#field",": One component. All your forms.",[499,1012,1013,1016],{},[502,1014,145],{"href":1015},"#item",": Display lists of items, cards, and more.",[499,1018,1019,1022],{},[502,1020,117],{"href":1021},"#empty",": Use this one for empty states.",[525,1024,250],{"id":1025},"spinner",[492,1027,1028,1029,605,1031,1033],{},"Okay let's start with the easiest ones: ",[535,1030,250],{},[535,1032,149],{},". Pretty basic. We all know what they do.",[492,1035,1036],{},"Here's how you render a spinner:",[559,1038,1041],{"className":1039,"code":1040,"language":666,"meta":565},[664],"\u003Cscript setup lang=\"ts\">\nimport { Spinner } from '@\u002Fcomponents\u002Fui\u002Fspinner'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CSpinner \u002F>\n\u003C\u002Ftemplate>\n",[540,1042,1040],{"__ignoreMap":565},[492,1044,1045],{},"Here's what it looks like:",[592,1047],{"name":1048,"className":1049},"SpinnerBasic",[1050,1051],"[&_.preview]:h-[250px]","[&_pre]:!h-[250px]",[492,1053,1054],{},"Here's what it looks like in a button:",[592,1056],{"name":1057,"className":1058},"SpinnerButtonDemo",[1050,1051],[492,1060,1061],{},"You can edit the code and replace it with your own spinner.",[592,1063],{"name":1064,"className":1065},"SpinnerCustomDemo",[1050,1051],[525,1067,149],{"id":1068},"kbd",[492,1070,1071],{},"Kbd is a component that renders a keyboard key.",[559,1073,1076],{"className":1074,"code":1075,"language":666,"meta":565},[664],"\u003Cscript setup lang=\"ts\">\nimport { Kbd, KbdGroup } from '@\u002Fcomponents\u002Fui\u002Fkbd'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CKbd>Ctrl\u003C\u002FKbd>\n\u003C\u002Ftemplate>\n",[540,1077,1075],{"__ignoreMap":565},[492,1079,1080,1081,1084],{},"Use ",[540,1082,1083],{},"KbdGroup"," to group keyboard keys together.",[559,1086,1090],{"className":1087,"code":1088,"language":666,"meta":1089},[664],"\u003Ctemplate>\n  \u003CKbdGroup>\n    \u003CKbd>Ctrl\u003C\u002FKbd>\n    \u003CKbd>B\u003C\u002FKbd>\n  \u003C\u002FKbdGroup>\n\u003C\u002Ftemplate>\n","showLineNumbers",[540,1091,1088],{"__ignoreMap":565},[592,1093],{"name":1094,"className":1095},"KbdDemo",[1050,1051],[492,1097,1098],{},"You can add it to buttons, tooltips, input groups, and more.",[525,1100,57],{"id":1101},"button-group",[492,1103,1104],{},"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.",[592,1106],{"name":1107,"className":1108},"ButtonGroupDemo",[1050,1051],[492,1110,1111],{},"Here's the code:",[559,1113,1116],{"className":1114,"code":1115,"language":666,"meta":1089},[664],"\u003Cscript setup lang=\"ts\">\nimport { ButtonGroup } from '@\u002Fcomponents\u002Fui\u002Fbutton-group'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CButtonGroup>\n    \u003CButton>Button 1\u003C\u002FButton>\n    \u003CButton>Button 2\u003C\u002FButton>\n  \u003C\u002FButtonGroup>\n\u003C\u002Ftemplate>\n",[540,1117,1115],{"__ignoreMap":565},[492,1119,1120],{},"You can nest button groups to create more complex layouts with spacing.",[559,1122,1125],{"className":1123,"code":1124,"language":666,"meta":1089},[664],"\u003Ctemplate>\n  \u003CButtonGroup>\n    \u003CButtonGroup>\n      \u003CButton>Button 1\u003C\u002FButton>\n      \u003CButton>Button 2\u003C\u002FButton>\n    \u003C\u002FButtonGroup>\n    \u003CButtonGroup>\n      \u003CButton>Button 3\u003C\u002FButton>\n      \u003CButton>Button 4\u003C\u002FButton>\n    \u003C\u002FButtonGroup>\n  \u003C\u002FButtonGroup>\n\u003C\u002Ftemplate>\n",[540,1126,1124],{"__ignoreMap":565},[492,1128,1080,1129,1132],{},[540,1130,1131],{},"ButtonGroupSeparator"," to create split buttons. Classic dropdown pattern.",[592,1134],{"name":1135,"className":1136},"ButtonGroupWithDropdownMenuDemo",[1050,1051],[492,1138,1139],{},"You can also use it to add prefix or suffix buttons and text to inputs.",[592,1141],{"name":1142,"className":1143},"ButtonGroupWithSelectDemo",[1050,1051],[559,1145,1148],{"className":1146,"code":1147,"language":666,"meta":1089},[664],"\u003Ctemplate>\n  \u003CButtonGroup>\n    \u003CButtonGroupText>Prefix\u003C\u002FButtonGroupText>\n    \u003CInput placeholder=\"Type something here...\" \u002F>\n    \u003CButton>Button\u003C\u002FButton>\n  \u003C\u002FButtonGroup>\n\u003C\u002Ftemplate>\n",[540,1149,1147],{"__ignoreMap":565},[525,1151,137],{"id":1152},"input-group",[492,1154,1155],{},"Input Group lets you add icons, buttons, and more to your inputs. You know, all those little bits you always need around your inputs.",[559,1157,1160],{"className":1158,"code":1159,"language":666,"meta":1089},[664],"\u003Cscript setup lang=\"ts\">\nimport { InputGroup, InputGroupAddon, InputGroupInput } from '@\u002Fcomponents\u002Fui\u002Finput-group'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CInputGroup>\n    \u003CInputGroupInput placeholder=\"Search...\" \u002F>\n    \u003CInputGroupAddon>\n      \u003CSearchIcon \u002F>\n    \u003C\u002FInputGroupAddon>\n  \u003C\u002FInputGroup>\n\u003C\u002Ftemplate>\n",[540,1161,1159],{"__ignoreMap":565},[492,1163,1164],{},"Here's a preview with icons:",[592,1166],{"name":1167,"className":1168},"InputGroupWithIcon",[1169,1170],"[&_.preview]:h-[300px]","[&_pre]:!h-[300px]",[492,1172,1173],{},"You can also add buttons to the input group.",[592,1175],{"name":1176,"className":1177},"InputGroupWithButton",[1169,1170],[492,1179,1180],{},"Or text, labels, tooltips,...",[592,1182],{"name":1183,"className":1184},"InputGroupWithText",[1185,1186],"[&_.preview]:h-[400px]","[&_pre]:!h-[400px]",[492,1188,1189],{},"It also works with textareas so you can build really complex components with lots of knobs and dials or yet another prompt form.",[592,1191],{"name":1192,"className":1193},"InputGroupWithTextarea",[1194,1195],"[&_.preview]:h-[450px]","[&_pre]:!h-[450px]",[492,1197,1198],{},"Oh here are some cool ones with spinners:",[592,1200],{"name":1201,"className":1202},"InputGroupWithSpinner",[1203,1204],"[&_.preview]:h-[350px]","[&_pre]:!h-[350px]",[525,1206,121],{"id":1207},"field",[492,1209,1210,1211,1213],{},"Introducing ",[535,1212,121],{},", a component for building really complex forms. The abstraction here is beautiful.",[492,1215,1216],{},"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.",[492,1218,1219],{},"Here's a basic field with an input:",[559,1221,1224],{"className":1222,"code":1223,"language":666,"meta":1089},[664],"\u003Cscript setup lang=\"ts\">\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from '@\u002Fcomponents\u002Fui\u002Ffield'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CField>\n    \u003CFieldLabel html-for=\"username\">\n      Username\n    \u003C\u002FFieldLabel>\n    \u003CInput id=\"username\" placeholder=\"Max Leiter\" \u002F>\n    \u003CFieldDescription>\n      Choose a unique username for your account.\n    \u003C\u002FFieldDescription>\n  \u003C\u002FField>\n\u003C\u002Ftemplate>\n",[540,1225,1223],{"__ignoreMap":565},[592,1227],{"name":1228,"className":1229},"FieldInputDemo",[1203,1204],[492,1231,1232],{},"It works with all form controls. Inputs, textareas, selects, checkboxes, radios, switches, sliders, you name it. Here's a full example:",[592,1234],{"name":1235,"className":1236},"FieldDemo",[1237,1238],"[&_.preview]:h-[850px]","[&_pre]:!h-[850px]",[492,1240,1241],{},"Here are some checkbox fields:",[592,1243],{"name":1244,"className":1245},"FieldCheckboxDemo",[1246,1247],"[&_.preview]:h-[500px]","[&_pre]:!h-[500px]",[492,1249,1250,1251,605,1254,1257],{},"You can group fields together using ",[540,1252,1253],{},"FieldGroup",[540,1255,1256],{},"FieldSet",". Perfect for\nmulti-section forms.",[559,1259,1262],{"className":1260,"code":1261,"language":666,"meta":1089},[664],"\u003Ctemplate>\n  \u003CFieldSet>\n    \u003CFieldLegend \u002F>\n    \u003CFieldGroup>\n      \u003CField \u002F>\n      \u003CField \u002F>\n    \u003C\u002FFieldGroup>\n  \u003C\u002FFieldSet>\n\u003C\u002Ftemplate>\n",[540,1263,1261],{"__ignoreMap":565},[592,1265],{"name":1266,"className":1267},"FieldFieldsetDemo",[1246,1247],[492,1269,1270,1271,1274],{},"Making it responsive is easy. Use ",[540,1272,1273],{},"orientation=\"responsive\""," and it switches\nbetween vertical and horizontal layouts based on container width. Done.",[592,1276],{"name":1277,"className":1278,"previewClass":1280},"FieldResponsiveDemo",[1279],"[&_pre]:!h-[600px]","h-[700px] sm:h-[600px]",[492,1282,1283,1284,1287],{},"Wait here's more. Wrap your fields in ",[540,1285,1286],{},"FieldLabel"," to create a selectable field group. Really easy. And it looks great.",[592,1289],{"name":1290,"className":1291},"FieldChoiceCardDemo",[1292,1279],"[&_.preview]:h-[600px]",[525,1294,145],{"id":1295},"item",[492,1297,1298],{},"This one is a straightforward flex container that can house nearly any type of content.",[492,1300,1301],{},"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.",[492,1303,1304],{},"Here's a basic item:",[559,1306,1309],{"className":1307,"code":1308,"language":666,"meta":1089},[664],"\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>\n    \u003CItemMedia variant=\"icon\">\n      \u003CHomeIcon \u002F>\n    \u003C\u002FItemMedia>\n    \u003CItemContent>\n      \u003CItemTitle>Dashboard\u003C\u002FItemTitle>\n      \u003CItemDescription>Overview of your account and activity.\u003C\u002FItemDescription>\n    \u003C\u002FItemContent>\n  \u003C\u002FItem>\n\u003C\u002Ftemplate>\n",[540,1310,1308],{"__ignoreMap":565},[592,1312],{"name":1313,"className":1314},"ItemDemo",[1169,1315,1170],"[&_.preview]:p-4",[492,1317,1318],{},"You can add icons, avatars, or images to the item.",[592,1320],{"name":1321,"className":1322},"ItemIconDemo",[1169,1315,1170],[592,1324],{"name":1325,"className":1326},"ItemAvatarDemo",[1169,1315,1170],[492,1328,1329,1330,1333],{},"And here's what a list of items looks like with ",[540,1331,1332],{},"ItemGroup",":",[592,1335],{"name":1336,"className":1337},"ItemGroupDemo",[1246,1315,1247],[492,1339,1340,1341,1344],{},"Need it as a link? Use the ",[540,1342,1343],{},"asChild"," prop:",[559,1346,1349],{"className":1347,"code":1348,"language":666,"meta":1089},[664],"\u003Ctemplate>\n  \u003CItem as-child>\n    \u003Ca href=\"\u002Fdashboard\">\n      \u003CItemMedia variant=\"icon\">\n        \u003CHomeIcon \u002F>\n      \u003C\u002FItemMedia>\n      \u003CItemContent>\n        \u003CItemTitle>Dashboard\u003C\u002FItemTitle>\n        \u003CItemDescription>Overview of your account and activity.\u003C\u002FItemDescription>\n      \u003C\u002FItemContent>\n    \u003C\u002Fa>\n  \u003C\u002FItem>\n\u003C\u002Ftemplate>\n",[540,1350,1348],{"__ignoreMap":565},[592,1352],{"name":1353,"className":1354},"ItemLinkDemo",[1185,1315,1186],[525,1356,117],{"id":1357},"empty",[492,1359,1360,1361,1363],{},"Okay last one: ",[535,1362,117],{},". Use this to display empty states in your app.",[492,1365,1366],{},"Here's how you use it:",[559,1368,1371],{"className":1369,"code":1370,"language":666,"meta":1089},[664],"\u003Cscript setup lang=\"ts\">\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyMedia,\n  EmptyTitle,\n} from '@\u002Fcomponents\u002Fui\u002Fempty'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CEmpty>\n    \u003CEmptyMedia variant=\"icon\">\n      \u003CInboxIcon \u002F>\n    \u003C\u002FEmptyMedia>\n    \u003CEmptyTitle>No messages\u003C\u002FEmptyTitle>\n    \u003CEmptyDescription>You don't have any messages yet.\u003C\u002FEmptyDescription>\n    \u003CEmptyContent>\n      \u003CButton>Send a message\u003C\u002FButton>\n    \u003C\u002FEmptyContent>\n  \u003C\u002FEmpty>\n\u003C\u002Ftemplate>\n",[540,1372,1370],{"__ignoreMap":565},[592,1374],{"name":1375,"className":1376},"EmptyDemo",[1185,1315,1186],[492,1378,1379],{},"You can use it with avatars:",[592,1381],{"name":1382,"className":1383},"EmptyAvatarDemo",[1185,1186],[492,1385,1386],{},"Or with input groups for things like search results or email subscriptions:",[592,1388],{"name":1389,"className":1390},"EmptyInputGroupDemo",[1194,1195],[492,1392,1393],{},"That's it. Seven new components. Works with all your libraries. Ready for your projects.",[1395,1396],"hr",{},[487,1398,1400],{"id":1399},"february-2025-reka-ui-npx-shadcn-vuelatest-init","February 2025 - Reka UI & npx shadcn-vue@latest init",[492,1402,1403],{},"We've updated the latest registry to support Reka UI instead of Radix Vue.",[492,1405,1406,1407,582],{},"The updated CLI is now available. You can now install components, themes, composables, utils and more using ",[540,1408,1409],{},"npx shadcn-vue add",[492,1411,1412],{},"This is a major step towards distributing code that you and your LLMs can access and use.",[1414,1415,1416],"callout",{},[492,1417,1418,1419,549,1425,1428,1429,1434,1435,1440,1441,1444],{},"With the released of ",[502,1420,1424],{"href":1421,"rel":1422},"https:\u002F\u002Freka-ui.com\u002F",[1423],"nofollow","Reka UI v2",[540,1426,1427],{},"shadcn-vue@latest"," command will now install Reka UI. If you want to keep using ",[502,1430,1433],{"href":1431,"rel":1432},"https:\u002F\u002Fradix-vue.com\u002F",[1423],"Radix Vue",", please visit ",[502,1436,1439],{"href":1437,"rel":1438},"https:\u002F\u002Fradix.shadcn-vue.com\u002F",[1423],"here"," and run ",[540,1442,1443],{},"shadcn-vue@radix"," command instead.",[1446,1447,1448,1451,1454],"ol",{},[499,1449,1450],{},"First up, when you init into a new app, we update your existing Tailwind files instead of overriding.",[499,1452,1453],{},"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.",[499,1455,1456,1457,582],{},"You can also install remote components using url. ",[540,1458,1459],{},"npx shadcn-vue add https:\u002F\u002Facme.com\u002Fregistry\u002Fnavbar.json",[1446,1461,1463,1466],{"start":1462},4,[499,1464,1465],{},"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.",[499,1467,1468],{},"And a few more updates like better error handling and monorepo support.",[492,1470,1471],{},"You can try the new cli today.",[559,1473,1476],{"className":1474,"code":1475,"language":615,"meta":565},[613],"npx shadcn-vue@latest init Sidebar01 Login01\n",[540,1477,1475],{"__ignoreMap":565},{"title":565,"searchDepth":1479,"depth":1479,"links":1480},2,[1481,1488,1498,1501,1510],{"id":489,"depth":1479,"text":490,"children":1482},[1483,1485,1486,1487],{"id":527,"depth":1484,"text":462},3,{"id":585,"depth":1484,"text":201},{"id":627,"depth":1484,"text":109},{"id":717,"depth":1484,"text":97},{"id":778,"depth":1479,"text":779,"children":1489},[1490,1491,1492,1493,1494,1495,1496,1497],{"id":789,"depth":1484,"text":785},{"id":816,"depth":1484,"text":817},{"id":866,"depth":1484,"text":169},{"id":880,"depth":1484,"text":165},{"id":890,"depth":1484,"text":49},{"id":899,"depth":1484,"text":33},{"id":909,"depth":1484,"text":157},{"id":919,"depth":1484,"text":920},{"id":947,"depth":1479,"text":948,"children":1499},[1500],{"id":965,"depth":1484,"text":73},{"id":974,"depth":1479,"text":975,"children":1502},[1503,1504,1505,1506,1507,1508,1509],{"id":1025,"depth":1484,"text":250},{"id":1068,"depth":1484,"text":149},{"id":1101,"depth":1484,"text":57},{"id":1152,"depth":1484,"text":137},{"id":1207,"depth":1484,"text":121},{"id":1295,"depth":1484,"text":145},{"id":1357,"depth":1484,"text":117},{"id":1399,"depth":1479,"text":1400},"Latest updates and announcements.","md",null,{},"---\ntitle: Changelog\ndescription: Latest updates and announcements.\n---\n\n## August 2026 - Typeset, Questionnaire & Upgrades\n\nA new styling system, a new component, and two upgrades under the hood.\n\n- [Typeset](#typeset): One CSS file that styles your rendered markdown.\n- [Questionnaire](#questionnaire): Multi-step questions, one at a time.\n- [Drawer](#drawer): Now built on Reka UI.\n- [Data Table](#data-table): Now on TanStack Table v9.\n\n### Typeset\n\nYou render markdown and get back plain unstyled HTML. So you style it: headings, paragraphs, lists, tables. Then you do it again for the docs. Then again for the chat app.\n\nWe ported **shadcn\u002Ftypeset** to fix that. It's one CSS file that styles everything inside a `typeset` container, and it lives in your project, so you can change it whenever you need to.\n\nWe read a lot about type — scale ratios, tracking, optical sizing, measure, leading — tried exposing all of it, and it was too much. So we condensed it into three controls: **size**, **leading**, and **flow**. Heading sizes, list indents, the gap under a heading, the space around a rule: everything derives from those three. We call it rhythm.\n\n```css\n.typeset-docs {\n  --typeset-font-body: var(--font-geist-sans);\n  --typeset-font-heading: var(--font-geist-sans);\n  --typeset-font-mono: var(--font-geist-mono);\n  --typeset-size: 15px;\n  --typeset-leading: 1.75;\n  --typeset-flow: 1.25em;\n}\n```\n\nIt fits its container, so the same content scales down in a chat bubble and up in an article. It uses your theme tokens for colors, fonts, and radius. And it's built for streaming: when a new block arrives, earlier blocks don't shift their margins or borders.\n\nHead to the [typeset builder](\u002Ftypeset) to pick your fonts and rhythm, preview them on real content, and copy out the CSS. Full details in the [Typeset docs](\u002Fdocs\u002Ftypeset).\n\n### Questionnaire\n\n**Questionnaire** is a new component for asking a series of questions, one at a time: single-choice, multiple-choice, freeform, and skippable.\n\n::component-preview\n---\nname: QuestionnaireDemo\nclass: style-nova\nalign: end\npreviewClass: min-h-[560px] p-4 sm:p-8\n---\n::\n\nIt handles navigation, answer registration, validation, and progress for you. Every part accepts `as` and `as-child`, so you can compose it into a card or a dialog and let the dialog keep its accessible name from the question title.\n\n```bash\nnpx shadcn-vue@latest add questionnaire\n```\n\nSee the [Questionnaire docs](\u002Fdocs\u002Fcomponents\u002Fquestionnaire) for keyboard shortcuts, conditional questions, controlled answers, and resuming a session.\n\n### Drawer\n\n**This is a breaking change.** [Drawer](\u002Fdocs\u002Fcomponents\u002Fdrawer) now uses Reka UI's first-class `Drawer` primitive instead of `vaul-vue`.\n\nYou can drop the `vaul-vue` dependency. The `direction` prop becomes `swipe-direction` — the direction the drawer dismisses toward, not the side it sits on — and `should-scale-background` is gone.\n\n```vue\n\u003C!-- Before -->\n\u003CDrawer direction=\"bottom\">\n\n\u003C!-- After -->\n\u003CDrawer swipe-direction=\"down\">\n```\n\nThe values are `up`, `right`, `down`, and `left`, with `down` as the default — so a plain `\u003CDrawer>` is still the bottom drawer.\n\nRe-run the CLI to pick up the new component:\n\n```bash\nnpx shadcn-vue@latest add drawer\n```\n\nWe also added demos for [sides](\u002Fdocs\u002Fcomponents\u002Fdrawer#sides) and [scrollable content](\u002Fdocs\u002Fcomponents\u002Fdrawer#scrollable-content).\n\n::component-preview\n---\nname: DrawerSides\n---\n::\n\n### Data Table\n\nThe [Data Table](\u002Fdocs\u002Fcomponents\u002Fdata-table) guide, the tasks and dashboard examples, and the `dashboard-01` block now use **TanStack Table v9**.\n\nv9 is feature-based: you opt into sorting, filtering, pagination, and the rest with `tableFeatures()`, and anything you don't register is tree-shaken out of your bundle. `useVueTable` becomes `useTable`, row models move onto the features object, and the `valueUpdater` helper is gone — v9 manages that state internally.\n\n```ts\nexport const features = tableFeatures({\n  columnFilteringFeature,\n  rowPaginationFeature,\n  rowSortingFeature,\n  filteredRowModel: createFilteredRowModel(),\n  paginatedRowModel: createPaginatedRowModel(),\n  sortedRowModel: createSortedRowModel(),\n  filterFns: { includesString: filterFn_includesString },\n  sortFns: { alphanumeric: sortFn_alphanumeric, text: sortFn_text },\n})\n```\n\nOne thing to watch: the built-in filter and sort functions have to be registered under `filterFns` and `sortFns`. If you reference one by string without registering it, it silently does nothing.\n\n::component-preview\n---\nname: DataTableDemo\nalign: start\npreviewClass: items-start h-auto px-4 md:px-8\n---\n::\n\nThe guide has been rewritten end to end for v9.\n\n## July 2026 - Rhea & Components for Chat Interfaces\n\nTwo big additions this month: a new style, **Rhea**, and a set of components for building chat interfaces.\n\n### Rhea\n\nSay hello to **Rhea**, a new style for shadcn-vue.\n\nRhea is the latest shadcn\u002Fui look, mirroring the upstream `base-rhea` style as closely as possible. It keeps the rounded, soft aesthetic you already know but refines the details: denser surfaces, ring-based focus states, and subtle press interactions on buttons. Built for focused product interfaces.\n\nRhea is opt-in. The default style stays the same, so nothing changes for your existing projects. Head to the [customizer](\u002F) and pick **Rhea** from the style switcher to preview it, then copy the theme into your app.\n\n### Chat interface components\n\nWe're also releasing a new set of components for building chat interfaces: **Message Scroller**, **Message**, **Bubble**, **Attachment**, and **Marker**. Plus two new CSS utilities to round them out.\n\n- [Message Scroller](#message-scroller): The scroll container for a conversation.\n- [Message](#message): Lay out a row in the conversation.\n- [Bubble](#bubble): Render the message surface.\n- [Attachment](#attachment): Render files and images.\n- [Marker](#marker): Render status updates and separators.\n\n### Message Scroller\n\nThe scroll container for a conversation. It handles the parts that are easy to get wrong: anchored turns, streamed replies, saved thread restore, prepended history, jump-to-message, scroll controls, and visibility tracking.\n\n::component-preview\n---\nname: MessageScrollerStreamingDemo\nclass: \"style-luma rounded-[34px] sm:rounded-4xl\"\npreviewClass: h-auto theme-green bg-surface dark:bg-background p-4 min-[480px]:p-8 min-[560px]:p-10 sm:px-10 sm:py-16\n---\n::\n\n### Message\n\nMessage lays out a row in the conversation with avatar, alignment, header, content, footer, and grouped messages.\n\n::component-preview\n---\nname: MessageDemo\npreviewClass: h-auto theme-blue\n---\n::\n\n### Bubble\n\nBubble renders the message surface, with variants, alignment, reactions, links, buttons, and collapsible content.\n\n::component-preview\n---\nname: BubbleVariantsDemo\npreviewClass: h-auto theme-blue\n---\n::\n\n### Attachment\n\nAttachment renders files and images with media, metadata, upload state, actions, and a full-card trigger.\n\n::component-preview\n---\nname: AttachmentDemo\npreviewClass: h-auto theme-blue bg-surface dark:bg-background\n---\n::\n\n### Marker\n\nMarker renders status updates, system notes, bordered rows, and labeled separators.\n\n::component-preview\n---\nname: MarkerDemo\nclass: style-luma\npreviewClass: h-auto theme-blue\n---\n::\n\n### scroll-fade and shimmer\n\nTwo CSS utilities to finish off the set. [`scroll-fade`](\u002Fdocs\u002Futilities\u002Fscroll-fade) dissolves content at the edges of a scroll container, and [`shimmer`](\u002Fdocs\u002Futilities\u002Fshimmer) adds a shimmer effect to text, perfect for streaming and loading states. Both ship with the `shadcn-vue` package, so there's nothing to install after `init`.\n\n::component-preview\n---\nname: ScrollFadeDemo\npreviewClass: h-auto\n---\n::\n\n## November 2025 - Catch up\n\nWe've upgraded [shadcn-vue.com](\u002F) 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](\u002Fdocs\u002Fcomponents\u002Fchart) 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 '@\u002Fcomponents\u002Fui\u002Fspinner'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CSpinner \u002F>\n\u003C\u002Ftemplate>\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 '@\u002Fcomponents\u002Fui\u002Fkbd'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CKbd>Ctrl\u003C\u002FKbd>\n\u003C\u002Ftemplate>\n```\n\nUse `KbdGroup` to group keyboard keys together.\n\n```vue showLineNumbers\n\u003Ctemplate>\n  \u003CKbdGroup>\n    \u003CKbd>Ctrl\u003C\u002FKbd>\n    \u003CKbd>B\u003C\u002FKbd>\n  \u003C\u002FKbdGroup>\n\u003C\u002Ftemplate>\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 '@\u002Fcomponents\u002Fui\u002Fbutton-group'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CButtonGroup>\n    \u003CButton>Button 1\u003C\u002FButton>\n    \u003CButton>Button 2\u003C\u002FButton>\n  \u003C\u002FButtonGroup>\n\u003C\u002Ftemplate>\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\u002FButton>\n      \u003CButton>Button 2\u003C\u002FButton>\n    \u003C\u002FButtonGroup>\n    \u003CButtonGroup>\n      \u003CButton>Button 3\u003C\u002FButton>\n      \u003CButton>Button 4\u003C\u002FButton>\n    \u003C\u002FButtonGroup>\n  \u003C\u002FButtonGroup>\n\u003C\u002Ftemplate>\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\u002FButtonGroupText>\n    \u003CInput placeholder=\"Type something here...\" \u002F>\n    \u003CButton>Button\u003C\u002FButton>\n  \u003C\u002FButtonGroup>\n\u003C\u002Ftemplate>\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 '@\u002Fcomponents\u002Fui\u002Finput-group'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CInputGroup>\n    \u003CInputGroupInput placeholder=\"Search...\" \u002F>\n    \u003CInputGroupAddon>\n      \u003CSearchIcon \u002F>\n    \u003C\u002FInputGroupAddon>\n  \u003C\u002FInputGroup>\n\u003C\u002Ftemplate>\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-[400px] [&_pre]:!h-[400px]\"\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 '@\u002Fcomponents\u002Fui\u002Ffield'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CField>\n    \u003CFieldLabel html-for=\"username\">\n      Username\n    \u003C\u002FFieldLabel>\n    \u003CInput id=\"username\" placeholder=\"Max Leiter\" \u002F>\n    \u003CFieldDescription>\n      Choose a unique username for your account.\n    \u003C\u002FFieldDescription>\n  \u003C\u002FField>\n\u003C\u002Ftemplate>\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 \u002F>\n    \u003CFieldGroup>\n      \u003CField \u002F>\n      \u003CField \u002F>\n    \u003C\u002FFieldGroup>\n  \u003C\u002FFieldSet>\n\u003C\u002Ftemplate>\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: \"[&_pre]:!h-[600px]\"\npreviewClass: h-[700px] sm: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 '@\u002Fcomponents\u002Fui\u002Fitem'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CItem>\n    \u003CItemMedia variant=\"icon\">\n      \u003CHomeIcon \u002F>\n    \u003C\u002FItemMedia>\n    \u003CItemContent>\n      \u003CItemTitle>Dashboard\u003C\u002FItemTitle>\n      \u003CItemDescription>Overview of your account and activity.\u003C\u002FItemDescription>\n    \u003C\u002FItemContent>\n  \u003C\u002FItem>\n\u003C\u002Ftemplate>\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=\"\u002Fdashboard\">\n      \u003CItemMedia variant=\"icon\">\n        \u003CHomeIcon \u002F>\n      \u003C\u002FItemMedia>\n      \u003CItemContent>\n        \u003CItemTitle>Dashboard\u003C\u002FItemTitle>\n        \u003CItemDescription>Overview of your account and activity.\u003C\u002FItemDescription>\n      \u003C\u002FItemContent>\n    \u003C\u002Fa>\n  \u003C\u002FItem>\n\u003C\u002Ftemplate>\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 '@\u002Fcomponents\u002Fui\u002Fempty'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CEmpty>\n    \u003CEmptyMedia variant=\"icon\">\n      \u003CInboxIcon \u002F>\n    \u003C\u002FEmptyMedia>\n    \u003CEmptyTitle>No messages\u003C\u002FEmptyTitle>\n    \u003CEmptyDescription>You don't have any messages yet.\u003C\u002FEmptyDescription>\n    \u003CEmptyContent>\n      \u003CButton>Send a message\u003C\u002FButton>\n    \u003C\u002FEmptyContent>\n  \u003C\u002FEmpty>\n\u003C\u002Ftemplate>\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:\u002F\u002Freka-ui.com\u002F), `shadcn-vue@latest` command will now install Reka UI. If you want to keep using [Radix Vue](https:\u002F\u002Fradix-vue.com\u002F), please visit [here](https:\u002F\u002Fradix.shadcn-vue.com\u002F) 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:\u002F\u002Facme.com\u002Fregistry\u002Fnavbar.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":450,"description":1511},"bBsa_GCCkpzE_bhio237hz5Z8pwuD5suFYnYcW2OHVA",[1519,1520],{"title":446,"path":447,"stem":448,"children":-1},{"title":454,"path":455,"stem":456,"children":-1},1788943226609]