[{"data":1,"prerenderedAt":738},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Fwhy-vy-ui":460,"\u002Fguides\u002Fwhy-vy-ui-surround":733},[4,34,51,301,327,332,337,406],{"title":5,"path":6,"stem":7,"children":8,"package":11,"icon":33},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,13,18,23,28],{"title":10,"path":6,"stem":7,"package":11,"icon":12},"Introduction",null,"i-lucide-house",{"title":14,"path":15,"stem":16,"package":11,"icon":17},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":19,"path":20,"stem":21,"package":11,"icon":22},"Icons","\u002Fgetting-started\u002Ficons","1.getting-started\u002F3.icons","i-lucide-sparkles",{"title":24,"path":25,"stem":26,"package":11,"icon":27},"CLI","\u002Fgetting-started\u002Fcli","1.getting-started\u002F4.cli","i-lucide-terminal",{"title":29,"path":30,"stem":31,"package":11,"icon":32},"Roadmap","\u002Fgetting-started\u002Froadmap","1.getting-started\u002F5.roadmap","i-lucide-map","i-lucide-rocket",{"title":35,"package":11,"icon":36,"path":37,"stem":38,"children":39,"page":50},"Packages","i-lucide-package","\u002Fpackages","2.packages",[40,45],{"title":41,"path":42,"stem":43,"package":11,"icon":44},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":46,"path":47,"stem":48,"package":11,"icon":49},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":52,"package":11,"icon":53,"path":54,"stem":55,"children":56},"Components","i-lucide-layout-grid","\u002Fcomponents","3.components",[57,59,65,70,75,80,85,90,95,100,105,110,115,120,125,130,135,140,144,149,153,158,163,168,173,178,183,188,193,198,203,208,213,218,223,228,233,238,242,246,251,256,261,266,271,276,280,284,288,292,296],{"title":52,"path":54,"stem":58,"package":11,"icon":53},"3.components\u002Findex",{"title":60,"path":61,"stem":62,"package":63,"icon":64},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","kit","i-lucide-list-collapse",{"title":66,"path":67,"stem":68,"package":63,"icon":69},"Action Sheet","\u002Fcomponents\u002Faction-sheet","3.components\u002Faction-sheet","i-lucide-panel-bottom",{"title":71,"path":72,"stem":73,"package":63,"icon":74},"Alert","\u002Fcomponents\u002Falert","3.components\u002Falert","i-lucide-triangle-alert",{"title":76,"path":77,"stem":78,"package":79,"icon":74},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","core",{"title":81,"path":82,"stem":83,"package":63,"icon":84},"App","\u002Fcomponents\u002Fapp","3.components\u002Fapp","i-lucide-smartphone",{"title":86,"path":87,"stem":88,"package":63,"icon":89},"Aspect Ratio","\u002Fcomponents\u002Faspect-ratio","3.components\u002Faspect-ratio","i-lucide-ratio",{"title":91,"path":92,"stem":93,"package":63,"icon":94},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user-round",{"title":96,"path":97,"stem":98,"package":63,"icon":99},"Avatar Group","\u002Fcomponents\u002Favatar-group","3.components\u002Favatar-group","i-lucide-users-round",{"title":101,"path":102,"stem":103,"package":63,"icon":104},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","i-lucide-square-mouse-pointer",{"title":106,"path":107,"stem":108,"package":63,"icon":109},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","i-lucide-calendar-days",{"title":111,"path":112,"stem":113,"package":63,"icon":114},"Card","\u002Fcomponents\u002Fcard","3.components\u002Fcard","i-lucide-square",{"title":116,"path":117,"stem":118,"package":63,"icon":119},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":121,"path":122,"stem":123,"package":79,"icon":124},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":126,"path":127,"stem":128,"package":79,"icon":129},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-app-window",{"title":131,"path":132,"stem":133,"package":79,"icon":134},"Draggable","\u002Fcomponents\u002Fdraggable","3.components\u002Fdraggable","i-lucide-move",{"title":136,"path":137,"stem":138,"package":63,"icon":139},"Form","\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-list",{"title":141,"path":142,"stem":143,"package":79,"icon":22},"Icon","\u002Fcomponents\u002Ficon","3.components\u002Ficon",{"title":145,"path":146,"stem":147,"package":63,"icon":148},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput","i-lucide-text-cursor-input",{"title":150,"path":151,"stem":152,"package":63,"icon":69},"Island","\u002Fcomponents\u002Fisland","3.components\u002Fisland",{"title":154,"path":155,"stem":156,"package":63,"icon":157},"Island Button","\u002Fcomponents\u002Fisland-button","3.components\u002Fisland-button","i-lucide-circle-ellipsis",{"title":159,"path":160,"stem":161,"package":63,"icon":162},"Island Group","\u002Fcomponents\u002Fisland-group","3.components\u002Fisland-group","i-lucide-panels-top-left",{"title":164,"path":165,"stem":166,"package":63,"icon":167},"KeyboardAware","\u002Fcomponents\u002Fkeyboard-aware","3.components\u002Fkeyboard-aware","i-lucide-keyboard",{"title":169,"path":170,"stem":171,"package":63,"icon":172},"Label","\u002Fcomponents\u002Flabel","3.components\u002Flabel","i-lucide-tag",{"title":174,"path":175,"stem":176,"package":63,"icon":177},"Modal","\u002Fcomponents\u002Fmodal","3.components\u002Fmodal","i-lucide-gallery-vertical-end",{"title":179,"path":180,"stem":181,"package":79,"icon":182},"Navigation","\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation","i-lucide-route",{"title":184,"path":185,"stem":186,"package":63,"icon":187},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-list-plus",{"title":189,"path":190,"stem":191,"package":79,"icon":192},"Pagination","\u002Fcomponents\u002Fpagination","3.components\u002Fpagination","i-lucide-ellipsis",{"title":194,"path":195,"stem":196,"package":63,"icon":197},"Pin Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-key-round",{"title":199,"path":200,"stem":201,"package":63,"icon":202},"Placeholder","\u002Fcomponents\u002Fplaceholder","3.components\u002Fplaceholder","i-lucide-square-dashed",{"title":204,"path":205,"stem":206,"package":63,"icon":207},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square-more",{"title":209,"path":210,"stem":211,"package":63,"icon":212},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-chart-no-axes-column-increasing",{"title":214,"path":215,"stem":216,"package":63,"icon":217},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":219,"path":220,"stem":221,"package":63,"icon":222},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":224,"path":225,"stem":226,"package":79,"icon":227},"Scroll View","\u002Fcomponents\u002Fscroll-view","3.components\u002Fscroll-view","i-lucide-scroll",{"title":229,"path":230,"stem":231,"package":63,"icon":232},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-check",{"title":234,"path":235,"stem":236,"package":63,"icon":237},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-separator-horizontal",{"title":239,"path":240,"stem":241,"package":79,"icon":69},"Sheet","\u002Fcomponents\u002Fsheet","3.components\u002Fsheet",{"title":243,"path":244,"stem":245,"package":63,"icon":162},"Skeleton","\u002Fcomponents\u002Fskeleton","3.components\u002Fskeleton",{"title":247,"path":248,"stem":249,"package":63,"icon":250},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":252,"path":253,"stem":254,"package":63,"icon":255},"Sortable","\u002Fcomponents\u002Fsortable","3.components\u002Fsortable","i-lucide-list-restart",{"title":257,"path":258,"stem":259,"package":63,"icon":260},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":262,"path":263,"stem":264,"package":63,"icon":265},"Swipe Action","\u002Fcomponents\u002Fswipe-action","3.components\u002Fswipe-action","i-lucide-move-horizontal",{"title":267,"path":268,"stem":269,"package":63,"icon":270},"Swiper","\u002Fcomponents\u002Fswiper","3.components\u002Fswiper","i-lucide-gallery-horizontal-end",{"title":272,"path":273,"stem":274,"package":63,"icon":275},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-right",{"title":277,"path":278,"stem":279,"package":63,"icon":162},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":281,"path":282,"stem":283,"package":63,"icon":148},"Textarea","\u002Fcomponents\u002Ftextarea","3.components\u002Ftextarea",{"title":285,"path":286,"stem":287,"package":63,"icon":207},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":289,"path":290,"stem":291,"package":63,"icon":275},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"title":293,"path":294,"stem":295,"package":63,"icon":162},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":297,"path":298,"stem":299,"package":63,"icon":300},"Tray","\u002Fcomponents\u002Ftray","3.components\u002Ftray","i-lucide-square-dashed-bottom",{"title":302,"path":303,"stem":304,"children":305,"package":11,"icon":307},"Theming","\u002Ftheming","4.theming\u002F1.index",[306,308,312,317,322],{"title":302,"path":303,"stem":304,"package":11,"icon":307},"i-lucide-palette",{"title":309,"path":310,"stem":311,"package":11,"icon":250},"Overrides","\u002Ftheming\u002Foverrides","4.theming\u002F2.overrides",{"title":313,"path":314,"stem":315,"package":11,"icon":316},"Colors","\u002Ftheming\u002Fcolors","4.theming\u002F3.colors","i-lucide-swatch-book",{"title":318,"path":319,"stem":320,"package":11,"icon":321},"Dark Mode","\u002Ftheming\u002Fdark-mode","4.theming\u002F4.dark-mode","i-lucide-moon",{"title":323,"path":324,"stem":325,"package":11,"icon":326},"Fonts","\u002Ftheming\u002Ffonts","4.theming\u002F5.fonts","i-lucide-type",{"title":328,"path":329,"stem":330,"package":11,"icon":331},"Accessibility","\u002Faccessibility","5.accessibility","i-lucide-accessibility",{"title":333,"path":334,"stem":335,"package":11,"icon":336},"i18n","\u002Fi18n","6.i18n","i-lucide-languages",{"title":338,"path":339,"stem":340,"children":341,"package":11,"icon":343},"Composables","\u002Fcomposables","7.composables\u002F1.index",[342,344,349,354,359,364,369,374,378,383,387,391,396,401],{"title":338,"path":339,"stem":340,"package":11,"icon":343},"i-lucide-square-function",{"title":345,"path":346,"stem":347,"package":11,"icon":348},"useEmitAsProps","\u002Fcomposables\u002Fuse-emit-as-props","7.composables\u002F10.use-emit-as-props","i-lucide-zap",{"title":350,"path":351,"stem":352,"package":11,"icon":353},"useForwardPropsEmits","\u002Fcomposables\u002Fuse-forward-props-emits","7.composables\u002F11.use-forward-props-emits","i-lucide-merge",{"title":355,"path":356,"stem":357,"package":11,"icon":358},"useForwardExpose","\u002Fcomposables\u002Fuse-forward-expose","7.composables\u002F12.use-forward-expose","i-lucide-share-2",{"title":360,"path":361,"stem":362,"package":11,"icon":363},"useStateMachine","\u002Fcomposables\u002Fuse-state-machine","7.composables\u002F13.use-state-machine","i-lucide-workflow",{"title":365,"path":366,"stem":367,"package":11,"icon":368},"usePrimitiveElement","\u002Fcomposables\u002Fuse-primitive-element","7.composables\u002F14.use-primitive-element","i-lucide-crosshair",{"title":370,"path":371,"stem":372,"package":11,"icon":373},"useAppConfig","\u002Fcomposables\u002Fuse-app-config","7.composables\u002F2.use-app-config","i-lucide-settings",{"title":375,"path":376,"stem":377,"package":11,"icon":321},"useColorMode","\u002Fcomposables\u002Fuse-color-mode","7.composables\u002F3.use-color-mode",{"title":379,"path":380,"stem":381,"package":11,"icon":382},"useComponentIcons","\u002Fcomposables\u002Fuse-component-icons","7.composables\u002F4.use-component-icons","i-lucide-shapes",{"title":384,"path":385,"stem":386,"package":11,"icon":69},"useTray","\u002Fcomposables\u002Fuse-tray","7.composables\u002F5.use-tray",{"title":388,"path":389,"stem":390,"package":11,"icon":336},"i18n composables","\u002Fcomposables\u002Fi18n-composables","7.composables\u002F6.i18n-composables",{"title":392,"path":393,"stem":394,"package":11,"icon":395},"useId","\u002Fcomposables\u002Fuse-id","7.composables\u002F7.use-id","i-lucide-hash",{"title":397,"path":398,"stem":399,"package":11,"icon":400},"useFilter","\u002Fcomposables\u002Fuse-filter","7.composables\u002F8.use-filter","i-lucide-filter",{"title":402,"path":403,"stem":404,"package":11,"icon":405},"useForwardProps","\u002Fcomposables\u002Fuse-forward-props","7.composables\u002F9.use-forward-props","i-lucide-arrow-right-left",{"title":407,"path":408,"stem":409,"children":410,"package":11,"icon":412},"Guides","\u002Fguides","8.guides\u002F1.index",[411,413,417,422,427,432,437,441,446,450,455],{"title":407,"path":408,"stem":409,"package":11,"icon":412},"i-lucide-book-open",{"title":414,"path":415,"stem":416,"package":11,"icon":348},"Instant first-frame rendering","\u002Fguides\u002Finstant-first-frame-rendering","8.guides\u002F10.instant-first-frame-rendering",{"title":418,"path":419,"stem":420,"package":11,"icon":421},"Why use Vy UI","\u002Fguides\u002Fwhy-vy-ui","8.guides\u002F11.why-vy-ui","i-lucide-help-circle",{"title":423,"path":424,"stem":425,"package":11,"icon":426},"Lynx UI frameworks","\u002Fguides\u002Flynx-ui-frameworks","8.guides\u002F2.lynx-ui-frameworks","i-lucide-library",{"title":428,"path":429,"stem":430,"package":11,"icon":431},"What is Vue Lynx","\u002Fguides\u002Fvue-lynx","8.guides\u002F3.vue-lynx","i-lucide-component",{"title":433,"path":434,"stem":435,"package":11,"icon":436},"Lynx vs React Native","\u002Fguides\u002Flynx-vs-react-native","8.guides\u002F4.lynx-vs-react-native","i-lucide-git-compare",{"title":438,"path":439,"stem":440,"package":11,"icon":84},"Testing on your phone","\u002Fguides\u002Ftesting-on-device","8.guides\u002F5.testing-on-device",{"title":442,"path":443,"stem":444,"package":11,"icon":445},"Testing with Xcode","\u002Fguides\u002Ftesting-with-xcode","8.guides\u002F6.testing-with-xcode","i-lucide-apple",{"title":447,"path":448,"stem":449,"package":11,"icon":27},"The rspeedy dev server","\u002Fguides\u002Frspeedy-dev-server","8.guides\u002F7.rspeedy-dev-server",{"title":451,"path":452,"stem":453,"package":11,"icon":454},"Tailwind on Lynx","\u002Fguides\u002Ftailwind-on-lynx","8.guides\u002F8.tailwind-on-lynx","i-lucide-wind",{"title":456,"path":457,"stem":458,"package":11,"icon":459},"Theming on Lynx","\u002Fguides\u002Ftheming-on-lynx","8.guides\u002F9.theming-on-lynx","i-lucide-paintbrush",{"id":461,"title":418,"body":462,"description":725,"extension":726,"links":11,"meta":727,"navigation":728,"package":11,"path":419,"seo":729,"stem":420,"__hash__":732},"docs\u002F8.guides\u002F11.why-vy-ui.md",{"type":463,"value":464,"toc":714},"minimark",[465,469,472,484,489,495,547,550,554,557,575,578,582,597,600,604,607,623,642,657,660,664,667,682,685,689],[466,467,468],"p",{},"Most component libraries are sold on the size of their catalogue, which is the least useful number to compare on Lynx. A button is an afternoon, a card is twenty minutes, and if the catalogue were the whole value proposition you would be right to skip the dependency and write the six components your app actually needs.",[466,470,471],{},"The value sits in the layer underneath, where Lynx behaves unlike the browser you tested in. Lynx drops what its engine cannot handle rather than erroring on it, so a broken component looks correct in the web preview, logs nothing, and renders wrong on a phone. Every one of those costs a build, a device, and an afternoon of narrowing down which of your forty declarations the engine discarded.",[473,474,476],"callout",{"icon":475},"i-lucide-info",[466,477,478,479,483],{},"We maintain Vy UI, so read this as an argument rather than a survey. The ",[480,481,482],"a",{"href":424},"Lynx UI frameworks guide"," compares the options with less of a stake in the answer.",[485,486,488],"h2",{"id":487},"the-components-are-the-easy-part","The components are the easy part",[466,490,491,492,494],{},"Here is a sample of what a component library on Lynx has to encode, all of which is documented in ",[480,493,456],{"href":457}," because we found each one the slow way.",[466,496,497,498,502,503,506,507,510,511,514,515,518,519,522,523,526,527,530,531,534,535,538,539,542,543,546],{},"Lynx resolves a single level of ",[499,500,501],"code",{},"var()",", so a semantic token pointing at a palette token evaluates to nothing and your carefully layered theme collapses to white backgrounds and black borders on device. The ",[499,504,505],{},"@lynx-js\u002Ftailwind-preset"," allowlists 57 of Tailwind's 179 core plugins, so ",[499,508,509],{},"ring-2"," is a no-op and a focus ring has to be a spread-only ",[499,512,513],{},"box-shadow",". Tailwind v3 has no half-step spacing above ",[499,516,517],{},"3.5",", so ",[499,520,521],{},"size-4.5"," compiles to nothing at all and your slider thumb quietly loses its dimensions. Icons are rasterized rather than rendered live, so ",[499,524,525],{},"text-primary-500"," on a wrapper does nothing and the hex has to be resolved at render time. ",[499,528,529],{},"data-[state=open]:"," variants never match, so state styling runs through parallel ",[499,532,533],{},"ui-*"," classes while ",[499,536,537],{},"data-state"," stays for assistive technology. Empty slots and ",[499,540,541],{},"v-if"," branches realize as zero-size nodes, which ",[499,544,545],{},"gap-*"," then counts as real children and pushes your icon off-centre.",[466,548,549],{},"None of that is exotic. It is the normal cost of a runtime that is younger than the assumptions in your CSS, and it is paid once per library rather than once per application.",[485,551,553],{"id":552},"behaviour-is-where-the-time-actually-goes","Behaviour is where the time actually goes",[466,555,556],{},"Styling failures are visible, so you fix them. Behaviour failures are the ones that ship.",[466,558,559,560,563,564,567,568,570,571,574],{},"A drag has to run on the main thread, because a gesture that round-trips through the background thread drops frames under exactly the conditions users notice. Vy UI puts Swiper, SwipeAction, Sortable, Draggable, FeedList, and ScrollView on one shared main-thread gesture core, which also means the worklet registration problem is solved once. That problem is worth naming, because it is the single most common way a Lynx app breaks in production: bundlers skip ",[499,561,562],{},"node_modules"," when collecting main-thread code, the worklets never register, and the first drag throws ",[499,565,566],{},"TypeError: cannot read property 'bind' of undefined",". ",[480,569,14],{"href":15}," covers the one config line that fixes it, and ",[499,572,573],{},"npx @vyui\u002Fcli check"," fails your CI if it goes missing.",[466,576,577],{},"Overlays are the other reservoir of hidden work. A dialog needs focus handling and dismissal, a bottom sheet needs velocity-aware drag physics, and a select needs keyboard and screen-reader wiring that Lynx does not infer from the element tree. Animation end events can be lost on web when a child unmounts mid-transition, which leaves an invisible backdrop mounted over your app swallowing every tap, so our presence layer carries a wall-clock watchdog that exists purely because of that failure.",[485,579,581],{"id":580},"if-you-write-react-use-lynx-ui","If you write React, use lynx-ui",[466,583,584,592,593,596],{},[480,585,589],{"href":586,"rel":587},"https:\u002F\u002Fgithub.com\u002Flynx-family\u002Flynx-ui",[588],"nofollow",[499,590,591],{},"@lynx-js\u002Flynx-ui"," is the Lynx team's own headless library for ReactLynx, built by the people who build the runtime, shipped as one package per component. If your team writes React, that is the right starting point and Vy UI cannot help you, since ",[480,594,595],{"href":429},"Vue Lynx"," is a separate custom renderer and the two do not interoperate.",[466,598,599],{},"What lynx-ui does not give you is a styled layer. It is headless by design, so the visual tier is yours to build, and no ReactLynx equivalent to shadcn\u002Fui or Vant sits on top of it yet. Vy UI covers both tiers, which is the substantive difference between the ecosystems rather than a difference in component count.",[485,601,603],{"id":602},"three-ways-to-consume-it","Three ways to consume it",[466,605,606],{},"The layers exist so you can take as much opinion as you want and no more.",[466,608,609,614,615,618,619,622],{},[610,611,612],"strong",{},[499,613,41],{}," is 47 headless primitives. They own state, focus, keyboard handling, and gestures, and they render unstyled ",[499,616,617],{},"\u003Cview>"," and ",[499,620,621],{},"\u003Ctext>"," with nothing to override. Reach for this when you have a design system already, or when the kit's aesthetic is not yours and you would rather not fight a theme. You still get the runtime knowledge above, which is the part that took the time.",[466,624,625,629,630,633,634,637,638,641],{},[610,626,627],{},[499,628,46],{}," is 48 styled components on those primitives, themed through Tailwind Variants. A three-tier token system flips the entire set into ",[480,631,632],{"href":319},"dark mode"," through a single class rather than per-component ",[499,635,636],{},"dark:"," variants, and every component takes a ",[499,639,640],{},"ui"," prop for slot-level overrides. Reach for this when you want to be building your product this week.",[466,643,644,649,650,652,653,656],{},[610,645,646,647],{},"The ",[480,648,24],{"href":25}," copies kit component source into your repository instead of resolving it from ",[499,651,562],{},", in the shadcn\u002Fui model. Running ",[499,654,655],{},"npx @vyui\u002Fcli add select"," fetches the component from a registry, pulls in the primitives it depends on, installs the npm packages it needs, rewrites the imports to match your own path aliases, and leaves plain source files in your project.",[466,658,659],{},"The benefit of that model is that a component you need to change becomes a file you edit rather than a theme API you negotiate with. Restyling stops depending on whether we anticipated the override, forking one component does not fork the library, and reading the implementation is a jump-to-definition instead of a trip to GitHub. You give up automatic updates on the files you copied, which is the trade, and it is a good one for the two or three components every app ends up rewriting anyway. The two paths mix freely, so importing most of the kit from the package and owning the three components you have opinions about is the common shape.",[485,661,663],{"id":662},"what-you-are-accepting","What you are accepting",[466,665,666],{},"Vy UI is alpha and Vue Lynx is earlier than alpha, so component names, props, and slots will move under you. That is the real cost, and it is larger than the dependency risk people usually weigh.",[466,668,669,670,673,674,677,678,681],{},"Accessibility on web is incomplete in a way it is not on native, because Lynx emits ",[499,671,672],{},"accessibility-*"," properties that VoiceOver and TalkBack consume directly while browsers ignore them entirely. Internationalization is early, since ",[499,675,676],{},"Intl"," is not fully present in the Lynx runtime. Both are ",[480,679,680],{"href":329},"documented gaps"," rather than things you will discover after committing.",[466,683,684],{},"If your application is small enough that you need a button, a card, and one list, write them. The argument here starts at the point where you need a sheet that drags, a select that a screen reader can use, and a theme that survives contact with a device.",[485,686,688],{"id":687},"related","Related",[690,691,692,698,703,708],"card-group",{},[693,694,695],"card",{"icon":426,"title":423,"to":424},[466,696,697],{},"Every component library available for Lynx today, and which framework each binds to.",[693,699,700],{"icon":459,"title":456,"to":457},[466,701,702],{},"The engine constraints behind every theme decision, and what breaks silently.",[693,704,705],{"icon":27,"title":24,"to":25},[466,706,707],{},"Copy component source into your own repo, shadcn-style.",[693,709,711],{"icon":33,"title":710,"to":6},"Get started",[466,712,713],{},"Install the packages and render a first component.",{"title":715,"searchDepth":716,"depth":717,"links":718},"",1,2,[719,720,721,722,723,724],{"id":487,"depth":717,"text":488},{"id":552,"depth":717,"text":553},{"id":580,"depth":717,"text":581},{"id":602,"depth":717,"text":603},{"id":662,"depth":717,"text":663},{"id":687,"depth":717,"text":688},"What a component library is actually worth on Lynx, how the headless and styled layers differ, and when copying the source with the CLI beats depending on the package.","md",{},{"icon":421},{"title":730,"description":731},"Why use Vy UI for Vue Lynx","Why a Lynx component library is worth more than the components it ships, how Vy UI's headless core and styled kit differ, and when to use the shadcn-style CLI instead.","djzeGDEVeFXgGTUzdxmM-l_yfFlSv1_oBUHLN5Hvf6Q",[734,736],{"title":414,"path":415,"stem":416,"description":735,"icon":-1,"children":-1,"navigation":-1},"Vue Lynx 0.5 can render your first screen on the main thread before any background JavaScript runs, which removes the blank frame at launch. The flag, the rules your components have to obey, and what it costs.",{"title":423,"path":424,"stem":425,"description":737,"icon":-1,"children":-1,"navigation":-1},"A comparison of the UI component libraries available for Lynx today, covering what each one ships, which framework it targets, and how mature it is.",1785060130256]