[{"data":1,"prerenderedAt":1073},["ShallowReactive",2],{"navigation":3,"$f2vxmxe0ttlw1b":470,"\u002Fdocs\u002Futilities\u002Fscroll-fade":481,"surround-\u002Fdocs\u002Futilities\u002Fscroll-fade":1070},[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":398,"body":483,"description":1063,"extension":1064,"links":1065,"meta":1066,"navigation":204,"new":18,"path":399,"rawbody":1067,"seo":1068,"stem":400,"__hash__":1069},"content\u002Fdocs\u002Futilities\u002Fscroll-fade.md",{"type":484,"value":485,"toc":1051},"minimark",[486,491,495,511,517,527,530,538,542,757,770,778,781,794,804,823,827,833,836,840,849,853,859,867,871,874,877,883,902,906,924,927,933,936,942,961,967,978,989,995,999,1004,1010,1013,1017,1030,1040,1043,1048],[487,488],"component-preview",{"name":489,"previewClass":490},"ScrollFadeDemo","h-auto",[492,493,299],"h2",{"id":494},"installation",[496,497,498,499,503,504,506,507,510],"p",{},"If your project was set up with ",[500,501,502],"code",{},"npx shadcn-vue@latest init",", you already have ",[500,505,398],{},". It ships with the ",[500,508,509],{},"shadcn-vue"," package, which the CLI imports in your global CSS file.",[496,512,513,514,516],{},"Otherwise, install the ",[500,515,509],{}," package:",[518,519,525],"pre",{"className":520,"code":522,"language":523,"meta":524},[521],"language-bash","npm install shadcn-vue\n","bash","",[500,526,522],{"__ignoreMap":524},[496,528,529],{},"Then import the shared utilities in your global CSS file:",[518,531,536],{"className":532,"code":534,"language":535,"meta":524},[533],"language-css","@import \"tailwindcss\";\n@import \"shadcn-vue\u002Ftailwind.css\";\n","css",[500,537,534],{"__ignoreMap":524},[492,539,541],{"id":540},"usage","Usage",[543,544,545,558],"table",{},[546,547,548],"thead",{},[549,550,551,555],"tr",{},[552,553,554],"th",{},"Class",[552,556,557],{},"Styles",[559,560,561,580,595,612,626,640,655,669,683,697,709,721,733,745],"tbody",{},[549,562,563,568],{},[564,565,566],"td",{},[500,567,398],{},[564,569,570,573,574,573,577],{},[500,571,572],{},"mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));"," ",[575,576],"br",{},[500,578,579],{},"animation-timeline: scroll(self y);",[549,581,582,587],{},[564,583,584],{},[500,585,586],{},"scroll-fade-y",[564,588,589,573,591,573,593],{},[500,590,572],{},[575,592],{},[500,594,579],{},[549,596,597,602],{},[564,598,599],{},[500,600,601],{},"scroll-fade-x",[564,603,604,573,607,573,609],{},[500,605,606],{},"mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));",[575,608],{},[500,610,611],{},"animation-timeline: scroll(self inline);",[549,613,614,619],{},[564,615,616],{},[500,617,618],{},"scroll-fade-t",[564,620,621,622,573,624],{},"Fade mask on the top edge. ",[575,623],{},[500,625,579],{},[549,627,628,633],{},[564,629,630],{},[500,631,632],{},"scroll-fade-b",[564,634,635,636,573,638],{},"Fade mask on the bottom edge. ",[575,637],{},[500,639,579],{},[549,641,642,647],{},[564,643,644],{},[500,645,646],{},"scroll-fade-l",[564,648,649,650,573,652],{},"Fade mask on the left edge. ",[575,651],{},[500,653,654],{},"animation-timeline: scroll(self x);",[549,656,657,662],{},[564,658,659],{},[500,660,661],{},"scroll-fade-r",[564,663,664,665,573,667],{},"Fade mask on the right edge. ",[575,666],{},[500,668,654],{},[549,670,671,676],{},[564,672,673],{},[500,674,675],{},"scroll-fade-s",[564,677,678,679,573,681],{},"Fade mask on the start edge, mirrors in RTL. ",[575,680],{},[500,682,611],{},[549,684,685,690],{},[564,686,687],{},[500,688,689],{},"scroll-fade-e",[564,691,692,693,573,695],{},"Fade mask on the end edge, mirrors in RTL. ",[575,694],{},[500,696,611],{},[549,698,699,704],{},[564,700,701],{},[500,702,703],{},"scroll-fade-\u003Cnumber>",[564,705,706],{},[500,707,708],{},"--scroll-fade-size: calc(var(--spacing) * \u003Cnumber>);",[549,710,711,716],{},[564,712,713],{},[500,714,715],{},"scroll-fade-[\u003Cvalue>]",[564,717,718],{},[500,719,720],{},"--scroll-fade-size: \u003Cvalue>;",[549,722,723,728],{},[564,724,725],{},[500,726,727],{},"scroll-fade-{t,b,s,e}-\u003Cnumber>",[564,729,730],{},[500,731,732],{},"--scroll-fade-{t,b,s,e}-size: calc(var(--spacing) * \u003Cnumber>);",[549,734,735,740],{},[564,736,737],{},[500,738,739],{},"scroll-fade-{t,b,s,e}-[\u003Cvalue>]",[564,741,742],{},[500,743,744],{},"--scroll-fade-{t,b,s,e}-size: \u003Cvalue>;",[549,746,747,752],{},[564,748,749],{},[500,750,751],{},"scroll-fade-none",[564,753,754],{},[500,755,756],{},"--scroll-fade-mask: none;",[496,758,759,760,762,763,765,766,769],{},"Add ",[500,761,398],{}," or ",[500,764,586],{}," to the scroll container, i.e. the element that has ",[500,767,768],{},"overflow-y-auto",".",[518,771,776],{"className":772,"code":774,"language":775,"meta":524},[773],"language-vue","\u003Ctemplate>\n  \u003Cdiv class=\"scroll-fade overflow-y-auto\">\n    \u003C!-- ... -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[500,777,774],{"__ignoreMap":524},[496,779,780],{},"The fade is scroll-aware and tracks the scroll position:",[782,783,784,788,791],"ul",{},[785,786,787],"li",{},"At rest, the top edge is crisp and the bottom edge fades to hint at more content.",[785,789,790],{},"As you scroll, a fade appears at the top and both edges stay faded mid-scroll.",[785,792,793],{},"At the end, the bottom edge sharpens to show you have reached the last item.",[496,795,796,797,800,801,803],{},"The fade is applied with ",[500,798,799],{},"mask-image",", so it dissolves the content itself rather than overlaying a color. The mask uses a linear fade from transparent to black, so it adapts to any background without configuration. If your scroll area sits inside a card, put the background and border on a wrapper and ",[500,802,398],{}," on the inner scroller, so the fade dissolves the content and not the card.",[496,805,806,807,813,814,819,820,822],{},"The ",[808,809,810],"a",{"href":219},[500,811,812],{},"ScrollArea"," and ",[808,815,816],{"href":170},[500,817,818],{},"MessageScroller"," components can use ",[500,821,398],{}," on their scrollable viewport.",[492,824,826],{"id":825},"no-overflow-no-fade","No Overflow, No Fade",[496,828,829,830,832],{},"If the content does not overflow, no fade is shown. You can apply ",[500,831,398],{}," to any list without checking whether it scrolls.",[487,834],{"name":835,"previewClass":490},"ScrollFadeOverflowDemo",[492,837,839],{"id":838},"horizontal-scrolling","Horizontal Scrolling",[496,841,842,843,845,846,769],{},"Use ",[500,844,601],{}," on containers that scroll horizontally, i.e. the element that has ",[500,847,848],{},"overflow-x-auto",[487,850],{"name":851,"previewClass":852},"ScrollFadeHorizontalDemo","h-64",[518,854,857],{"className":855,"code":856,"language":775,"meta":524},[773],"\u003Ctemplate>\n  \u003Cdiv class=\"flex scroll-fade-x overflow-x-auto\">\n    \u003C!-- ... -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[500,858,856],{"__ignoreMap":524},[496,860,861,862,813,864,866],{},"The horizontal fade is direction-aware. In RTL layouts, the crisp edge and the fade follow the reading direction with no extra classes needed. ",[500,863,703],{},[500,865,751],{}," work the same for both axes.",[492,868,870],{"id":869},"edge-fades","Edge Fades",[496,872,873],{},"Use edge utilities when only one edge should track the scroll position.",[487,875],{"name":876,"previewClass":490},"ScrollFadeEdgeDemo",[518,878,881],{"className":879,"code":880,"language":775,"meta":524},[773],"\u003Ctemplate>\n  \u003Cdiv class=\"scroll-fade-b overflow-y-auto\">\n    \u003C!-- ... -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[500,882,880],{"__ignoreMap":524},[496,884,885,886,888,889,888,891,893,894,896,897,813,899,901],{},"The edge utilities are scroll-aware. Start edges fade in after you scroll away from the start, and end edges fade out when you reach the end. Use ",[500,887,618],{},", ",[500,890,632],{},[500,892,646],{},", and ",[500,895,661],{}," for physical edges. Use ",[500,898,675],{},[500,900,689],{}," for logical inline edges that mirror in RTL.",[492,903,905],{"id":904},"fade-size","Fade Size",[496,907,908,909,912,913,916,917,919,920,923],{},"The fade depth defaults to ",[500,910,911],{},"12%"," of the container, capped at ",[500,914,915],{},"40px"," so tall scrollers stay subtle. Use ",[500,918,703],{}," to set a fixed size on the spacing scale instead, the same way ",[500,921,922],{},"scroll-mt-\u003Cnumber>"," works.",[487,925],{"name":926,"previewClass":490},"ScrollFadeSizeDemo",[518,928,931],{"className":929,"code":930,"language":775,"meta":524},[773],"\u003Ctemplate>\n  \u003Cdiv class=\"scroll-fade scroll-fade-24 overflow-y-auto\">\n    \u003C!-- ... -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[500,932,930],{"__ignoreMap":524},[496,934,935],{},"For one-off values, use an arbitrary length or percentage:",[518,937,940],{"className":938,"code":939,"language":775,"meta":524},[773],"\u003Ctemplate>\n  \u003Cdiv class=\"scroll-fade scroll-fade-[15%] overflow-y-auto\">\n    \u003C!-- ... -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[500,941,939],{"__ignoreMap":524},[496,943,944,945,888,948,888,951,893,954,957,958,960],{},"To fade opposite edges by different amounts, use the per-edge modifiers ",[500,946,947],{},"scroll-fade-t-\u003Cnumber>",[500,949,950],{},"scroll-fade-b-\u003Cnumber>",[500,952,953],{},"scroll-fade-s-\u003Cnumber>",[500,955,956],{},"scroll-fade-e-\u003Cnumber>",". They override ",[500,959,703],{}," on the edge they target and accept arbitrary values too.",[518,962,965],{"className":963,"code":964,"language":775,"meta":524},[773],"\u003Ctemplate>\n  \u003Cdiv class=\"scroll-fade scroll-fade-b-8 scroll-fade-t-2 overflow-y-auto\">\n    \u003C!-- ... -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[500,966,964],{"__ignoreMap":524},[496,968,969,970,973,974,977],{},"Use the logical ",[500,971,972],{},"s","\u002F",[500,975,976],{},"e"," modifiers for horizontal scrollers so the sizes mirror in RTL.",[496,979,980,981,984,985,988],{},"The fade eases in and out over a fixed scroll distance rather than appearing instantly. That distance is the ",[500,982,983],{},"--scroll-fade-reveal"," variable, ",[500,986,987],{},"96px"," by default and independent of the fade depth. Lower it for a snappier reveal or raise it for a more gradual one:",[518,990,993],{"className":991,"code":992,"language":775,"meta":524},[773],"\u003Ctemplate>\n  \u003Cdiv class=\"scroll-fade overflow-y-auto [--scroll-fade-reveal:64px]\">\n    \u003C!-- ... -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[500,994,992],{"__ignoreMap":524},[492,996,998],{"id":997},"disabling-the-fade","Disabling the Fade",[496,1000,842,1001,1003],{},[500,1002,751],{}," to remove the fade. It works in any class order, so the typical use is responsive or stateful:",[518,1005,1008],{"className":1006,"code":1007,"language":775,"meta":524},[773],"\u003Ctemplate>\n  \u003Cdiv class=\"scroll-fade overflow-y-auto md:scroll-fade-none\">\n    \u003C!-- ... -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[500,1009,1007],{"__ignoreMap":524},[487,1011],{"name":1012,"previewClass":490},"ScrollFadeNoneDemo",[492,1014,1016],{"id":1015},"fallback","Fallback",[496,1018,1019,1020,1026,1027,1029],{},"The scroll-aware behavior is implemented with ",[808,1021,1025],{"href":1022,"rel":1023},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_scroll-driven_animations",[1024],"nofollow","CSS scroll-driven animations",", with no JavaScript and no scroll listeners. In browsers that do not support scroll-driven animations, ",[500,1028,398],{}," falls back to a static fade on both edges, and edge utilities fall back to a static fade on the selected edge.",[496,1031,1032,1033,1035,1036,1039],{},"Since the mask is applied to the scroll container itself, a visible scrollbar fades with the content at the edges. Pair ",[500,1034,398],{}," with ",[500,1037,1038],{},"scrollbar-none",", which ships in the same package, if you want to hide the scrollbar entirely.",[492,1041,442],{"id":1042},"rtl",[496,1044,1045,1047],{},[500,1046,601],{}," follows the reading direction. At rest, the start edge is crisp and the end edge fades. In RTL layouts that means a crisp right edge and a fade on the left, mirrored from LTR.",[487,1049],{"name":1050,"previewClass":490},"ScrollFadeRTLDemo",{"title":524,"searchDepth":1052,"depth":1052,"links":1053},2,[1054,1055,1056,1057,1058,1059,1060,1061,1062],{"id":494,"depth":1052,"text":299},{"id":540,"depth":1052,"text":541},{"id":825,"depth":1052,"text":826},{"id":838,"depth":1052,"text":839},{"id":869,"depth":1052,"text":870},{"id":904,"depth":1052,"text":905},{"id":997,"depth":1052,"text":998},{"id":1015,"depth":1052,"text":1016},{"id":1042,"depth":1052,"text":442},"Utilities for adding a fade effect to the edges of a scroll container.","md",null,{},"---\ntitle: scroll-fade\ndescription: Utilities for adding a fade effect to the edges of a scroll container.\n---\n\n::component-preview\n---\nname: ScrollFadeDemo\npreviewClass: h-auto\n---\n::\n\n## Installation\n\nIf your project was set up with `npx shadcn-vue@latest init`, you already have `scroll-fade`. It ships with the `shadcn-vue` package, which the CLI imports in your global CSS file.\n\nOtherwise, install the `shadcn-vue` package:\n\n```bash\nnpm install shadcn-vue\n```\n\nThen import the shared utilities in your global CSS file:\n\n```css\n@import \"tailwindcss\";\n@import \"shadcn-vue\u002Ftailwind.css\";\n```\n\n## Usage\n\n| Class                             | Styles                                                                                                              |\n| --------------------------------- | ------------------------------------------------------------------------------------------------------------------- |\n| `scroll-fade`                     | `mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));` \u003Cbr \u002F> `animation-timeline: scroll(self y);`       |\n| `scroll-fade-y`                   | `mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));` \u003Cbr \u002F> `animation-timeline: scroll(self y);`       |\n| `scroll-fade-x`                   | `mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));` \u003Cbr \u002F> `animation-timeline: scroll(self inline);` |\n| `scroll-fade-t`                   | Fade mask on the top edge. \u003Cbr \u002F> `animation-timeline: scroll(self y);`                                             |\n| `scroll-fade-b`                   | Fade mask on the bottom edge. \u003Cbr \u002F> `animation-timeline: scroll(self y);`                                          |\n| `scroll-fade-l`                   | Fade mask on the left edge. \u003Cbr \u002F> `animation-timeline: scroll(self x);`                                            |\n| `scroll-fade-r`                   | Fade mask on the right edge. \u003Cbr \u002F> `animation-timeline: scroll(self x);`                                           |\n| `scroll-fade-s`                   | Fade mask on the start edge, mirrors in RTL. \u003Cbr \u002F> `animation-timeline: scroll(self inline);`                      |\n| `scroll-fade-e`                   | Fade mask on the end edge, mirrors in RTL. \u003Cbr \u002F> `animation-timeline: scroll(self inline);`                        |\n| `scroll-fade-\u003Cnumber>`            | `--scroll-fade-size: calc(var(--spacing) * \u003Cnumber>);`                                                              |\n| `scroll-fade-[\u003Cvalue>]`           | `--scroll-fade-size: \u003Cvalue>;`                                                                                      |\n| `scroll-fade-{t,b,s,e}-\u003Cnumber>`  | `--scroll-fade-{t,b,s,e}-size: calc(var(--spacing) * \u003Cnumber>);`                                                    |\n| `scroll-fade-{t,b,s,e}-[\u003Cvalue>]` | `--scroll-fade-{t,b,s,e}-size: \u003Cvalue>;`                                                                            |\n| `scroll-fade-none`                | `--scroll-fade-mask: none;`                                                                                         |\n\nAdd `scroll-fade` or `scroll-fade-y` to the scroll container, i.e. the element that has `overflow-y-auto`.\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv class=\"scroll-fade overflow-y-auto\">\n    \u003C!-- ... -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\nThe fade is scroll-aware and tracks the scroll position:\n\n- At rest, the top edge is crisp and the bottom edge fades to hint at more content.\n- As you scroll, a fade appears at the top and both edges stay faded mid-scroll.\n- At the end, the bottom edge sharpens to show you have reached the last item.\n\nThe fade is applied with `mask-image`, so it dissolves the content itself rather than overlaying a color. The mask uses a linear fade from transparent to black, so it adapts to any background without configuration. If your scroll area sits inside a card, put the background and border on a wrapper and `scroll-fade` on the inner scroller, so the fade dissolves the content and not the card.\n\nThe [`ScrollArea`](\u002Fdocs\u002Fcomponents\u002Fscroll-area) and [`MessageScroller`](\u002Fdocs\u002Fcomponents\u002Fmessage-scroller) components can use `scroll-fade` on their scrollable viewport.\n\n## No Overflow, No Fade\n\nIf the content does not overflow, no fade is shown. You can apply `scroll-fade` to any list without checking whether it scrolls.\n\n::component-preview\n---\nname: ScrollFadeOverflowDemo\npreviewClass: h-auto\n---\n::\n\n## Horizontal Scrolling\n\nUse `scroll-fade-x` on containers that scroll horizontally, i.e. the element that has `overflow-x-auto`.\n\n::component-preview\n---\nname: ScrollFadeHorizontalDemo\npreviewClass: h-64\n---\n::\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv class=\"flex scroll-fade-x overflow-x-auto\">\n    \u003C!-- ... -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\nThe horizontal fade is direction-aware. In RTL layouts, the crisp edge and the fade follow the reading direction with no extra classes needed. `scroll-fade-\u003Cnumber>` and `scroll-fade-none` work the same for both axes.\n\n## Edge Fades\n\nUse edge utilities when only one edge should track the scroll position.\n\n::component-preview\n---\nname: ScrollFadeEdgeDemo\npreviewClass: h-auto\n---\n::\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv class=\"scroll-fade-b overflow-y-auto\">\n    \u003C!-- ... -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\nThe edge utilities are scroll-aware. Start edges fade in after you scroll away from the start, and end edges fade out when you reach the end. Use `scroll-fade-t`, `scroll-fade-b`, `scroll-fade-l`, and `scroll-fade-r` for physical edges. Use `scroll-fade-s` and `scroll-fade-e` for logical inline edges that mirror in RTL.\n\n## Fade Size\n\nThe fade depth defaults to `12%` of the container, capped at `40px` so tall scrollers stay subtle. Use `scroll-fade-\u003Cnumber>` to set a fixed size on the spacing scale instead, the same way `scroll-mt-\u003Cnumber>` works.\n\n::component-preview\n---\nname: ScrollFadeSizeDemo\npreviewClass: h-auto\n---\n::\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv class=\"scroll-fade scroll-fade-24 overflow-y-auto\">\n    \u003C!-- ... -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\nFor one-off values, use an arbitrary length or percentage:\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv class=\"scroll-fade scroll-fade-[15%] overflow-y-auto\">\n    \u003C!-- ... -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\nTo fade opposite edges by different amounts, use the per-edge modifiers `scroll-fade-t-\u003Cnumber>`, `scroll-fade-b-\u003Cnumber>`, `scroll-fade-s-\u003Cnumber>`, and `scroll-fade-e-\u003Cnumber>`. They override `scroll-fade-\u003Cnumber>` on the edge they target and accept arbitrary values too.\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv class=\"scroll-fade scroll-fade-b-8 scroll-fade-t-2 overflow-y-auto\">\n    \u003C!-- ... -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\nUse the logical `s`\u002F`e` modifiers for horizontal scrollers so the sizes mirror in RTL.\n\nThe fade eases in and out over a fixed scroll distance rather than appearing instantly. That distance is the `--scroll-fade-reveal` variable, `96px` by default and independent of the fade depth. Lower it for a snappier reveal or raise it for a more gradual one:\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv class=\"scroll-fade overflow-y-auto [--scroll-fade-reveal:64px]\">\n    \u003C!-- ... -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n## Disabling the Fade\n\nUse `scroll-fade-none` to remove the fade. It works in any class order, so the typical use is responsive or stateful:\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv class=\"scroll-fade overflow-y-auto md:scroll-fade-none\">\n    \u003C!-- ... -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n::component-preview\n---\nname: ScrollFadeNoneDemo\npreviewClass: h-auto\n---\n::\n\n## Fallback\n\nThe scroll-aware behavior is implemented with [CSS scroll-driven animations](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_scroll-driven_animations), with no JavaScript and no scroll listeners. In browsers that do not support scroll-driven animations, `scroll-fade` falls back to a static fade on both edges, and edge utilities fall back to a static fade on the selected edge.\n\nSince the mask is applied to the scroll container itself, a visible scrollbar fades with the content at the edges. Pair `scroll-fade` with `scrollbar-none`, which ships in the same package, if you want to hide the scrollbar entirely.\n\n## RTL\n\n`scroll-fade-x` follows the reading direction. At rest, the start edge is crisp and the end edge fades. In RTL layouts that means a crisp right edge and a fade on the left, mirrored from LTR.\n\n::component-preview\n---\nname: ScrollFadeRTLDemo\npreviewClass: h-auto\n---\n::\n",{"title":398,"description":1063},"BBF9bxxXfkBKQMKivo4LzC2McTvi2Dmw3tSlgvV4k44",[1071,1072],{"title":392,"path":393,"stem":394,"children":-1},{"title":402,"path":403,"stem":404,"children":-1},1788943243401]