[{"data":1,"prerenderedAt":2883},["ShallowReactive",2],{"navigation_docs":3,"-components-interactive-code-block":1514,"-components-interactive-code-block-surround":2878},[4,28,35,1298,1321,1328,1483,1507],{"title":5,"path":6,"stem":7,"children":8,"icon":27},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,11,15,19,23],{"title":10,"path":6,"stem":7},"Introduction",{"title":12,"path":13,"stem":14},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":16,"path":17,"stem":18},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage",{"title":20,"path":21,"stem":22},"Theming","\u002Fgetting-started\u002Ftheming","1.getting-started\u002F4.theming",{"title":24,"path":25,"stem":26},"AI Agents","\u002Fgetting-started\u002Fai-agents","1.getting-started\u002F5.ai-agents","i-lucide-rocket",{"title":29,"path":30,"stem":31,"children":32,"icon":34},"Core Concepts","\u002Fcore-concepts","2.core-concepts\u002Findex",[33],{"title":29,"path":30,"stem":31},"i-lucide-lightbulb",{"title":36,"icon":37,"path":38,"stem":39,"children":40},"Components","i-lucide-component","\u002Fcomponents","3.components",[41,43,62,152,254,312,434,452,466,600,690,876,906,936,970,1004,1042,1268],{"title":36,"path":38,"stem":42},"3.components\u002Findex",{"title":44,"icon":45,"path":46,"stem":47,"children":48,"page":61},"3D","i-lucide-box","\u002Fcomponents\u002F3d","3.components\u002F3d",[49,53,57],{"title":50,"path":51,"stem":52},"3D Card","\u002Fcomponents\u002F3d\u002F3d-card","3.components\u002F3d\u002F3d-card",{"title":54,"path":55,"stem":56},"Book","\u002Fcomponents\u002F3d\u002Fbook","3.components\u002F3d\u002Fbook",{"title":58,"path":59,"stem":60},"Globe","\u002Fcomponents\u002F3d\u002Fglobe","3.components\u002F3d\u002Fglobe",false,{"title":63,"icon":64,"path":65,"stem":66,"children":67,"page":61},"AI","i-lucide-sparkles","\u002Fcomponents\u002Fai","3.components\u002Fai",[68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148],{"title":69,"path":70,"stem":71},"Agent Avatar","\u002Fcomponents\u002Fai\u002Fagent-avatar","3.components\u002Fai\u002Fagent-avatar",{"title":73,"path":74,"stem":75},"AI Approval","\u002Fcomponents\u002Fai\u002Fai-approval","3.components\u002Fai\u002Fai-approval",{"title":77,"path":78,"stem":79},"AI Artifact","\u002Fcomponents\u002Fai\u002Fai-artifact","3.components\u002Fai\u002Fai-artifact",{"title":81,"path":82,"stem":83},"AI Branch","\u002Fcomponents\u002Fai\u002Fai-branch","3.components\u002Fai\u002Fai-branch",{"title":85,"path":86,"stem":87},"AI Citation","\u002Fcomponents\u002Fai\u002Fai-citation","3.components\u002Fai\u002Fai-citation",{"title":89,"path":90,"stem":91},"AI Context Meter","\u002Fcomponents\u002Fai\u002Fai-context-meter","3.components\u002Fai\u002Fai-context-meter",{"title":93,"path":94,"stem":95},"AI Conversation","\u002Fcomponents\u002Fai\u002Fai-conversation","3.components\u002Fai\u002Fai-conversation",{"title":97,"path":98,"stem":99},"AI Diff","\u002Fcomponents\u002Fai\u002Fai-diff","3.components\u002Fai\u002Fai-diff",{"title":101,"path":102,"stem":103},"AI Message","\u002Fcomponents\u002Fai\u002Fai-message","3.components\u002Fai\u002Fai-message",{"title":105,"path":106,"stem":107},"AI Messages","\u002Fcomponents\u002Fai\u002Fai-messages","3.components\u002Fai\u002Fai-messages",{"title":109,"path":110,"stem":111},"AI Orb","\u002Fcomponents\u002Fai\u002Fai-orb","3.components\u002Fai\u002Fai-orb",{"title":113,"path":114,"stem":115},"AI Orb Face","\u002Fcomponents\u002Fai\u002Fai-orb-face","3.components\u002Fai\u002Fai-orb-face",{"title":117,"path":118,"stem":119},"AI Orb Face Mouth","\u002Fcomponents\u002Fai\u002Fai-orb-face-mouth","3.components\u002Fai\u002Fai-orb-face-mouth",{"title":121,"path":122,"stem":123},"AI Prompt Input","\u002Fcomponents\u002Fai\u002Fai-prompt-input","3.components\u002Fai\u002Fai-prompt-input",{"title":125,"path":126,"stem":127},"AI Reasoning","\u002Fcomponents\u002Fai\u002Fai-reasoning","3.components\u002Fai\u002Fai-reasoning",{"title":129,"path":130,"stem":131},"AI Response","\u002Fcomponents\u002Fai\u002Fai-response","3.components\u002Fai\u002Fai-response",{"title":133,"path":134,"stem":135},"AI Sources","\u002Fcomponents\u002Fai\u002Fai-sources","3.components\u002Fai\u002Fai-sources",{"title":137,"path":138,"stem":139},"AI Suggestions","\u002Fcomponents\u002Fai\u002Fai-suggestions","3.components\u002Fai\u002Fai-suggestions",{"title":141,"path":142,"stem":143},"AI Task List","\u002Fcomponents\u002Fai\u002Fai-task-list","3.components\u002Fai\u002Fai-task-list",{"title":145,"path":146,"stem":147},"AI Tool Call","\u002Fcomponents\u002Fai\u002Fai-tool-call","3.components\u002Fai\u002Fai-tool-call",{"title":149,"path":150,"stem":151},"Image Generation Panel","\u002Fcomponents\u002Fai\u002Fimage-generation-panel","3.components\u002Fai\u002Fimage-generation-panel",{"title":153,"icon":154,"path":155,"stem":156,"children":157,"page":61},"Backgrounds","i-lucide-layers","\u002Fcomponents\u002Fbackgrounds","3.components\u002Fbackgrounds",[158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,246,250],{"title":159,"path":160,"stem":161},"Animated Background","\u002Fcomponents\u002Fbackgrounds\u002Fanimated-background","3.components\u002Fbackgrounds\u002Fanimated-background",{"title":163,"path":164,"stem":165},"Animated Grid Pattern","\u002Fcomponents\u002Fbackgrounds\u002Fanimated-grid-pattern","3.components\u002Fbackgrounds\u002Fanimated-grid-pattern",{"title":167,"path":168,"stem":169},"Animated Spotlight","\u002Fcomponents\u002Fbackgrounds\u002Fanimated-spotlight","3.components\u002Fbackgrounds\u002Fanimated-spotlight",{"title":171,"path":172,"stem":173},"Aurora Background","\u002Fcomponents\u002Fbackgrounds\u002Faurora-background","3.components\u002Fbackgrounds\u002Faurora-background",{"title":175,"path":176,"stem":177},"Aurora Curtain","\u002Fcomponents\u002Fbackgrounds\u002Faurora-curtain","3.components\u002Fbackgrounds\u002Faurora-curtain",{"title":179,"path":180,"stem":181},"Background Beams","\u002Fcomponents\u002Fbackgrounds\u002Fbackground-beams","3.components\u002Fbackgrounds\u002Fbackground-beams",{"title":183,"path":184,"stem":185},"Background Gradient Animation","\u002Fcomponents\u002Fbackgrounds\u002Fbackground-gradient-animation","3.components\u002Fbackgrounds\u002Fbackground-gradient-animation",{"title":187,"path":188,"stem":189},"Background Lines","\u002Fcomponents\u002Fbackgrounds\u002Fbackground-lines","3.components\u002Fbackgrounds\u002Fbackground-lines",{"title":191,"path":192,"stem":193},"Background Ripple Effect","\u002Fcomponents\u002Fbackgrounds\u002Fbackground-ripple-effect","3.components\u002Fbackgrounds\u002Fbackground-ripple-effect",{"title":195,"path":196,"stem":197},"Boxes Core","\u002Fcomponents\u002Fbackgrounds\u002Fboxes-core","3.components\u002Fbackgrounds\u002Fboxes-core",{"title":199,"path":200,"stem":201},"Directional Light","\u002Fcomponents\u002Fbackgrounds\u002Fdirectional-light","3.components\u002Fbackgrounds\u002Fdirectional-light",{"title":203,"path":204,"stem":205},"Dotted Glow Background","\u002Fcomponents\u002Fbackgrounds\u002Fdotted-glow-background","3.components\u002Fbackgrounds\u002Fdotted-glow-background",{"title":207,"path":208,"stem":209},"Flickering Grid","\u002Fcomponents\u002Fbackgrounds\u002Fflickering-grid","3.components\u002Fbackgrounds\u002Fflickering-grid",{"title":211,"path":212,"stem":213},"Interactive Grid Pattern","\u002Fcomponents\u002Fbackgrounds\u002Finteractive-grid-pattern","3.components\u002Fbackgrounds\u002Finteractive-grid-pattern",{"title":215,"path":216,"stem":217},"Lamp Container","\u002Fcomponents\u002Fbackgrounds\u002Flamp-container","3.components\u002Fbackgrounds\u002Flamp-container",{"title":219,"path":220,"stem":221},"Light Rays","\u002Fcomponents\u002Fbackgrounds\u002Flight-rays","3.components\u002Fbackgrounds\u002Flight-rays",{"title":223,"path":224,"stem":225},"Meteors","\u002Fcomponents\u002Fbackgrounds\u002Fmeteors","3.components\u002Fbackgrounds\u002Fmeteors",{"title":227,"path":228,"stem":229},"Particles","\u002Fcomponents\u002Fbackgrounds\u002Fparticles","3.components\u002Fbackgrounds\u002Fparticles",{"title":231,"path":232,"stem":233},"Retro Grid","\u002Fcomponents\u002Fbackgrounds\u002Fretro-grid","3.components\u002Fbackgrounds\u002Fretro-grid",{"title":235,"path":236,"stem":237},"Shooting Stars","\u002Fcomponents\u002Fbackgrounds\u002Fshooting-stars","3.components\u002Fbackgrounds\u002Fshooting-stars",{"title":239,"path":240,"stem":241},"Stars Background","\u002Fcomponents\u002Fbackgrounds\u002Fstars-background","3.components\u002Fbackgrounds\u002Fstars-background",{"title":243,"path":244,"stem":245},"Striped Pattern","\u002Fcomponents\u002Fbackgrounds\u002Fstriped-pattern","3.components\u002Fbackgrounds\u002Fstriped-pattern",{"title":247,"path":248,"stem":249},"Vortex","\u002Fcomponents\u002Fbackgrounds\u002Fvortex","3.components\u002Fbackgrounds\u002Fvortex",{"title":251,"path":252,"stem":253},"Warp Background","\u002Fcomponents\u002Fbackgrounds\u002Fwarp-background","3.components\u002Fbackgrounds\u002Fwarp-background",{"title":255,"icon":256,"path":257,"stem":258,"children":259,"page":61},"Buttons","i-lucide-mouse-pointer-click","\u002Fcomponents\u002Fbuttons","3.components\u002Fbuttons",[260,264,268,272,276,280,284,288,292,296,300,304,308],{"title":261,"path":262,"stem":263},"Button Copy","\u002Fcomponents\u002Fbuttons\u002Fbutton-copy","3.components\u002Fbuttons\u002Fbutton-copy",{"title":265,"path":266,"stem":267},"Clip Corners Button","\u002Fcomponents\u002Fbuttons\u002Fclip-corners-button","3.components\u002Fbuttons\u002Fclip-corners-button",{"title":269,"path":270,"stem":271},"Dot Morph Button","\u002Fcomponents\u002Fbuttons\u002Fdot-morph-button","3.components\u002Fbuttons\u002Fdot-morph-button",{"title":273,"path":274,"stem":275},"Interactive Hover Button","\u002Fcomponents\u002Fbuttons\u002Finteractive-hover-button","3.components\u002Fbuttons\u002Finteractive-hover-button",{"title":277,"path":278,"stem":279},"Magnetic Button","\u002Fcomponents\u002Fbuttons\u002Fmagnetic-button","3.components\u002Fbuttons\u002Fmagnetic-button",{"title":281,"path":282,"stem":283},"Music Toggle","\u002Fcomponents\u002Fbuttons\u002Fmusic-toggle","3.components\u002Fbuttons\u002Fmusic-toggle",{"title":285,"path":286,"stem":287},"Pulsating Button","\u002Fcomponents\u002Fbuttons\u002Fpulsating-button","3.components\u002Fbuttons\u002Fpulsating-button",{"title":289,"path":290,"stem":291},"Rainbow Button","\u002Fcomponents\u002Fbuttons\u002Frainbow-button","3.components\u002Fbuttons\u002Frainbow-button",{"title":293,"path":294,"stem":295},"Ripple Button","\u002Fcomponents\u002Fbuttons\u002Fripple-button","3.components\u002Fbuttons\u002Fripple-button",{"title":297,"path":298,"stem":299},"Shimmer Button","\u002Fcomponents\u002Fbuttons\u002Fshimmer-button","3.components\u002Fbuttons\u002Fshimmer-button",{"title":301,"path":302,"stem":303},"Shiny Button","\u002Fcomponents\u002Fbuttons\u002Fshiny-button","3.components\u002Fbuttons\u002Fshiny-button",{"title":305,"path":306,"stem":307},"Smooth Button","\u002Fcomponents\u002Fbuttons\u002Fsmooth-button","3.components\u002Fbuttons\u002Fsmooth-button",{"title":309,"path":310,"stem":311},"Theme Toggle","\u002Fcomponents\u002Fbuttons\u002Ftheme-toggle","3.components\u002Fbuttons\u002Ftheme-toggle",{"title":313,"icon":314,"path":315,"stem":316,"children":317,"page":61},"Cards","i-lucide-layout-panel-top","\u002Fcomponents\u002Fcards","3.components\u002Fcards",[318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430],{"title":319,"path":320,"stem":321},"App Download Stack","\u002Fcomponents\u002Fcards\u002Fapp-download-stack","3.components\u002Fcards\u002Fapp-download-stack",{"title":323,"path":324,"stem":325},"Apple Invites","\u002Fcomponents\u002Fcards\u002Fapple-invites","3.components\u002Fcards\u002Fapple-invites",{"title":327,"path":328,"stem":329},"Bento Grid","\u002Fcomponents\u002Fcards\u002Fbento-grid","3.components\u002Fcards\u002Fbento-grid",{"title":331,"path":332,"stem":333},"Stacked Cards","\u002Fcomponents\u002Fcards\u002Fcard-stack","3.components\u002Fcards\u002Fcard-stack",{"title":335,"path":336,"stem":337},"Card Swipe Deck","\u002Fcomponents\u002Fcards\u002Fcard-swipe-deck","3.components\u002Fcards\u002Fcard-swipe-deck",{"title":339,"path":340,"stem":341},"Draggable Card","\u002Fcomponents\u002Fcards\u002Fdraggable-card","3.components\u002Fcards\u002Fdraggable-card",{"title":343,"path":344,"stem":345},"Evervault Card","\u002Fcomponents\u002Fcards\u002Fever-vault-card","3.components\u002Fcards\u002Fever-vault-card",{"title":347,"path":348,"stem":349},"Expandable Cards","\u002Fcomponents\u002Fcards\u002Fexpandable-cards","3.components\u002Fcards\u002Fexpandable-cards",{"title":351,"path":352,"stem":353},"Figma Comment","\u002Fcomponents\u002Fcards\u002Ffigma-comment","3.components\u002Fcards\u002Ffigma-comment",{"title":355,"path":356,"stem":357},"Focus Cards","\u002Fcomponents\u002Fcards\u002Ffocus-cards","3.components\u002Fcards\u002Ffocus-cards",{"title":359,"path":360,"stem":361},"Glare Card","\u002Fcomponents\u002Fcards\u002Fglare-card","3.components\u002Fcards\u002Fglare-card",{"title":363,"path":364,"stem":365},"Glass Card","\u002Fcomponents\u002Fcards\u002Fglass-card","3.components\u002Fcards\u002Fglass-card",{"title":367,"path":368,"stem":369},"Glass Panel","\u002Fcomponents\u002Fcards\u002Fglass-panel","3.components\u002Fcards\u002Fglass-panel",{"title":371,"path":372,"stem":373},"Glow Hover Cards","\u002Fcomponents\u002Fcards\u002Fglow-hover-cards","3.components\u002Fcards\u002Fglow-hover-cards",{"title":375,"path":376,"stem":377},"Glowing Stars Card","\u002Fcomponents\u002Fcards\u002Fglowing-stars-card","3.components\u002Fcards\u002Fglowing-stars-card",{"title":379,"path":380,"stem":381},"Mac Terminal","\u002Fcomponents\u002Fcards\u002Fmac-terminal","3.components\u002Fcards\u002Fmac-terminal",{"title":383,"path":384,"stem":385},"Magic Card","\u002Fcomponents\u002Fcards\u002Fmagic-card","3.components\u002Fcards\u002Fmagic-card",{"title":387,"path":388,"stem":389},"Mail Card","\u002Fcomponents\u002Fcards\u002Fmail-card","3.components\u002Fcards\u002Fmail-card",{"title":391,"path":392,"stem":393},"Photo Stack","\u002Fcomponents\u002Fcards\u002Fphoto-stack","3.components\u002Fcards\u002Fphoto-stack",{"title":395,"path":396,"stem":397},"Price Flow","\u002Fcomponents\u002Fcards\u002Fprice-flow","3.components\u002Fcards\u002Fprice-flow",{"title":399,"path":400,"stem":401},"Product Card","\u002Fcomponents\u002Fcards\u002Fproduct-card","3.components\u002Fcards\u002Fproduct-card",{"title":403,"path":404,"stem":405},"Scrollable Card Stack","\u002Fcomponents\u002Fcards\u002Fscrollable-card-stack","3.components\u002Fcards\u002Fscrollable-card-stack",{"title":407,"path":408,"stem":409},"Shine Border","\u002Fcomponents\u002Fcards\u002Fshine-border","3.components\u002Fcards\u002Fshine-border",{"title":411,"path":412,"stem":413},"Social Hover Card","\u002Fcomponents\u002Fcards\u002Fsocial-hover-card","3.components\u002Fcards\u002Fsocial-hover-card",{"title":415,"path":416,"stem":417},"Switchboard Card","\u002Fcomponents\u002Fcards\u002Fswitchboard-card","3.components\u002Fcards\u002Fswitchboard-card",{"title":419,"path":420,"stem":421},"Tilt Card","\u002Fcomponents\u002Fcards\u002Ftilt-card","3.components\u002Fcards\u002Ftilt-card",{"title":423,"path":424,"stem":425},"Tweet Card","\u002Fcomponents\u002Fcards\u002Ftweet-card","3.components\u002Fcards\u002Ftweet-card",{"title":427,"path":428,"stem":429},"Wallet Card","\u002Fcomponents\u002Fcards\u002Fwallet-card","3.components\u002Fcards\u002Fwallet-card",{"title":431,"path":432,"stem":433},"Wobble Card","\u002Fcomponents\u002Fcards\u002Fwobble-card","3.components\u002Fcards\u002Fwobble-card",{"title":435,"icon":436,"path":437,"stem":438,"children":439,"page":61},"Carousels","i-lucide-gallery-horizontal-end","\u002Fcomponents\u002Fcarousels","3.components\u002Fcarousels",[440,444,448],{"title":441,"path":442,"stem":443},"Carousel","\u002Fcomponents\u002Fcarousels\u002Fcarousel","3.components\u002Fcarousels\u002Fcarousel",{"title":445,"path":446,"stem":447},"Coverflow Carousel","\u002Fcomponents\u002Fcarousels\u002Fcoverflow-carousel","3.components\u002Fcarousels\u002Fcoverflow-carousel",{"title":449,"path":450,"stem":451},"Reviews Carousel","\u002Fcomponents\u002Fcarousels\u002Freviews-carousel","3.components\u002Fcarousels\u002Freviews-carousel",{"title":453,"icon":454,"path":455,"stem":456,"children":457,"page":61},"Directional","i-lucide-move-3d","\u002Fcomponents\u002Fdirectional","3.components\u002Fdirectional",[458,462],{"title":459,"path":460,"stem":461},"Direction Aware Hover","\u002Fcomponents\u002Fdirectional\u002Fdirection-aware-hover","3.components\u002Fdirectional\u002Fdirection-aware-hover",{"title":463,"path":464,"stem":465},"Direction Aware Hover New","\u002Fcomponents\u002Fdirectional\u002Fdirection-aware-hover-new","3.components\u002Fdirectional\u002Fdirection-aware-hover-new",{"title":467,"icon":468,"path":469,"stem":470,"children":471,"page":61},"Visual Effects","i-lucide-wand-sparkles","\u002Fcomponents\u002Feffects","3.components\u002Feffects",[472,476,480,484,488,492,496,500,504,508,512,516,520,524,528,532,536,540,544,548,552,556,560,564,568,572,576,580,584,588,592,596],{"title":473,"path":474,"stem":475},"Animated Beam","\u002Fcomponents\u002Feffects\u002Fanimated-beam","3.components\u002Feffects\u002Fanimated-beam",{"title":477,"path":478,"stem":479},"Arcade Pixel","\u002Fcomponents\u002Feffects\u002Farcade-pixel","3.components\u002Feffects\u002Farcade-pixel",{"title":481,"path":482,"stem":483},"ASCII Render","\u002Fcomponents\u002Feffects\u002Fascii-render","3.components\u002Feffects\u002Fascii-render",{"title":485,"path":486,"stem":487},"Border Beam","\u002Fcomponents\u002Feffects\u002Fborder-beam","3.components\u002Feffects\u002Fborder-beam",{"title":489,"path":490,"stem":491},"Border Trail","\u002Fcomponents\u002Feffects\u002Fborder-trail","3.components\u002Feffects\u002Fborder-trail",{"title":493,"path":494,"stem":495},"Confetti","\u002Fcomponents\u002Feffects\u002Fconfetti","3.components\u002Feffects\u002Fconfetti",{"title":497,"path":498,"stem":499},"Dither Chart","\u002Fcomponents\u002Feffects\u002Fdither-chart","3.components\u002Feffects\u002Fdither-chart",{"title":501,"path":502,"stem":503},"Dither Image","\u002Fcomponents\u002Feffects\u002Fdither-image","3.components\u002Feffects\u002Fdither-image",{"title":505,"path":506,"stem":507},"Div Grid","\u002Fcomponents\u002Feffects\u002Fdiv-grid","3.components\u002Feffects\u002Fdiv-grid",{"title":509,"path":510,"stem":511},"Drawing Cursor","\u002Fcomponents\u002Feffects\u002Fdrawing-cursor","3.components\u002Feffects\u002Fdrawing-cursor",{"title":513,"path":514,"stem":515},"Emboss Surface","\u002Fcomponents\u002Feffects\u002Femboss-surface","3.components\u002Feffects\u002Femboss-surface",{"title":517,"path":518,"stem":519},"Brightness slider","\u002Fcomponents\u002Feffects\u002Fexposure-slider","3.components\u002Feffects\u002Fexposure-slider",{"title":521,"path":522,"stem":523},"Flowing Stroke","\u002Fcomponents\u002Feffects\u002Fflowing-stroke","3.components\u002Feffects\u002Fflowing-stroke",{"title":525,"path":526,"stem":527},"Glow Effect","\u002Fcomponents\u002Feffects\u002Fglow-effect","3.components\u002Feffects\u002Fglow-effect",{"title":529,"path":530,"stem":531},"Glowing Effect","\u002Fcomponents\u002Feffects\u002Fglowing-effect","3.components\u002Feffects\u002Fglowing-effect",{"title":533,"path":534,"stem":535},"Gooey Filter","\u002Fcomponents\u002Feffects\u002Fgooey-filter","3.components\u002Feffects\u002Fgooey-filter",{"title":537,"path":538,"stem":539},"Gravity Stars","\u002Fcomponents\u002Feffects\u002Fgravity-stars","3.components\u002Feffects\u002Fgravity-stars",{"title":541,"path":542,"stem":543},"Iridescent foil","\u002Fcomponents\u002Feffects\u002Fholographic-foil","3.components\u002Feffects\u002Fholographic-foil",{"title":545,"path":546,"stem":547},"Icon Cloud","\u002Fcomponents\u002Feffects\u002Ficon-cloud","3.components\u002Feffects\u002Ficon-cloud",{"title":549,"path":550,"stem":551},"Liquid Metal","\u002Fcomponents\u002Feffects\u002Fliquid-metal","3.components\u002Feffects\u002Fliquid-metal",{"title":553,"path":554,"stem":555},"Mask Container","\u002Fcomponents\u002Feffects\u002Fmask-container","3.components\u002Feffects\u002Fmask-container",{"title":557,"path":558,"stem":559},"Orbiting Circles","\u002Fcomponents\u002Feffects\u002Forbiting-circles","3.components\u002Feffects\u002Forbiting-circles",{"title":561,"path":562,"stem":563},"Depth layers","\u002Fcomponents\u002Feffects\u002Fparallax-layers","3.components\u002Feffects\u002Fparallax-layers",{"title":565,"path":566,"stem":567},"Pixel Flow Field","\u002Fcomponents\u002Feffects\u002Fpixel-flow-field","3.components\u002Feffects\u002Fpixel-flow-field",{"title":569,"path":570,"stem":571},"Pixelated Canvas","\u002Fcomponents\u002Feffects\u002Fpixelated-canvas","3.components\u002Feffects\u002Fpixelated-canvas",{"title":573,"path":574,"stem":575},"Progressive Blur","\u002Fcomponents\u002Feffects\u002Fprogressive-blur","3.components\u002Feffects\u002Fprogressive-blur",{"title":577,"path":578,"stem":579},"Siri Orb","\u002Fcomponents\u002Feffects\u002Fsiri-orb","3.components\u002Feffects\u002Fsiri-orb",{"title":581,"path":582,"stem":583},"Spotlight","\u002Fcomponents\u002Feffects\u002Fspotlight","3.components\u002Feffects\u002Fspotlight",{"title":585,"path":586,"stem":587},"Squircle","\u002Fcomponents\u002Feffects\u002Fsquircle","3.components\u002Feffects\u002Fsquircle",{"title":589,"path":590,"stem":591},"SVG Clip Mask","\u002Fcomponents\u002Feffects\u002Fsvg-clip-mask","3.components\u002Feffects\u002Fsvg-clip-mask",{"title":593,"path":594,"stem":595},"Tracing Beam","\u002Fcomponents\u002Feffects\u002Ftracing-beam","3.components\u002Feffects\u002Ftracing-beam",{"title":597,"path":598,"stem":599},"Video Ambient","\u002Fcomponents\u002Feffects\u002Fvideo-ambient","3.components\u002Feffects\u002Fvideo-ambient",{"title":601,"icon":602,"path":603,"stem":604,"children":605,"page":61},"Forms","i-lucide-text-cursor-input","\u002Fcomponents\u002Fforms","3.components\u002Fforms",[606,610,614,618,622,626,630,634,638,642,646,650,654,658,662,666,670,674,678,682,686],{"title":607,"path":608,"stem":609},"Animated File Upload","\u002Fcomponents\u002Fforms\u002Fanimated-file-upload","3.components\u002Fforms\u002Fanimated-file-upload",{"title":611,"path":612,"stem":613},"Animated Input","\u002Fcomponents\u002Fforms\u002Fanimated-input","3.components\u002Fforms\u002Fanimated-input",{"title":615,"path":616,"stem":617},"Animated Number Input","\u002Fcomponents\u002Fforms\u002Fanimated-number-input","3.components\u002Fforms\u002Fanimated-number-input",{"title":619,"path":620,"stem":621},"Animated OTP Input","\u002Fcomponents\u002Fforms\u002Fanimated-otp-input","3.components\u002Fforms\u002Fanimated-otp-input",{"title":623,"path":624,"stem":625},"Animated Progress Bar","\u002Fcomponents\u002Fforms\u002Fanimated-progress-bar","3.components\u002Fforms\u002Fanimated-progress-bar",{"title":627,"path":628,"stem":629},"Animated Stepper","\u002Fcomponents\u002Fforms\u002Fanimated-stepper","3.components\u002Fforms\u002Fanimated-stepper",{"title":631,"path":632,"stem":633},"Animated Tags","\u002Fcomponents\u002Fforms\u002Fanimated-tags","3.components\u002Fforms\u002Fanimated-tags",{"title":635,"path":636,"stem":637},"Animated Toggle","\u002Fcomponents\u002Fforms\u002Fanimated-toggle","3.components\u002Fforms\u002Fanimated-toggle",{"title":639,"path":640,"stem":641},"Auth Form","\u002Fcomponents\u002Fforms\u002Fauth-form","3.components\u002Fforms\u002Fauth-form",{"title":643,"path":644,"stem":645},"Checkbox","\u002Fcomponents\u002Fforms\u002Fcheckbox","3.components\u002Fforms\u002Fcheckbox",{"title":647,"path":648,"stem":649},"Country Picker","\u002Fcomponents\u002Fforms\u002Fcountry-picker","3.components\u002Fforms\u002Fcountry-picker",{"title":651,"path":652,"stem":653},"Digit Roll","\u002Fcomponents\u002Fforms\u002Fdigit-roll","3.components\u002Fforms\u002Fdigit-roll",{"title":655,"path":656,"stem":657},"Duration Picker","\u002Fcomponents\u002Fforms\u002Fduration-picker","3.components\u002Fforms\u002Fduration-picker",{"title":659,"path":660,"stem":661},"Favicon Search","\u002Fcomponents\u002Fforms\u002Ffavicon-search","3.components\u002Fforms\u002Ffavicon-search",{"title":663,"path":664,"stem":665},"Float Input","\u002Fcomponents\u002Fforms\u002Ffloat-input","3.components\u002Fforms\u002Ffloat-input",{"title":667,"path":668,"stem":669},"Form","\u002Fcomponents\u002Fforms\u002Fform","3.components\u002Fforms\u002Fform",{"title":671,"path":672,"stem":673},"Morph Toggle","\u002Fcomponents\u002Fforms\u002Fmorph-toggle","3.components\u002Fforms\u002Fmorph-toggle",{"title":675,"path":676,"stem":677},"Radio Group","\u002Fcomponents\u002Fforms\u002Fradio-group","3.components\u002Fforms\u002Fradio-group",{"title":679,"path":680,"stem":681},"Scrubber","\u002Fcomponents\u002Fforms\u002Fscrubber","3.components\u002Fforms\u002Fscrubber",{"title":683,"path":684,"stem":685},"Social Selector","\u002Fcomponents\u002Fforms\u002Fsocial-selector","3.components\u002Fforms\u002Fsocial-selector",{"title":687,"path":688,"stem":689},"Swap Panel","\u002Fcomponents\u002Fforms\u002Fswap-panel","3.components\u002Fforms\u002Fswap-panel",{"title":691,"icon":692,"path":693,"stem":694,"children":695,"page":61},"Interactive","i-lucide-hand","\u002Fcomponents\u002Finteractive","3.components\u002Finteractive",[696,700,704,708,712,716,720,724,728,732,736,740,744,748,752,756,760,764,768,772,776,780,784,788,792,796,800,804,808,812,816,820,824,828,832,836,840,844,848,852,856,860,864,868,872],{"title":697,"path":698,"stem":699},"Accordion","\u002Fcomponents\u002Finteractive\u002Faccordion","3.components\u002Finteractive\u002Faccordion",{"title":701,"path":702,"stem":703},"Motion dialog","\u002Fcomponents\u002Finteractive\u002Fanimated-dialog","3.components\u002Finteractive\u002Fanimated-dialog",{"title":705,"path":706,"stem":707},"Animated Tooltip","\u002Fcomponents\u002Finteractive\u002Fanimated-tooltip","3.components\u002Finteractive\u002Fanimated-tooltip",{"title":709,"path":710,"stem":711},"Basic Dropdown","\u002Fcomponents\u002Finteractive\u002Fbasic-dropdown","3.components\u002Finteractive\u002Fbasic-dropdown",{"title":713,"path":714,"stem":715},"Basic Toast","\u002Fcomponents\u002Finteractive\u002Fbasic-toast","3.components\u002Finteractive\u002Fbasic-toast",{"title":717,"path":718,"stem":719},"Code Block","\u002Fcomponents\u002Finteractive\u002Fcode-block","3.components\u002Finteractive\u002Fcode-block",{"title":721,"path":722,"stem":723},"Code Comparison","\u002Fcomponents\u002Finteractive\u002Fcode-comparison","3.components\u002Finteractive\u002Fcode-comparison",{"title":725,"path":726,"stem":727},"Contribution Graph","\u002Fcomponents\u002Finteractive\u002Fcontribution-graph","3.components\u002Finteractive\u002Fcontribution-graph",{"title":729,"path":730,"stem":731},"Cool Mode","\u002Fcomponents\u002Finteractive\u002Fcool-mode","3.components\u002Finteractive\u002Fcool-mode",{"title":733,"path":734,"stem":735},"Count Badge","\u002Fcomponents\u002Finteractive\u002Fcount-badge","3.components\u002Finteractive\u002Fcount-badge",{"title":737,"path":738,"stem":739},"Dock","\u002Fcomponents\u002Finteractive\u002Fdock","3.components\u002Finteractive\u002Fdock",{"title":741,"path":742,"stem":743},"Drag and Drop","\u002Fcomponents\u002Finteractive\u002Fdrag-and-drop","3.components\u002Finteractive\u002Fdrag-and-drop",{"title":745,"path":746,"stem":747},"Drawer","\u002Fcomponents\u002Finteractive\u002Fdrawer","3.components\u002Finteractive\u002Fdrawer",{"title":749,"path":750,"stem":751},"Dynamic Group","\u002Fcomponents\u002Finteractive\u002Fdynamic-group","3.components\u002Finteractive\u002Fdynamic-group",{"title":753,"path":754,"stem":755},"Dynamic Island","\u002Fcomponents\u002Finteractive\u002Fdynamic-island","3.components\u002Finteractive\u002Fdynamic-island",{"title":757,"path":758,"stem":759},"Emoji Reaction","\u002Fcomponents\u002Finteractive\u002Femoji-reaction","3.components\u002Finteractive\u002Femoji-reaction",{"title":761,"path":762,"stem":763},"Fluid Hover Highlight","\u002Fcomponents\u002Finteractive\u002Ffluid-hover-highlight","3.components\u002Finteractive\u002Ffluid-hover-highlight",{"title":765,"path":766,"stem":767},"Folder Reveal","\u002Fcomponents\u002Finteractive\u002Ffolder-reveal","3.components\u002Finteractive\u002Ffolder-reveal",{"title":769,"path":770,"stem":771},"GitHub Stars Animation","\u002Fcomponents\u002Finteractive\u002Fgithub-stars-animation","3.components\u002Finteractive\u002Fgithub-stars-animation",{"title":773,"path":774,"stem":775},"Hover Expand","\u002Fcomponents\u002Finteractive\u002Fhover-expand","3.components\u002Finteractive\u002Fhover-expand",{"title":777,"path":778,"stem":779},"Hover Image List","\u002Fcomponents\u002Finteractive\u002Fhover-image-list","3.components\u002Finteractive\u002Fhover-image-list",{"title":781,"path":782,"stem":783},"Image compare","\u002Fcomponents\u002Finteractive\u002Fimage-comparison","3.components\u002Finteractive\u002Fimage-comparison",{"title":785,"path":786,"stem":787},"Image Metadata Preview","\u002Fcomponents\u002Finteractive\u002Fimage-metadata-preview","3.components\u002Finteractive\u002Fimage-metadata-preview",{"title":789,"path":790,"stem":791},"Inline Testimonials","\u002Fcomponents\u002Finteractive\u002Finline-testimonials","3.components\u002Finteractive\u002Finline-testimonials",{"title":793,"path":794,"stem":795},"Interactive Image Selector","\u002Fcomponents\u002Finteractive\u002Finteractive-image-selector","3.components\u002Finteractive\u002Finteractive-image-selector",{"title":797,"path":798,"stem":799},"Job Listing","\u002Fcomponents\u002Finteractive\u002Fjob-listing","3.components\u002Finteractive\u002Fjob-listing",{"title":801,"path":802,"stem":803},"Lens","\u002Fcomponents\u002Finteractive\u002Flens","3.components\u002Finteractive\u002Flens",{"title":805,"path":806,"stem":807},"Morph Icon","\u002Fcomponents\u002Finteractive\u002Fmorph-icon","3.components\u002Finteractive\u002Fmorph-icon",{"title":809,"path":810,"stem":811},"Morph Surface","\u002Fcomponents\u002Finteractive\u002Fmorph-surface","3.components\u002Finteractive\u002Fmorph-surface",{"title":813,"path":814,"stem":815},"Shape-shift dialog","\u002Fcomponents\u002Finteractive\u002Fmorphing-dialog","3.components\u002Finteractive\u002Fmorphing-dialog",{"title":817,"path":818,"stem":819},"Shape-shift popover","\u002Fcomponents\u002Finteractive\u002Fmorphing-popover","3.components\u002Finteractive\u002Fmorphing-popover",{"title":821,"path":822,"stem":823},"Notification Badge","\u002Fcomponents\u002Finteractive\u002Fnotification-badge","3.components\u002Finteractive\u002Fnotification-badge",{"title":825,"path":826,"stem":827},"Orbital Image Wheel","\u002Fcomponents\u002Finteractive\u002Forbital-image-wheel","3.components\u002Finteractive\u002Forbital-image-wheel",{"title":829,"path":830,"stem":831},"Phototab","\u002Fcomponents\u002Finteractive\u002Fphototab","3.components\u002Finteractive\u002Fphototab",{"title":833,"path":834,"stem":835},"Pinned List","\u002Fcomponents\u002Finteractive\u002Fpinned-list","3.components\u002Finteractive\u002Fpinned-list",{"title":837,"path":838,"stem":839},"Pixel Brush Canvas","\u002Fcomponents\u002Finteractive\u002Fpixel-brush-canvas","3.components\u002Finteractive\u002Fpixel-brush-canvas",{"title":841,"path":842,"stem":843},"Power Off Slide","\u002Fcomponents\u002Finteractive\u002Fpower-off-slide","3.components\u002Finteractive\u002Fpower-off-slide",{"title":845,"path":846,"stem":847},"Rich Popover","\u002Fcomponents\u002Finteractive\u002Frich-popover","3.components\u002Finteractive\u002Frich-popover",{"title":849,"path":850,"stem":851},"Scratch to Reveal","\u002Fcomponents\u002Finteractive\u002Fscratch-to-reveal","3.components\u002Finteractive\u002Fscratch-to-reveal",{"title":853,"path":854,"stem":855},"Time Machine Stack","\u002Fcomponents\u002Finteractive\u002Ftime-machine-stack","3.components\u002Finteractive\u002Ftime-machine-stack",{"title":857,"path":858,"stem":859},"Unlock Face ID","\u002Fcomponents\u002Finteractive\u002Funlock-face-id","3.components\u002Finteractive\u002Funlock-face-id",{"title":861,"path":862,"stem":863},"User Account Avatar","\u002Fcomponents\u002Finteractive\u002Fuser-account-avatar","3.components\u002Finteractive\u002Fuser-account-avatar",{"title":865,"path":866,"stem":867},"Vector Editor Toolbar","\u002Fcomponents\u002Finteractive\u002Fvector-editor-toolbar","3.components\u002Finteractive\u002Fvector-editor-toolbar",{"title":869,"path":870,"stem":871},"Video Modal","\u002Fcomponents\u002Finteractive\u002Fvideo-modal","3.components\u002Finteractive\u002Fvideo-modal",{"title":873,"path":874,"stem":875},"Zoomable Image","\u002Fcomponents\u002Finteractive\u002Fzoomable-image","3.components\u002Finteractive\u002Fzoomable-image",{"title":877,"icon":878,"path":879,"stem":880,"children":881,"page":61},"Layout","i-lucide-layout-grid","\u002Fcomponents\u002Flayout","3.components\u002Flayout",[882,886,890,894,898,902],{"title":883,"path":884,"stem":885},"Android","\u002Fcomponents\u002Flayout\u002Fandroid","3.components\u002Flayout\u002Fandroid",{"title":887,"path":888,"stem":889},"Animated Group","\u002Fcomponents\u002Flayout\u002Fanimated-group","3.components\u002Flayout\u002Fanimated-group",{"title":891,"path":892,"stem":893},"Breakpoint Indicator","\u002Fcomponents\u002Flayout\u002Fbreakpoint-indicator","3.components\u002Flayout\u002Fbreakpoint-indicator",{"title":895,"path":896,"stem":897},"Collision","\u002Fcomponents\u002Flayout\u002Fcollision","3.components\u002Flayout\u002Fcollision",{"title":899,"path":900,"stem":901},"iPhone 15 Pro","\u002Fcomponents\u002Flayout\u002Fiphone-15-pro","3.components\u002Flayout\u002Fiphone-15-pro",{"title":903,"path":904,"stem":905},"Safari","\u002Fcomponents\u002Flayout\u002Fsafari","3.components\u002Flayout\u002Fsafari",{"title":907,"icon":908,"path":909,"stem":910,"children":911,"page":61},"Loaders & Progress","i-lucide-loader-circle","\u002Fcomponents\u002Floaders","3.components\u002Floaders",[912,916,920,924,928,932],{"title":913,"path":914,"stem":915},"AI Loader","\u002Fcomponents\u002Floaders\u002Fai-loader","3.components\u002Floaders\u002Fai-loader",{"title":917,"path":918,"stem":919},"Circular Progress","\u002Fcomponents\u002Floaders\u002Fcircular-progress","3.components\u002Floaders\u002Fcircular-progress",{"title":921,"path":922,"stem":923},"Content Skeleton","\u002Fcomponents\u002Floaders\u002Fcontent-skeleton","3.components\u002Floaders\u002Fcontent-skeleton",{"title":925,"path":926,"stem":927},"Grid Loader","\u002Fcomponents\u002Floaders\u002Fgrid-loader","3.components\u002Floaders\u002Fgrid-loader",{"title":929,"path":930,"stem":931},"Motion Loader","\u002Fcomponents\u002Floaders\u002Fmotion-loader","3.components\u002Floaders\u002Fmotion-loader",{"title":933,"path":934,"stem":935},"Page Preloader","\u002Fcomponents\u002Floaders\u002Fpage-preloader","3.components\u002Floaders\u002Fpage-preloader",{"title":937,"icon":938,"path":939,"stem":940,"children":941,"page":61},"Interaction & Movement","i-lucide-move","\u002Fcomponents\u002Fmovement","3.components\u002Fmovement",[942,946,950,954,958,962,966],{"title":943,"path":944,"stem":945},"Cursor","\u002Fcomponents\u002Fmovement\u002Fcursor","3.components\u002Fmovement\u002Fcursor",{"title":947,"path":948,"stem":949},"Cursor Follow","\u002Fcomponents\u002Fmovement\u002Fcursor-follow","3.components\u002Fmovement\u002Fcursor-follow",{"title":951,"path":952,"stem":953},"Cursor Image Trail","\u002Fcomponents\u002Fmovement\u002Fcursor-image-trail","3.components\u002Fmovement\u002Fcursor-image-trail",{"title":955,"path":956,"stem":957},"Force Dot","\u002Fcomponents\u002Fmovement\u002Fforce-dot","3.components\u002Fmovement\u002Fforce-dot",{"title":959,"path":960,"stem":961},"Magnetic","\u002Fcomponents\u002Fmovement\u002Fmagnetic","3.components\u002Fmovement\u002Fmagnetic",{"title":963,"path":964,"stem":965},"Magnetic Field","\u002Fcomponents\u002Fmovement\u002Fmagnetic-field","3.components\u002Fmovement\u002Fmagnetic-field",{"title":967,"path":968,"stem":969},"Tilt","\u002Fcomponents\u002Fmovement\u002Ftilt","3.components\u002Fmovement\u002Ftilt",{"title":971,"icon":972,"path":973,"stem":974,"children":975,"page":61},"Navigation & Toolbars","i-lucide-menu","\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation",[976,980,984,988,992,996,1000],{"title":977,"path":978,"stem":979},"Breadcrumb","\u002Fcomponents\u002Fnavigation\u002Fbreadcrumb","3.components\u002Fnavigation\u002Fbreadcrumb",{"title":981,"path":982,"stem":983},"Expandable Navbar","\u002Fcomponents\u002Fnavigation\u002Fexpandable-navbar","3.components\u002Fnavigation\u002Fexpandable-navbar",{"title":985,"path":986,"stem":987},"File Tree","\u002Fcomponents\u002Fnavigation\u002Ffile-tree","3.components\u002Fnavigation\u002Ffile-tree",{"title":989,"path":990,"stem":991},"Floating Navbar","\u002Fcomponents\u002Fnavigation\u002Ffloating-navbar","3.components\u002Fnavigation\u002Ffloating-navbar",{"title":993,"path":994,"stem":995},"Pagination","\u002Fcomponents\u002Fnavigation\u002Fpagination","3.components\u002Fnavigation\u002Fpagination",{"title":997,"path":998,"stem":999},"Toolbar adaptive","\u002Fcomponents\u002Fnavigation\u002Ftoolbar-dynamic","3.components\u002Fnavigation\u002Ftoolbar-dynamic",{"title":1001,"path":1002,"stem":1003},"Toolbar collapsible","\u002Fcomponents\u002Fnavigation\u002Ftoolbar-expandable","3.components\u002Fnavigation\u002Ftoolbar-expandable",{"title":1005,"icon":1006,"path":1007,"stem":1008,"children":1009,"page":61},"Scroll & Viewport","i-lucide-scroll-text","\u002Fcomponents\u002Fscroll","3.components\u002Fscroll",[1010,1014,1018,1022,1026,1030,1034,1038],{"title":1011,"path":1012,"stem":1013},"In View","\u002Fcomponents\u002Fscroll\u002Fin-view","3.components\u002Fscroll\u002Fin-view",{"title":1015,"path":1016,"stem":1017},"Infinite Slider","\u002Fcomponents\u002Fscroll\u002Finfinite-slider","3.components\u002Fscroll\u002Finfinite-slider",{"title":1019,"path":1020,"stem":1021},"Kinetic Type Scroll","\u002Fcomponents\u002Fscroll\u002Fkinetic-type-scroll","3.components\u002Fscroll\u002Fkinetic-type-scroll",{"title":1023,"path":1024,"stem":1025},"Marquee","\u002Fcomponents\u002Fscroll\u002Fmarquee","3.components\u002Fscroll\u002Fmarquee",{"title":1027,"path":1028,"stem":1029},"Scroll Image Reveal","\u002Fcomponents\u002Fscroll\u002Fscroll-image-reveal","3.components\u002Fscroll\u002Fscroll-image-reveal",{"title":1031,"path":1032,"stem":1033},"Scroll Progress","\u002Fcomponents\u002Fscroll\u002Fscroll-progress","3.components\u002Fscroll\u002Fscroll-progress",{"title":1035,"path":1036,"stem":1037},"Scroll Velocity","\u002Fcomponents\u002Fscroll\u002Fscroll-velocity","3.components\u002Fscroll\u002Fscroll-velocity",{"title":1039,"path":1040,"stem":1041},"Svg Draw On Scroll","\u002Fcomponents\u002Fscroll\u002Fsvg-draw-on-scroll","3.components\u002Fscroll\u002Fsvg-draw-on-scroll",{"title":1043,"icon":1044,"path":1045,"stem":1046,"children":1047,"page":61},"Text & Numbers","i-lucide-type","\u002Fcomponents\u002Ftext","3.components\u002Ftext",[1048,1052,1056,1060,1064,1068,1072,1076,1080,1084,1088,1092,1096,1100,1104,1108,1112,1116,1120,1124,1128,1132,1136,1140,1144,1148,1152,1156,1160,1164,1168,1172,1176,1180,1184,1188,1192,1196,1200,1204,1208,1212,1216,1220,1224,1228,1232,1236,1240,1244,1248,1252,1256,1260,1264],{"title":1049,"path":1050,"stem":1051},"Animated Avatar Group","\u002Fcomponents\u002Ftext\u002Fanimated-avatar-group","3.components\u002Ftext\u002Fanimated-avatar-group",{"title":1053,"path":1054,"stem":1055},"Animated List","\u002Fcomponents\u002Ftext\u002Fanimated-list","3.components\u002Ftext\u002Fanimated-list",{"title":1057,"path":1058,"stem":1059},"Animated Number","\u002Fcomponents\u002Ftext\u002Fanimated-number","3.components\u002Ftext\u002Fanimated-number",{"title":1061,"path":1062,"stem":1063},"Blur Out Up","\u002Fcomponents\u002Ftext\u002Fblur-out-up","3.components\u002Ftext\u002Fblur-out-up",{"title":1065,"path":1066,"stem":1067},"Bottom Up Letters","\u002Fcomponents\u002Ftext\u002Fbottom-up-letters","3.components\u002Ftext\u002Fbottom-up-letters",{"title":1069,"path":1070,"stem":1071},"Comic Text","\u002Fcomponents\u002Ftext\u002Fcomic-text","3.components\u002Ftext\u002Fcomic-text",{"title":1073,"path":1074,"stem":1075},"Counting Number","\u002Fcomponents\u002Ftext\u002Fcounting-number","3.components\u002Ftext\u002Fcounting-number",{"title":1077,"path":1078,"stem":1079},"Depth Parallax Words","\u002Fcomponents\u002Ftext\u002Fdepth-parallax-words","3.components\u002Ftext\u002Fdepth-parallax-words",{"title":1081,"path":1082,"stem":1083},"Fade Through","\u002Fcomponents\u002Ftext\u002Ffade-through","3.components\u002Ftext\u002Ffade-through",{"title":1085,"path":1086,"stem":1087},"Focus Blur Resolve","\u002Fcomponents\u002Ftext\u002Ffocus-blur-resolve","3.components\u002Ftext\u002Ffocus-blur-resolve",{"title":1089,"path":1090,"stem":1091},"Gravity Letters","\u002Fcomponents\u002Ftext\u002Fgravity-letters","3.components\u002Ftext\u002Fgravity-letters",{"title":1093,"path":1094,"stem":1095},"Kinetic Center Build","\u002Fcomponents\u002Ftext\u002Fkinetic-center-build","3.components\u002Ftext\u002Fkinetic-center-build",{"title":1097,"path":1098,"stem":1099},"Line By Line Slide","\u002Fcomponents\u002Ftext\u002Fline-by-line-slide","3.components\u002Ftext\u002Fline-by-line-slide",{"title":1101,"path":1102,"stem":1103},"Mask Reveal Up","\u002Fcomponents\u002Ftext\u002Fmask-reveal-up","3.components\u002Ftext\u002Fmask-reveal-up",{"title":1105,"path":1106,"stem":1107},"Micro Scale Fade","\u002Fcomponents\u002Ftext\u002Fmicro-scale-fade","3.components\u002Ftext\u002Fmicro-scale-fade",{"title":1109,"path":1110,"stem":1111},"Number Flow","\u002Fcomponents\u002Ftext\u002Fnumber-flow","3.components\u002Ftext\u002Fnumber-flow",{"title":1113,"path":1114,"stem":1115},"Per Character Rise","\u002Fcomponents\u002Ftext\u002Fper-character-rise","3.components\u002Ftext\u002Fper-character-rise",{"title":1117,"path":1118,"stem":1119},"Per Word Crossfade","\u002Fcomponents\u002Ftext\u002Fper-word-crossfade","3.components\u002Ftext\u002Fper-word-crossfade",{"title":1121,"path":1122,"stem":1123},"Perspective Text 3D","\u002Fcomponents\u002Ftext\u002Fperspective-text-3d","3.components\u002Ftext\u002Fperspective-text-3d",{"title":1125,"path":1126,"stem":1127},"Ransom Note","\u002Fcomponents\u002Ftext\u002Fransom-note","3.components\u002Ftext\u002Fransom-note",{"title":1129,"path":1130,"stem":1131},"Rolling Text","\u002Fcomponents\u002Ftext\u002Frolling-text","3.components\u002Ftext\u002Frolling-text",{"title":1133,"path":1134,"stem":1135},"Scale Down Fade","\u002Fcomponents\u002Ftext\u002Fscale-down-fade","3.components\u002Ftext\u002Fscale-down-fade",{"title":1137,"path":1138,"stem":1139},"Scroll Reveal Paragraph","\u002Fcomponents\u002Ftext\u002Fscroll-reveal-paragraph","3.components\u002Ftext\u002Fscroll-reveal-paragraph",{"title":1141,"path":1142,"stem":1143},"Shared Axis","\u002Fcomponents\u002Ftext\u002Fshared-axis","3.components\u002Ftext\u002Fshared-axis",{"title":1145,"path":1146,"stem":1147},"Shimmer Sweep","\u002Fcomponents\u002Ftext\u002Fshimmer-sweep","3.components\u002Ftext\u002Fshimmer-sweep",{"title":1149,"path":1150,"stem":1151},"Shine Text","\u002Fcomponents\u002Ftext\u002Fshine-text","3.components\u002Ftext\u002Fshine-text",{"title":1153,"path":1154,"stem":1155},"Short Lower in","\u002Fcomponents\u002Ftext\u002Fshort-slide-down","3.components\u002Ftext\u002Fshort-slide-down",{"title":1157,"path":1158,"stem":1159},"Short Slide Right","\u002Fcomponents\u002Ftext\u002Fshort-slide-right","3.components\u002Ftext\u002Fshort-slide-right",{"title":1161,"path":1162,"stem":1163},"Sliding Number","\u002Fcomponents\u002Ftext\u002Fsliding-number","3.components\u002Ftext\u002Fsliding-number",{"title":1165,"path":1166,"stem":1167},"Soft Blur In","\u002Fcomponents\u002Ftext\u002Fsoft-blur-in","3.components\u002Ftext\u002Fsoft-blur-in",{"title":1169,"path":1170,"stem":1171},"Sparkles Text","\u002Fcomponents\u002Ftext\u002Fsparkles-text","3.components\u002Ftext\u002Fsparkles-text",{"title":1173,"path":1174,"stem":1175},"Spinning Text","\u002Fcomponents\u002Ftext\u002Fspinning-text","3.components\u002Ftext\u002Fspinning-text",{"title":1177,"path":1178,"stem":1179},"Spring Scale In","\u002Fcomponents\u002Ftext\u002Fspring-scale-in","3.components\u002Ftext\u002Fspring-scale-in",{"title":1181,"path":1182,"stem":1183},"Stagger From Center","\u002Fcomponents\u002Ftext\u002Fstagger-from-center","3.components\u002Ftext\u002Fstagger-from-center",{"title":1185,"path":1186,"stem":1187},"Stagger From Edges","\u002Fcomponents\u002Ftext\u002Fstagger-from-edges","3.components\u002Ftext\u002Fstagger-from-edges",{"title":1189,"path":1190,"stem":1191},"Text Animate","\u002Fcomponents\u002Ftext\u002Ftext-animate","3.components\u002Ftext\u002Ftext-animate",{"title":1193,"path":1194,"stem":1195},"Text motion","\u002Fcomponents\u002Ftext\u002Ftext-effect","3.components\u002Ftext\u002Ftext-effect",{"title":1197,"path":1198,"stem":1199},"Text Glitch","\u002Fcomponents\u002Ftext\u002Ftext-glitch","3.components\u002Ftext\u002Ftext-glitch",{"title":1201,"path":1202,"stem":1203},"Text Glitch New","\u002Fcomponents\u002Ftext\u002Ftext-glitch-new","3.components\u002Ftext\u002Ftext-glitch-new",{"title":1205,"path":1206,"stem":1207},"Text Gradient","\u002Fcomponents\u002Ftext\u002Ftext-gradient","3.components\u002Ftext\u002Ftext-gradient",{"title":1209,"path":1210,"stem":1211},"Text Highlighter","\u002Fcomponents\u002Ftext\u002Ftext-highlighter","3.components\u002Ftext\u002Ftext-highlighter",{"title":1213,"path":1214,"stem":1215},"Text Loop","\u002Fcomponents\u002Ftext\u002Ftext-loop","3.components\u002Ftext\u002Ftext-loop",{"title":1217,"path":1218,"stem":1219},"Text Morph","\u002Fcomponents\u002Ftext\u002Ftext-morph","3.components\u002Ftext\u002Ftext-morph",{"title":1221,"path":1222,"stem":1223},"Text Reveal","\u002Fcomponents\u002Ftext\u002Ftext-reveal","3.components\u002Ftext\u002Ftext-reveal",{"title":1225,"path":1226,"stem":1227},"Text Roll","\u002Fcomponents\u002Ftext\u002Ftext-roll","3.components\u002Ftext\u002Ftext-roll",{"title":1229,"path":1230,"stem":1231},"Text Scramble","\u002Fcomponents\u002Ftext\u002Ftext-scramble","3.components\u002Ftext\u002Ftext-scramble",{"title":1233,"path":1234,"stem":1235},"Text Shimmer","\u002Fcomponents\u002Ftext\u002Ftext-shimmer","3.components\u002Ftext\u002Ftext-shimmer",{"title":1237,"path":1238,"stem":1239},"Text Shimmer Wave","\u002Fcomponents\u002Ftext\u002Ftext-shimmer-wave","3.components\u002Ftext\u002Ftext-shimmer-wave",{"title":1241,"path":1242,"stem":1243},"Top Down Letters","\u002Fcomponents\u002Ftext\u002Ftop-down-letters","3.components\u002Ftext\u002Ftop-down-letters",{"title":1245,"path":1246,"stem":1247},"True Focus","\u002Fcomponents\u002Ftext\u002Ftrue-focus","3.components\u002Ftext\u002Ftrue-focus",{"title":1249,"path":1250,"stem":1251},"Typing Text","\u002Fcomponents\u002Ftext\u002Ftyping-text","3.components\u002Ftext\u002Ftyping-text",{"title":1253,"path":1254,"stem":1255},"Variable Proximity","\u002Fcomponents\u002Ftext\u002Fvariable-proximity","3.components\u002Ftext\u002Fvariable-proximity",{"title":1257,"path":1258,"stem":1259},"Video Text","\u002Fcomponents\u002Ftext\u002Fvideo-text","3.components\u002Ftext\u002Fvideo-text",{"title":1261,"path":1262,"stem":1263},"Wave Text","\u002Fcomponents\u002Ftext\u002Fwave-text","3.components\u002Ftext\u002Fwave-text",{"title":1265,"path":1266,"stem":1267},"Word Rotate","\u002Fcomponents\u002Ftext\u002Fword-rotate","3.components\u002Ftext\u002Fword-rotate",{"title":1269,"icon":1270,"path":1271,"stem":1272,"children":1273,"page":61},"Transitions","i-lucide-git-compare","\u002Fcomponents\u002Ftransitions","3.components\u002Ftransitions",[1274,1278,1282,1286,1290,1294],{"title":1275,"path":1276,"stem":1277},"Aperture Blur Transition","\u002Fcomponents\u002Ftransitions\u002Faperture-blur-transition","3.components\u002Ftransitions\u002Faperture-blur-transition",{"title":1279,"path":1280,"stem":1281},"Chroma Blur Transition","\u002Fcomponents\u002Ftransitions\u002Fchroma-blur-transition","3.components\u002Ftransitions\u002Fchroma-blur-transition",{"title":1283,"path":1284,"stem":1285},"Prism Sweep Transition","\u002Fcomponents\u002Ftransitions\u002Fprism-sweep-transition","3.components\u002Ftransitions\u002Fprism-sweep-transition",{"title":1287,"path":1288,"stem":1289},"SDF Blob Transition","\u002Fcomponents\u002Ftransitions\u002Fsdf-blob-transition","3.components\u002Ftransitions\u002Fsdf-blob-transition",{"title":1291,"path":1292,"stem":1293},"Shader Reveal Transition","\u002Fcomponents\u002Ftransitions\u002Fshader-reveal-transition","3.components\u002Ftransitions\u002Fshader-reveal-transition",{"title":1295,"path":1296,"stem":1297},"Transition Panel","\u002Fcomponents\u002Ftransitions\u002Ftransition-panel","3.components\u002Ftransitions\u002Ftransition-panel",{"title":1299,"path":1300,"stem":1301,"children":1302,"icon":1320},"Composables","\u002Fcomposables","4.composables\u002Findex",[1303,1304,1308,1312,1316],{"title":1299,"path":1300,"stem":1301},{"title":1305,"path":1306,"stem":1307},"useCanvasCursor","\u002Fcomposables\u002Fuse-canvas-cursor","4.composables\u002Fuse-canvas-cursor",{"title":1309,"path":1310,"stem":1311},"useFluidCursor","\u002Fcomposables\u002Fuse-fluid-cursor","4.composables\u002Fuse-fluid-cursor",{"title":1313,"path":1314,"stem":1315},"useMotionBlockUI","\u002Fcomposables\u002Fuse-motion-block-ui","4.composables\u002Fuse-motion-block-ui",{"title":1317,"path":1318,"stem":1319},"useThemeColor","\u002Fcomposables\u002Fuse-theme-color","4.composables\u002Fuse-theme-color","i-lucide-puzzle",{"title":1322,"path":1323,"stem":1324,"children":1325,"icon":1327},"Guides","\u002Fguides","5.guides\u002Findex",[1326],{"title":1322,"path":1323,"stem":1324},"i-lucide-book-open",{"title":1329,"icon":1330,"path":1331,"stem":1332,"children":1333},"Blocks","i-lucide-blocks","\u002Fblocks","6.blocks",[1334,1336,1349,1358,1371,1384,1400,1413,1422,1431,1444,1453,1466,1475],{"title":1329,"path":1331,"stem":1335},"6.blocks\u002Findex",{"title":1337,"path":1338,"stem":1339,"children":1340,"page":61},"Blog","\u002Fblocks\u002Fblog","6.blocks\u002Fblog",[1341,1345],{"title":1342,"path":1343,"stem":1344},"Article Page","\u002Fblocks\u002Fblog\u002Farticle-page","6.blocks\u002Fblog\u002Farticle-page",{"title":1346,"path":1347,"stem":1348},"Blog Listing","\u002Fblocks\u002Fblog\u002Fblog-listing","6.blocks\u002Fblog\u002Fblog-listing",{"title":1350,"path":1351,"stem":1352,"children":1353,"page":61},"Cta","\u002Fblocks\u002Fcta","6.blocks\u002Fcta",[1354],{"title":1355,"path":1356,"stem":1357},"Centered CTA","\u002Fblocks\u002Fcta\u002Fcentered-cta","6.blocks\u002Fcta\u002Fcentered-cta",{"title":1359,"path":1360,"stem":1361,"children":1362,"page":61},"Dashboard Components","\u002Fblocks\u002Fdashboard-components","6.blocks\u002Fdashboard-components",[1363,1367],{"title":1364,"path":1365,"stem":1366},"Analytics Dashboard","\u002Fblocks\u002Fdashboard-components\u002Fanalytics-dashboard","6.blocks\u002Fdashboard-components\u002Fanalytics-dashboard",{"title":1368,"path":1369,"stem":1370},"User Management Table","\u002Fblocks\u002Fdashboard-components\u002Fuser-management","6.blocks\u002Fdashboard-components\u002Fuser-management",{"title":1372,"path":1373,"stem":1374,"children":1375,"page":61},"E Commerce","\u002Fblocks\u002Fe-commerce","6.blocks\u002Fe-commerce",[1376,1380],{"title":1377,"path":1378,"stem":1379},"Product Grid","\u002Fblocks\u002Fe-commerce\u002Fproduct-grid","6.blocks\u002Fe-commerce\u002Fproduct-grid",{"title":1381,"path":1382,"stem":1383},"Shopping Cart","\u002Fblocks\u002Fe-commerce\u002Fshopping-cart","6.blocks\u002Fe-commerce\u002Fshopping-cart",{"title":1385,"path":1386,"stem":1387,"children":1388,"page":61},"Featured Components","\u002Fblocks\u002Ffeatured-components","6.blocks\u002Ffeatured-components",[1389,1393,1396],{"title":1390,"path":1391,"stem":1392},"Animated Gradient","\u002Fblocks\u002Ffeatured-components\u002Fanimated-gradient","6.blocks\u002Ffeatured-components\u002Fanimated-gradient",{"title":167,"path":1394,"stem":1395},"\u002Fblocks\u002Ffeatured-components\u002Fanimated-spotlight","6.blocks\u002Ffeatured-components\u002Fanimated-spotlight",{"title":1397,"path":1398,"stem":1399},"Ripple Effect","\u002Fblocks\u002Ffeatured-components\u002Fripple-effect","6.blocks\u002Ffeatured-components\u002Fripple-effect",{"title":1401,"path":1402,"stem":1403,"children":1404,"page":61},"Features","\u002Fblocks\u002Ffeatures","6.blocks\u002Ffeatures",[1405,1409],{"title":1406,"path":1407,"stem":1408},"Feature Grid","\u002Fblocks\u002Ffeatures\u002Ffeature-grid","6.blocks\u002Ffeatures\u002Ffeature-grid",{"title":1410,"path":1411,"stem":1412},"Glare Card Features","\u002Fblocks\u002Ffeatures\u002Fglare-card-features","6.blocks\u002Ffeatures\u002Fglare-card-features",{"title":1414,"path":1415,"stem":1416,"children":1417,"page":61},"Footers","\u002Fblocks\u002Ffooters","6.blocks\u002Ffooters",[1418],{"title":1419,"path":1420,"stem":1421},"Multi-column Footer","\u002Fblocks\u002Ffooters\u002Fmulti-column-footer","6.blocks\u002Ffooters\u002Fmulti-column-footer",{"title":1423,"path":1424,"stem":1425,"children":1426,"page":61},"Hero Sections","\u002Fblocks\u002Fhero-sections","6.blocks\u002Fhero-sections",[1427],{"title":1428,"path":1429,"stem":1430},"Gradient Hero","\u002Fblocks\u002Fhero-sections\u002Fgradient-hero","6.blocks\u002Fhero-sections\u002Fgradient-hero",{"title":1432,"path":1433,"stem":1434,"children":1435,"page":61},"Landing Page","\u002Fblocks\u002Flanding-page","6.blocks\u002Flanding-page",[1436,1440],{"title":1437,"path":1438,"stem":1439},"Feature Showcase","\u002Fblocks\u002Flanding-page\u002Ffeature-showcase","6.blocks\u002Flanding-page\u002Ffeature-showcase",{"title":1441,"path":1442,"stem":1443},"Testimonial Carousel","\u002Fblocks\u002Flanding-page\u002Ftestimonial-carousel","6.blocks\u002Flanding-page\u002Ftestimonial-carousel",{"title":1445,"path":1446,"stem":1447,"children":1448,"page":61},"Navigation","\u002Fblocks\u002Fnavigation","6.blocks\u002Fnavigation",[1449],{"title":1450,"path":1451,"stem":1452},"Modern Navbar","\u002Fblocks\u002Fnavigation\u002Fmodern-navbar","6.blocks\u002Fnavigation\u002Fmodern-navbar",{"title":1454,"path":1455,"stem":1456,"children":1457,"page":61},"Portfolio","\u002Fblocks\u002Fportfolio","6.blocks\u002Fportfolio",[1458,1462],{"title":1459,"path":1460,"stem":1461},"Case Study","\u002Fblocks\u002Fportfolio\u002Fcase-study","6.blocks\u002Fportfolio\u002Fcase-study",{"title":1463,"path":1464,"stem":1465},"Project Gallery","\u002Fblocks\u002Fportfolio\u002Fproject-gallery","6.blocks\u002Fportfolio\u002Fproject-gallery",{"title":1467,"path":1468,"stem":1469,"children":1470,"page":61},"Pricing","\u002Fblocks\u002Fpricing","6.blocks\u002Fpricing",[1471],{"title":1472,"path":1473,"stem":1474},"Pricing Cards","\u002Fblocks\u002Fpricing\u002Fpricing-cards","6.blocks\u002Fpricing\u002Fpricing-cards",{"title":1476,"path":1477,"stem":1478,"children":1479,"page":61},"Testimonials","\u002Fblocks\u002Ftestimonials","6.blocks\u002Ftestimonials",[1480],{"title":1441,"path":1481,"stem":1482},"\u002Fblocks\u002Ftestimonials\u002Ftestimonial-carousel","6.blocks\u002Ftestimonials\u002Ftestimonial-carousel",{"title":1484,"icon":1485,"path":1486,"stem":1487,"children":1488},"Templates","i-lucide-layout-template","\u002Ftemplates","7.templates",[1489,1491,1495,1499,1503],{"title":1484,"path":1486,"stem":1490},"7.templates\u002Findex",{"title":1492,"path":1493,"stem":1494},"Basic Landing Page","\u002Ftemplates\u002Fbasic-landing-page","7.templates\u002F2.basic-landing-page",{"title":1496,"path":1497,"stem":1498},"SaaS Landing Page","\u002Ftemplates\u002Fsaas-landing-page","7.templates\u002F3.saas-landing-page",{"title":1500,"path":1501,"stem":1502},"E-commerce Landing Page","\u002Ftemplates\u002Fecommerce-landing-page","7.templates\u002F4.ecommerce-landing-page",{"title":1504,"path":1505,"stem":1506},"Creative Agency Landing Page","\u002Ftemplates\u002Fcreative-agency-landing-page","7.templates\u002F5.creative-agency-landing-page",{"title":1508,"path":1509,"stem":1510,"children":1511,"icon":1513},"API Reference","\u002Fapi-reference","8.api-reference\u002Findex",[1512],{"title":1508,"path":1509,"stem":1510},"i-lucide-braces",{"id":1515,"title":717,"body":1516,"description":2872,"extension":2873,"links":2874,"meta":2875,"navigation":1683,"path":718,"seo":2876,"stem":719,"__hash__":2877},"docs\u002F3.components\u002Finteractive\u002Fcode-block.md",{"type":1517,"value":1518,"toc":2863},"minimark",[1519,1523,1526,1538,1545,1549,1561,1894,1898,1911,2603,2607,2621,2625,2649,2653,2671,2677,2740,2744,2763,2774,2781,2785,2839,2859],[1520,1521,1522],"p",{},"A dark code panel with a language label in the header, a copy button that flips\nto \"Copied!\" for two seconds, and syntax highlighting from Shiki. The panel\nanimates in once on mount; the copy confirmation swaps with a short vertical\nslide.",[1520,1524,1525],{},"Highlighting is done in the browser. On mount the component creates a Shiki\nhighlighter for exactly the theme and language it was given, converts the code to\nHTML, and injects the result. That means the markup is fully highlighted by the\ntime it appears rather than flashing plain text and recolouring — at the cost of\nthe panel being empty on the server render.",[1520,1527,1528,1529,1533,1534,1537],{},"Because it goes through Shiki, ",[1530,1531,1532],"code",{},"language"," has to be a language Shiki knows and a\ntheme it ships. If either is missing, the component falls back to a plain escaped\n",[1530,1535,1536],{},"\u003Cpre>"," in the same dark shell rather than throwing, so a wrong language degrades\nto readable-but-unhighlighted code.",[1520,1539,1540,1541,1544],{},"The ",[1530,1542,1543],{},"showLineNumbers"," gutter is a separate absolutely-positioned column rather\nthan Shiki's own line rendering, which keeps the gutter out of the injected HTML.\nIt only appears once highlighting has produced content, so on the server render\nand during the highlighter's async load the panel renders without it.",[1546,1547,16],"h2",{"id":1548},"usage",[1520,1550,1551,1552,1554,1555,1557,1558,1560],{},"Pass ",[1530,1553,1530],{}," as a string and ",[1530,1556,1532],{}," as a Shiki language id. Toggle\n",[1530,1559,1543],{}," when the snippet is long enough that position matters.",[1562,1563,1565,1578],"code-preview",{"label":1564},"Preview",[1566,1567,1573,1574],"div",{"className":1568},[1569,1570,1571,1572],"flex","justify-center","w-full","h-full","  ",[1575,1576],"component-example",{"name":1577},"code-block-basic",[1579,1580,1582],"template",{"v-slot:code":1581},"",[1583,1584,1588],"pre",{"className":1585,"code":1586,"language":1587,"meta":1581,"style":1581},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv class=\"flex w-full max-w-xl flex-col gap-4\">\n    \u003CUSwitch\n      v-model=\"withNumbers\"\n      label=\"Show line numbers\"\n    \u002F>\n\n    \u003CMCodeBlock\n      :code=\"snippet\"\n      language=\"ts\"\n      :show-line-numbers=\"withNumbers\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst withNumbers = ref(true)\n\nconst snippet = `const items = ref([\n  { id: 1, label: 'Style tokens' },\n  { id: 2, label: 'Component audit' },\n])\n\nfunction onChange(next: Item[]) {\n  items.value = [...next]\n}`\n\u003C\u002Fscript>\n","vue",[1530,1589,1590,1605,1631,1640,1657,1672,1678,1685,1693,1710,1725,1741,1746,1756,1766,1771,1795,1820,1825,1841,1847,1853,1859,1864,1870,1876,1885],{"__ignoreMap":1581},[1591,1592,1595,1599,1602],"span",{"class":1593,"line":1594},"line",1,[1591,1596,1598],{"class":1597},"sMK4o","\u003C",[1591,1600,1579],{"class":1601},"swJcz",[1591,1603,1604],{"class":1597},">\n",[1591,1606,1608,1611,1613,1617,1620,1623,1627,1629],{"class":1593,"line":1607},2,[1591,1609,1610],{"class":1597},"  \u003C",[1591,1612,1566],{"class":1601},[1591,1614,1616],{"class":1615},"spNyl"," class",[1591,1618,1619],{"class":1597},"=",[1591,1621,1622],{"class":1597},"\"",[1591,1624,1626],{"class":1625},"sfazB","flex w-full max-w-xl flex-col gap-4",[1591,1628,1622],{"class":1597},[1591,1630,1604],{"class":1597},[1591,1632,1634,1637],{"class":1593,"line":1633},3,[1591,1635,1636],{"class":1597},"    \u003C",[1591,1638,1639],{"class":1601},"USwitch\n",[1591,1641,1643,1646,1648,1650,1654],{"class":1593,"line":1642},4,[1591,1644,1645],{"class":1615},"      v-model",[1591,1647,1619],{"class":1597},[1591,1649,1622],{"class":1597},[1591,1651,1653],{"class":1652},"sTEyZ","withNumbers",[1591,1655,1656],{"class":1597},"\"\n",[1591,1658,1660,1663,1665,1667,1670],{"class":1593,"line":1659},5,[1591,1661,1662],{"class":1615},"      label",[1591,1664,1619],{"class":1597},[1591,1666,1622],{"class":1597},[1591,1668,1669],{"class":1625},"Show line numbers",[1591,1671,1656],{"class":1597},[1591,1673,1675],{"class":1593,"line":1674},6,[1591,1676,1677],{"class":1597},"    \u002F>\n",[1591,1679,1681],{"class":1593,"line":1680},7,[1591,1682,1684],{"emptyLinePlaceholder":1683},true,"\n",[1591,1686,1688,1690],{"class":1593,"line":1687},8,[1591,1689,1636],{"class":1597},[1591,1691,1692],{"class":1601},"MCodeBlock\n",[1591,1694,1696,1699,1701,1703,1705,1708],{"class":1593,"line":1695},9,[1591,1697,1698],{"class":1597},"      :",[1591,1700,1530],{"class":1615},[1591,1702,1619],{"class":1597},[1591,1704,1622],{"class":1597},[1591,1706,1707],{"class":1652},"snippet",[1591,1709,1656],{"class":1597},[1591,1711,1713,1716,1718,1720,1723],{"class":1593,"line":1712},10,[1591,1714,1715],{"class":1615},"      language",[1591,1717,1619],{"class":1597},[1591,1719,1622],{"class":1597},[1591,1721,1722],{"class":1625},"ts",[1591,1724,1656],{"class":1597},[1591,1726,1728,1730,1733,1735,1737,1739],{"class":1593,"line":1727},11,[1591,1729,1698],{"class":1597},[1591,1731,1732],{"class":1615},"show-line-numbers",[1591,1734,1619],{"class":1597},[1591,1736,1622],{"class":1597},[1591,1738,1653],{"class":1652},[1591,1740,1656],{"class":1597},[1591,1742,1744],{"class":1593,"line":1743},12,[1591,1745,1677],{"class":1597},[1591,1747,1749,1752,1754],{"class":1593,"line":1748},13,[1591,1750,1751],{"class":1597},"  \u003C\u002F",[1591,1753,1566],{"class":1601},[1591,1755,1604],{"class":1597},[1591,1757,1759,1762,1764],{"class":1593,"line":1758},14,[1591,1760,1761],{"class":1597},"\u003C\u002F",[1591,1763,1579],{"class":1601},[1591,1765,1604],{"class":1597},[1591,1767,1769],{"class":1593,"line":1768},15,[1591,1770,1684],{"emptyLinePlaceholder":1683},[1591,1772,1774,1776,1779,1782,1785,1787,1789,1791,1793],{"class":1593,"line":1773},16,[1591,1775,1598],{"class":1597},[1591,1777,1778],{"class":1601},"script",[1591,1780,1781],{"class":1615}," setup",[1591,1783,1784],{"class":1615}," lang",[1591,1786,1619],{"class":1597},[1591,1788,1622],{"class":1597},[1591,1790,1722],{"class":1625},[1591,1792,1622],{"class":1597},[1591,1794,1604],{"class":1597},[1591,1796,1798,1801,1804,1806,1810,1813,1817],{"class":1593,"line":1797},17,[1591,1799,1800],{"class":1615},"const",[1591,1802,1803],{"class":1652}," withNumbers ",[1591,1805,1619],{"class":1597},[1591,1807,1809],{"class":1808},"s2Zo4"," ref",[1591,1811,1812],{"class":1652},"(",[1591,1814,1816],{"class":1815},"sfNiH","true",[1591,1818,1819],{"class":1652},")\n",[1591,1821,1823],{"class":1593,"line":1822},18,[1591,1824,1684],{"emptyLinePlaceholder":1683},[1591,1826,1828,1830,1833,1835,1838],{"class":1593,"line":1827},19,[1591,1829,1800],{"class":1615},[1591,1831,1832],{"class":1652}," snippet ",[1591,1834,1619],{"class":1597},[1591,1836,1837],{"class":1597}," `",[1591,1839,1840],{"class":1625},"const items = ref([\n",[1591,1842,1844],{"class":1593,"line":1843},20,[1591,1845,1846],{"class":1625},"  { id: 1, label: 'Style tokens' },\n",[1591,1848,1850],{"class":1593,"line":1849},21,[1591,1851,1852],{"class":1625},"  { id: 2, label: 'Component audit' },\n",[1591,1854,1856],{"class":1593,"line":1855},22,[1591,1857,1858],{"class":1625},"])\n",[1591,1860,1862],{"class":1593,"line":1861},23,[1591,1863,1684],{"emptyLinePlaceholder":1683},[1591,1865,1867],{"class":1593,"line":1866},24,[1591,1868,1869],{"class":1625},"function onChange(next: Item[]) {\n",[1591,1871,1873],{"class":1593,"line":1872},25,[1591,1874,1875],{"class":1625},"  items.value = [...next]\n",[1591,1877,1879,1882],{"class":1593,"line":1878},26,[1591,1880,1881],{"class":1625},"}",[1591,1883,1884],{"class":1597},"`\n",[1591,1886,1888,1890,1892],{"class":1593,"line":1887},27,[1591,1889,1761],{"class":1597},[1591,1891,1778],{"class":1601},[1591,1893,1604],{"class":1597},[1546,1895,1897],{"id":1896},"languages-and-themes","Languages and themes",[1520,1899,1900,1902,1903,1906,1907,1910],{},[1530,1901,1532],{}," and ",[1530,1904,1905],{},"theme"," both have to be values Shiki ships. The highlighter is\nbuilt once when the panel mounts, so the panel is re-keyed (",[1530,1908,1909],{},":key",") when either\nchanges to force a fresh grammar and theme.",[1562,1912,1913,1919],{"label":1564},[1566,1914,1573,1916],{"className":1915},[1569,1570,1571,1572],[1575,1917],{"name":1918},"code-block-languages",[1579,1920,1921],{"v-slot:code":1581},[1583,1922,1924],{"className":1585,"code":1923,"language":1587,"meta":1581,"style":1581},"\u003Ctemplate>\n  \u003Cdiv class=\"flex w-full max-w-xl flex-col gap-4\">\n    \u003Cdiv class=\"flex flex-wrap items-center gap-3\">\n      \u003CUSelect\n        v-model=\"language\"\n        :items=\"languages\"\n        class=\"w-40\"\n      \u002F>\n      \u003CUSelect\n        v-model=\"theme\"\n        :items=\"themes\"\n        class=\"w-40\"\n      \u002F>\n    \u003C\u002Fdiv>\n\n    \u003CMCodeBlock\n      :key=\"`${language}-${theme}`\"\n      :code=\"snippets[language]\"\n      :language=\"language\"\n      :theme=\"theme\"\n    \u002F>\n\n    \u003Cp class=\"text-xs text-dimmed\">\n      The highlighter is built once on mount, so the panel is re-keyed to force a fresh grammar and theme when either changes.\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst languages = ['ts', 'vue', 'css', 'json']\nconst themes = ['github-dark', 'github-light']\n\nconst snippets: Record\u003Cstring, string> = {\n  ts: `export function useCounter(initial = 0) {\n  const count = ref(initial)\n  const increment = () => count.value++\n  return { count, increment }\n}`,\n  vue: `\u003Ctemplate>\n  \u003CMCodeBlock\n    :code=\"code\"\n    language=\"vue\"\n  \u002F>\n\u003C\u002Ftemplate>`,\n  css: `.panel {\n  display: grid;\n  gap: 1rem;\n  border-radius: 0.75rem;\n}`,\n  json: `{\n  \"name\": \"nuxt-motion-block\",\n  \"private\": true\n}`,\n}\n\nconst language = ref('ts')\nconst theme = ref('github-dark')\n\u003C\u002Fscript>\n",[1530,1925,1926,1934,1952,1971,1979,1992,2009,2023,2028,2034,2046,2061,2073,2077,2086,2090,2096,2123,2146,2160,2174,2178,2182,2201,2206,2214,2222,2230,2235,2256,2307,2337,2342,2376,2389,2395,2401,2407,2418,2431,2437,2443,2449,2455,2465,2478,2484,2490,2496,2505,2518,2524,2530,2539,2545,2550,2572,2594],{"__ignoreMap":1581},[1591,1927,1928,1930,1932],{"class":1593,"line":1594},[1591,1929,1598],{"class":1597},[1591,1931,1579],{"class":1601},[1591,1933,1604],{"class":1597},[1591,1935,1936,1938,1940,1942,1944,1946,1948,1950],{"class":1593,"line":1607},[1591,1937,1610],{"class":1597},[1591,1939,1566],{"class":1601},[1591,1941,1616],{"class":1615},[1591,1943,1619],{"class":1597},[1591,1945,1622],{"class":1597},[1591,1947,1626],{"class":1625},[1591,1949,1622],{"class":1597},[1591,1951,1604],{"class":1597},[1591,1953,1954,1956,1958,1960,1962,1964,1967,1969],{"class":1593,"line":1633},[1591,1955,1636],{"class":1597},[1591,1957,1566],{"class":1601},[1591,1959,1616],{"class":1615},[1591,1961,1619],{"class":1597},[1591,1963,1622],{"class":1597},[1591,1965,1966],{"class":1625},"flex flex-wrap items-center gap-3",[1591,1968,1622],{"class":1597},[1591,1970,1604],{"class":1597},[1591,1972,1973,1976],{"class":1593,"line":1642},[1591,1974,1975],{"class":1597},"      \u003C",[1591,1977,1978],{"class":1601},"USelect\n",[1591,1980,1981,1984,1986,1988,1990],{"class":1593,"line":1659},[1591,1982,1983],{"class":1615},"        v-model",[1591,1985,1619],{"class":1597},[1591,1987,1622],{"class":1597},[1591,1989,1532],{"class":1652},[1591,1991,1656],{"class":1597},[1591,1993,1994,1997,2000,2002,2004,2007],{"class":1593,"line":1674},[1591,1995,1996],{"class":1597},"        :",[1591,1998,1999],{"class":1615},"items",[1591,2001,1619],{"class":1597},[1591,2003,1622],{"class":1597},[1591,2005,2006],{"class":1652},"languages",[1591,2008,1656],{"class":1597},[1591,2010,2011,2014,2016,2018,2021],{"class":1593,"line":1680},[1591,2012,2013],{"class":1615},"        class",[1591,2015,1619],{"class":1597},[1591,2017,1622],{"class":1597},[1591,2019,2020],{"class":1625},"w-40",[1591,2022,1656],{"class":1597},[1591,2024,2025],{"class":1593,"line":1687},[1591,2026,2027],{"class":1597},"      \u002F>\n",[1591,2029,2030,2032],{"class":1593,"line":1695},[1591,2031,1975],{"class":1597},[1591,2033,1978],{"class":1601},[1591,2035,2036,2038,2040,2042,2044],{"class":1593,"line":1712},[1591,2037,1983],{"class":1615},[1591,2039,1619],{"class":1597},[1591,2041,1622],{"class":1597},[1591,2043,1905],{"class":1652},[1591,2045,1656],{"class":1597},[1591,2047,2048,2050,2052,2054,2056,2059],{"class":1593,"line":1727},[1591,2049,1996],{"class":1597},[1591,2051,1999],{"class":1615},[1591,2053,1619],{"class":1597},[1591,2055,1622],{"class":1597},[1591,2057,2058],{"class":1652},"themes",[1591,2060,1656],{"class":1597},[1591,2062,2063,2065,2067,2069,2071],{"class":1593,"line":1743},[1591,2064,2013],{"class":1615},[1591,2066,1619],{"class":1597},[1591,2068,1622],{"class":1597},[1591,2070,2020],{"class":1625},[1591,2072,1656],{"class":1597},[1591,2074,2075],{"class":1593,"line":1748},[1591,2076,2027],{"class":1597},[1591,2078,2079,2082,2084],{"class":1593,"line":1758},[1591,2080,2081],{"class":1597},"    \u003C\u002F",[1591,2083,1566],{"class":1601},[1591,2085,1604],{"class":1597},[1591,2087,2088],{"class":1593,"line":1768},[1591,2089,1684],{"emptyLinePlaceholder":1683},[1591,2091,2092,2094],{"class":1593,"line":1773},[1591,2093,1636],{"class":1597},[1591,2095,1692],{"class":1601},[1591,2097,2098,2100,2103,2105,2108,2110,2112,2115,2118,2120],{"class":1593,"line":1797},[1591,2099,1698],{"class":1597},[1591,2101,2102],{"class":1615},"key",[1591,2104,1619],{"class":1597},[1591,2106,2107],{"class":1597},"\"`${",[1591,2109,1532],{"class":1652},[1591,2111,1881],{"class":1597},[1591,2113,2114],{"class":1625},"-",[1591,2116,2117],{"class":1597},"${",[1591,2119,1905],{"class":1652},[1591,2121,2122],{"class":1597},"}`\"\n",[1591,2124,2125,2127,2129,2131,2133,2136,2139,2141,2144],{"class":1593,"line":1822},[1591,2126,1698],{"class":1597},[1591,2128,1530],{"class":1615},[1591,2130,1619],{"class":1597},[1591,2132,1622],{"class":1597},[1591,2134,2135],{"class":1652},"snippets",[1591,2137,2138],{"class":1597},"[",[1591,2140,1532],{"class":1652},[1591,2142,2143],{"class":1597},"]",[1591,2145,1656],{"class":1597},[1591,2147,2148,2150,2152,2154,2156,2158],{"class":1593,"line":1827},[1591,2149,1698],{"class":1597},[1591,2151,1532],{"class":1615},[1591,2153,1619],{"class":1597},[1591,2155,1622],{"class":1597},[1591,2157,1532],{"class":1652},[1591,2159,1656],{"class":1597},[1591,2161,2162,2164,2166,2168,2170,2172],{"class":1593,"line":1843},[1591,2163,1698],{"class":1597},[1591,2165,1905],{"class":1615},[1591,2167,1619],{"class":1597},[1591,2169,1622],{"class":1597},[1591,2171,1905],{"class":1652},[1591,2173,1656],{"class":1597},[1591,2175,2176],{"class":1593,"line":1849},[1591,2177,1677],{"class":1597},[1591,2179,2180],{"class":1593,"line":1855},[1591,2181,1684],{"emptyLinePlaceholder":1683},[1591,2183,2184,2186,2188,2190,2192,2194,2197,2199],{"class":1593,"line":1861},[1591,2185,1636],{"class":1597},[1591,2187,1520],{"class":1601},[1591,2189,1616],{"class":1615},[1591,2191,1619],{"class":1597},[1591,2193,1622],{"class":1597},[1591,2195,2196],{"class":1625},"text-xs text-dimmed",[1591,2198,1622],{"class":1597},[1591,2200,1604],{"class":1597},[1591,2202,2203],{"class":1593,"line":1866},[1591,2204,2205],{"class":1652},"      The highlighter is built once on mount, so the panel is re-keyed to force a fresh grammar and theme when either changes.\n",[1591,2207,2208,2210,2212],{"class":1593,"line":1872},[1591,2209,2081],{"class":1597},[1591,2211,1520],{"class":1601},[1591,2213,1604],{"class":1597},[1591,2215,2216,2218,2220],{"class":1593,"line":1878},[1591,2217,1751],{"class":1597},[1591,2219,1566],{"class":1601},[1591,2221,1604],{"class":1597},[1591,2223,2224,2226,2228],{"class":1593,"line":1887},[1591,2225,1761],{"class":1597},[1591,2227,1579],{"class":1601},[1591,2229,1604],{"class":1597},[1591,2231,2233],{"class":1593,"line":2232},28,[1591,2234,1684],{"emptyLinePlaceholder":1683},[1591,2236,2238,2240,2242,2244,2246,2248,2250,2252,2254],{"class":1593,"line":2237},29,[1591,2239,1598],{"class":1597},[1591,2241,1778],{"class":1601},[1591,2243,1781],{"class":1615},[1591,2245,1784],{"class":1615},[1591,2247,1619],{"class":1597},[1591,2249,1622],{"class":1597},[1591,2251,1722],{"class":1625},[1591,2253,1622],{"class":1597},[1591,2255,1604],{"class":1597},[1591,2257,2259,2261,2264,2266,2269,2272,2274,2276,2279,2282,2284,2286,2288,2290,2293,2295,2297,2299,2302,2304],{"class":1593,"line":2258},30,[1591,2260,1800],{"class":1615},[1591,2262,2263],{"class":1652}," languages ",[1591,2265,1619],{"class":1597},[1591,2267,2268],{"class":1652}," [",[1591,2270,2271],{"class":1597},"'",[1591,2273,1722],{"class":1625},[1591,2275,2271],{"class":1597},[1591,2277,2278],{"class":1597},",",[1591,2280,2281],{"class":1597}," '",[1591,2283,1587],{"class":1625},[1591,2285,2271],{"class":1597},[1591,2287,2278],{"class":1597},[1591,2289,2281],{"class":1597},[1591,2291,2292],{"class":1625},"css",[1591,2294,2271],{"class":1597},[1591,2296,2278],{"class":1597},[1591,2298,2281],{"class":1597},[1591,2300,2301],{"class":1625},"json",[1591,2303,2271],{"class":1597},[1591,2305,2306],{"class":1652},"]\n",[1591,2308,2310,2312,2315,2317,2319,2321,2324,2326,2328,2330,2333,2335],{"class":1593,"line":2309},31,[1591,2311,1800],{"class":1615},[1591,2313,2314],{"class":1652}," themes ",[1591,2316,1619],{"class":1597},[1591,2318,2268],{"class":1652},[1591,2320,2271],{"class":1597},[1591,2322,2323],{"class":1625},"github-dark",[1591,2325,2271],{"class":1597},[1591,2327,2278],{"class":1597},[1591,2329,2281],{"class":1597},[1591,2331,2332],{"class":1625},"github-light",[1591,2334,2271],{"class":1597},[1591,2336,2306],{"class":1652},[1591,2338,2340],{"class":1593,"line":2339},32,[1591,2341,1684],{"emptyLinePlaceholder":1683},[1591,2343,2345,2347,2350,2353,2357,2359,2362,2364,2367,2370,2373],{"class":1593,"line":2344},33,[1591,2346,1800],{"class":1615},[1591,2348,2349],{"class":1652}," snippets",[1591,2351,2352],{"class":1597},":",[1591,2354,2356],{"class":2355},"sBMFI"," Record",[1591,2358,1598],{"class":1597},[1591,2360,2361],{"class":2355},"string",[1591,2363,2278],{"class":1597},[1591,2365,2366],{"class":2355}," string",[1591,2368,2369],{"class":1597},">",[1591,2371,2372],{"class":1597}," =",[1591,2374,2375],{"class":1597}," {\n",[1591,2377,2379,2382,2384,2386],{"class":1593,"line":2378},34,[1591,2380,2381],{"class":1601},"  ts",[1591,2383,2352],{"class":1597},[1591,2385,1837],{"class":1597},[1591,2387,2388],{"class":1625},"export function useCounter(initial = 0) {\n",[1591,2390,2392],{"class":1593,"line":2391},35,[1591,2393,2394],{"class":1625},"  const count = ref(initial)\n",[1591,2396,2398],{"class":1593,"line":2397},36,[1591,2399,2400],{"class":1625},"  const increment = () => count.value++\n",[1591,2402,2404],{"class":1593,"line":2403},37,[1591,2405,2406],{"class":1625},"  return { count, increment }\n",[1591,2408,2410,2412,2415],{"class":1593,"line":2409},38,[1591,2411,1881],{"class":1625},[1591,2413,2414],{"class":1597},"`",[1591,2416,2417],{"class":1597},",\n",[1591,2419,2421,2424,2426,2428],{"class":1593,"line":2420},39,[1591,2422,2423],{"class":1601},"  vue",[1591,2425,2352],{"class":1597},[1591,2427,1837],{"class":1597},[1591,2429,2430],{"class":1625},"\u003Ctemplate>\n",[1591,2432,2434],{"class":1593,"line":2433},40,[1591,2435,2436],{"class":1625},"  \u003CMCodeBlock\n",[1591,2438,2440],{"class":1593,"line":2439},41,[1591,2441,2442],{"class":1625},"    :code=\"code\"\n",[1591,2444,2446],{"class":1593,"line":2445},42,[1591,2447,2448],{"class":1625},"    language=\"vue\"\n",[1591,2450,2452],{"class":1593,"line":2451},43,[1591,2453,2454],{"class":1625},"  \u002F>\n",[1591,2456,2458,2461,2463],{"class":1593,"line":2457},44,[1591,2459,2460],{"class":1625},"\u003C\u002Ftemplate>",[1591,2462,2414],{"class":1597},[1591,2464,2417],{"class":1597},[1591,2466,2468,2471,2473,2475],{"class":1593,"line":2467},45,[1591,2469,2470],{"class":1601},"  css",[1591,2472,2352],{"class":1597},[1591,2474,1837],{"class":1597},[1591,2476,2477],{"class":1625},".panel {\n",[1591,2479,2481],{"class":1593,"line":2480},46,[1591,2482,2483],{"class":1625},"  display: grid;\n",[1591,2485,2487],{"class":1593,"line":2486},47,[1591,2488,2489],{"class":1625},"  gap: 1rem;\n",[1591,2491,2493],{"class":1593,"line":2492},48,[1591,2494,2495],{"class":1625},"  border-radius: 0.75rem;\n",[1591,2497,2499,2501,2503],{"class":1593,"line":2498},49,[1591,2500,1881],{"class":1625},[1591,2502,2414],{"class":1597},[1591,2504,2417],{"class":1597},[1591,2506,2508,2511,2513,2515],{"class":1593,"line":2507},50,[1591,2509,2510],{"class":1601},"  json",[1591,2512,2352],{"class":1597},[1591,2514,1837],{"class":1597},[1591,2516,2517],{"class":1625},"{\n",[1591,2519,2521],{"class":1593,"line":2520},51,[1591,2522,2523],{"class":1625},"  \"name\": \"nuxt-motion-block\",\n",[1591,2525,2527],{"class":1593,"line":2526},52,[1591,2528,2529],{"class":1625},"  \"private\": true\n",[1591,2531,2533,2535,2537],{"class":1593,"line":2532},53,[1591,2534,1881],{"class":1625},[1591,2536,2414],{"class":1597},[1591,2538,2417],{"class":1597},[1591,2540,2542],{"class":1593,"line":2541},54,[1591,2543,2544],{"class":1597},"}\n",[1591,2546,2548],{"class":1593,"line":2547},55,[1591,2549,1684],{"emptyLinePlaceholder":1683},[1591,2551,2553,2555,2558,2560,2562,2564,2566,2568,2570],{"class":1593,"line":2552},56,[1591,2554,1800],{"class":1615},[1591,2556,2557],{"class":1652}," language ",[1591,2559,1619],{"class":1597},[1591,2561,1809],{"class":1808},[1591,2563,1812],{"class":1652},[1591,2565,2271],{"class":1597},[1591,2567,1722],{"class":1625},[1591,2569,2271],{"class":1597},[1591,2571,1819],{"class":1652},[1591,2573,2575,2577,2580,2582,2584,2586,2588,2590,2592],{"class":1593,"line":2574},57,[1591,2576,1800],{"class":1615},[1591,2578,2579],{"class":1652}," theme ",[1591,2581,1619],{"class":1597},[1591,2583,1809],{"class":1808},[1591,2585,1812],{"class":1652},[1591,2587,2271],{"class":1597},[1591,2589,2323],{"class":1625},[1591,2591,2271],{"class":1597},[1591,2593,1819],{"class":1652},[1591,2595,2597,2599,2601],{"class":1593,"line":2596},58,[1591,2598,1761],{"class":1597},[1591,2600,1778],{"class":1601},[1591,2602,1604],{"class":1597},[1546,2604,2606],{"id":2605},"customize","Customize",[1562,2608,2609,2615],{"label":1564},[1566,2610,1573,2612],{"className":2611},[1571],[1575,2613],{"name":2614},"code-block-custom",[1579,2616,2617],{"v-slot:code":1581},[2618,2619],"playground-code",{"name":2620},"CodeBlock",[1546,2622,2624],{"id":2623},"props","Props",[2626,2627,2628,2632,2636,2644],"component-props",{},[2629,2630,2631],"component-prop",{"name":1530,"type":2361},"The source to display, and the exact text the copy button puts on the clipboard\n— not the highlighted HTML. Required.",[2629,2633,2635],{"name":1532,"type":2361,"default":2634},"'vue'","Shiki language id used both to load the grammar and to tokenise the code. An\nunknown id falls back to plain escaped text in the same panel rather than\nfailing.",[2629,2637,2639,2640,2643],{"name":1905,"type":2361,"default":2638},"'github-dark'","Shiki theme name. Loaded alongside the language and used for the token colours;\nthe panel background is hardcoded to ",[1530,2641,2642],{},"#0d1117"," and does not follow the theme.",[2629,2645,2648],{"name":1543,"type":2646,"default":2647},"boolean","false","Render the line-number gutter and pad the code body to clear it. The gutter only\nappears after highlighting has resolved, so it is absent from the server render.",[1546,2650,2652],{"id":2651},"ui","UI",[1520,2654,2655,2656,2662,2663,2666,2667,2670],{},"This component's theme exposes the slots below. Override any of them per instance with the ",[2657,2658,2659,2661],"a",{"href":21},[1530,2660,2651],{}," prop",", or app-wide under ",[1530,2664,2665],{},"ui.codeBlock"," in ",[1530,2668,2669],{},"app.config.ts",".",[2626,2672,2673],{},[2629,2674,2676],{"name":2651,"type":2675},"object","Per-slot classes merged over the theme defaults.",[2678,2679,2680,2687,2693,2699,2704,2710,2716,2722,2728,2734],"component-slots",{},[2681,2682,2684],"component-slot-row",{"name":2683},"root",[1530,2685,2686],{},"relative group",[2681,2688,2690],{"name":2689},"container",[1530,2691,2692],{},"relative overflow-hidden rounded-lg border border-default bg-[#0d1117] text-sm",[2681,2694,2696],{"name":2695},"header",[1530,2697,2698],{},"flex items-center justify-between px-4 py-2 border-b border-default",[2681,2700,2701],{"name":1532},[1530,2702,2703],{},"text-xs text-dimmed font-mono",[2681,2705,2707],{"name":2706},"copyButton",[1530,2708,2709],{},"text-dimmed hover:text-white transition-colors",[2681,2711,2713],{"name":2712},"copy",[1530,2714,2715],{},"text-xs",[2681,2717,2719],{"name":2718},"copied",[1530,2720,2721],{},"text-xs text-green-400",[2681,2723,2725],{"name":2724},"lineNumbers",[1530,2726,2727],{},"absolute left-0 top-0 bottom-0 w-12 flex flex-col items-end pr-3 pt-4 text-muted text-xs font-mono select-none border-r border-default",[2681,2729,2731],{"name":2730},"lineNumber",[1530,2732,2733],{},"leading-6",[2681,2735,2737],{"name":2736},"body",[1530,2738,2739],{},"code-body",[1546,2741,2743],{"id":2742},"accessibility","Accessibility",[1520,2745,2746,2747,2750,2751,2754,2755,2758,2759,2762],{},"The copy button is a bare ",[1530,2748,2749],{},"\u003Cbutton>"," with no ",[1530,2752,2753],{},"type"," and no accessible label beyond\nits own visible text, so its accessible name changes with that text — \"Copy\", then\n\"Copied!\" — but nothing announces the change to a screen reader, and there is no\n",[1530,2756,2757],{},"aria-live"," region. The language name in the header is a ",[1530,2760,2761],{},"\u003Cspan>",", not a label\nelement.",[1520,2764,2765,2766,2769,2770,2773],{},"The highlighted code is injected with ",[1530,2767,2768],{},"v-html",", so the code itself reaches the\naccessibility tree as the Shiki spans it produces — token colours carry no extra\nsemantics, and the code reads as text. There is no ",[1530,2771,2772],{},"tabindex"," on the scrollable\nbody, so a keyboard user cannot scroll a long line horizontally; the copy button\nis the only focusable element in the panel.",[1520,2775,2776,2777,2780],{},"No ",[1530,2778,2779],{},"prefers-reduced-motion"," handling: the panel animates in on mount and the copy\nlabel slides between its two states regardless of motion preference. The two\nsecond timer that flips the label back is not cleared on unmount.",[1546,2782,2784],{"id":2783},"performance","Performance",[2786,2787,2788,2792,2802,2809,2818],"ul",{},[2789,2790,2791],"li",{},"Shiki is loaded and initialised on mount per instance, for one theme and one\nlanguage. A page with many code panels pays for that many initialisations.",[2789,2793,2794,2795,2798,2799,2801],{},"The highlighter runs once; the copy path only calls ",[1530,2796,2797],{},"useClipboard","'s ",[1530,2800,2712],{}," and\ntoggles a ref.",[2789,2803,2804,2805,2808],{},"The panel fades and slides in on mount with the default transition, and its\nvariant declares ",[1530,2806,2807],{},"staggerChildren"," while having no motion children of its own —\nso the stagger has nothing to stagger and the whole panel is one animated element.",[2789,2810,1540,2811,2813,2814,2817],{},[1530,2812,1543],{}," branch is duplicated in the template: two near-identical\n",[1530,2815,2816],{},"motion.div"," trees, one with the gutter and one without. Only one renders.",[2789,2819,2820,2821,2824,2825,2824,2827,1902,2829,2831,2832,2835,2836,2838],{},"The fallback path escapes ",[1530,2822,2823],{},"&",", ",[1530,2826,1598],{},[1530,2828,2369],{},[1530,2830,1622],{}," and wraps the result in a ",[1530,2833,2834],{},"shiki","\nclass ",[1530,2837,1536],{},", so a missing grammar or theme degrades instead of throwing.",[2840,2841,2842,2843,2846,2847,2849,2850,2852,2853,2855,2856,2858],"tip",{},"The highlighter is created once in ",[1530,2844,2845],{},"onMounted",", so changing ",[1530,2848,1530],{}," or ",[1530,2851,1532],{}," on\nan existing instance does not re-highlight — the old markup stays until the\ncomponent is recreated. Key the component on the snippet instead of updating it.\nNote also that ",[1530,2854,1905],{}," only controls token colours while the panel background is\n",[1530,2857,2642],{}," hardcoded, so a light Shiki theme lands light-coloured tokens on a dark\npanel.",[2860,2861,2862],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":1581,"searchDepth":1607,"depth":1607,"links":2864},[2865,2866,2867,2868,2869,2870,2871],{"id":1548,"depth":1607,"text":16},{"id":1896,"depth":1607,"text":1897},{"id":2605,"depth":1607,"text":2606},{"id":2623,"depth":1607,"text":2624},{"id":2651,"depth":1607,"text":2652},{"id":2742,"depth":1607,"text":2743},{"id":2783,"depth":1607,"text":2784},"A Shiki-highlighted code panel with a language label and a copy button.","md",null,{},{"title":717,"description":2872},"P1z7xLHjBA9w4xUOqxTF3RKECyFJ7wUJZslRTGwAsrQ",[2879,2881],{"title":713,"path":714,"stem":715,"description":2880,"children":-1},"A declarative wrapper over Nuxt UI's useToast() that drives motion toasts with a single component.",{"title":721,"path":722,"stem":723,"description":2882,"children":-1},"Two code panes with a divider you can drag to reveal either side.",1793501782497]