[{"data":1,"prerenderedAt":340},["ShallowReactive",2],{"navigation":3,"\u002Fworks\u002Fmockline":46},[4],{"title":5,"path":6,"stem":7,"children":8,"page":45},"Works","\u002Fworks","works",[9,13,17,21,25,29,33,37,41],{"title":10,"path":11,"stem":12},"Currencia","\u002Fworks\u002Fcurrencia","works\u002Fcurrencia",{"title":14,"path":15,"stem":16},"Folio Magazine","\u002Fworks\u002Ffolio-magazine","works\u002Ffolio-magazine",{"title":18,"path":19,"stem":20},"Helpr","\u002Fworks\u002Fhelpr","works\u002Fhelpr",{"title":22,"path":23,"stem":24},"IV Patisserie","\u002Fworks\u002Fiv-patisserie","works\u002Fiv-patisserie",{"title":26,"path":27,"stem":28},"Mockline","\u002Fworks\u002Fmockline","works\u002Fmockline",{"title":30,"path":31,"stem":32},"Portfolio","\u002Fworks\u002Fportfolio","works\u002Fportfolio",{"title":34,"path":35,"stem":36},"Raftou - Mobile Game","\u002Fworks\u002Fraftou","works\u002Fraftou",{"title":38,"path":39,"stem":40},"Raycast x Bambulab","\u002Fworks\u002Fraycast-bambulab","works\u002Fraycast-bambulab",{"title":42,"path":43,"stem":44},"Combat Robot","\u002Fworks\u002Frobot","works\u002Frobot",false,{"id":47,"title":26,"authors":48,"body":60,"contextPreview":322,"date":323,"description":324,"extension":325,"image":326,"meta":327,"minRead":328,"navigation":329,"path":27,"roles":330,"seo":333,"stem":28,"teamName":334,"technologies":335,"url":337,"year":338,"__hash__":339},"works\u002Fworks\u002Fmockline.md",[49,55],{"name":50,"to":51,"target":52,"avatar":53},"Johann Cavallucci","https:\u002F\u002Fx.com\u002FJohannCVL","_blank",{"src":54,"alt":50},"https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F72015679?v=4",{"name":56,"to":57,"target":52,"avatar":58},"Hugo Richard","https:\u002F\u002Fx.com\u002FHugoRCD__",{"src":59,"alt":56},"https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F71938701?v=4",{"type":61,"value":62,"toc":314},"minimark",[63,68,73,96,113,120,123,127,223,225,229,245,247,251,257,268,271,273,298,300],[64,65,67],"h1",{"id":66},"mockline-modern-ui-component-library","Mockline – Modern UI component library",[69,70,72],"h2",{"id":71},"overview","Overview",[74,75,76,79,80,83,84,87,88,91,92,95],"p",{},[77,78,26],"strong",{}," is a modern, multi-framework component library, developed as a final-year project.",[81,82],"br",{},"\nThe goal was to create a library similar to ",[77,85,86],{},"NuxtUI"," or ",[77,89,90],{},"RadixUI",", but usable across ",[77,93,94],{},"Nuxt, Vue, React, and Next",".",[74,97,98,99,102,103,95,106,108,109,112],{},"The ambition was to deliver a ",[77,100,101],{},"modern, minimal design"," combined with an excellent ",[77,104,105],{},"DX (Developer Experience)",[81,107],{},"\nThe project was initiated and led by ",[77,110,111],{},"HugoRCD",". While not 100% complete, it already provides a solid foundation with a clean structure, making it easy and practical to add new components.",[74,114,115],{},[116,117],"img",{"alt":118,"src":119},"image","\u002Fassets\u002Fworks\u002Fexample-components.webp",[121,122],"hr",{},[69,124,126],{"id":125},"technologies-used","Technologies Used",[128,129,130,143],"table",{},[131,132,133],"thead",{},[134,135,136,140],"tr",{},[137,138,139],"th",{},"Technology",[137,141,142],{},"Role",[144,145,146,157,171,183,193,203,213],"tbody",{},[134,147,148,154],{},[149,150,151],"td",{},[77,152,153],{},"TypeScript",[149,155,156],{},"Type safety and robustness",[134,158,159,168],{},[149,160,161,164,165],{},[77,162,163],{},"Nuxt"," \u002F ",[77,166,167],{},"Vue",[149,169,170],{},"Targeted front-end frameworks",[134,172,173,181],{},[149,174,175,164,178],{},[77,176,177],{},"Next",[77,179,180],{},"React",[149,182,170],{},[134,184,185,190],{},[149,186,187],{},[77,188,189],{},"TailwindCSS v4",[149,191,192],{},"Modern and minimal styling",[134,194,195,200],{},[149,196,197],{},[77,198,199],{},"Tailwind Merge",[149,201,202],{},"Tailwind class management",[134,204,205,210],{},[149,206,207],{},[77,208,209],{},"Tailwind Variants",[149,211,212],{},"Component variants management",[134,214,215,220],{},[149,216,217],{},[77,218,219],{},"Turborepo",[149,221,222],{},"Monorepo and project organization",[121,224],{},[69,226,228],{"id":227},"challenges","Challenges",[230,231,232,239],"ul",{},[233,234,235,238],"li",{},[77,236,237],{},"Building the core foundation"," of the library: ensuring new components could be added quickly and efficiently.",[233,240,241,244],{},[77,242,243],{},"Multi-framework support",": managing compatibility across four environments (Nuxt, Vue, React, Next) in a single library.",[121,246],{},[69,248,250],{"id":249},"conclusion","Conclusion",[74,252,253,254,256],{},"Mockline was one of the most ambitious projects we set out to build.",[81,255],{},"\nAlthough we don’t plan to maintain it long-term, it was an incredibly valuable learning experience.",[74,258,259,260,263,264,267],{},"The project reached a ",[77,261,262],{},"fully functional state for Vue and Nuxt",", while the ",[77,265,266],{},"React and Next versions",", though working, were not as fully developed.",[74,269,270],{},"In short: an ambitious, challenging, and highly rewarding project that pushed us forward technically and gave us deeper insights into multi-framework development.",[121,272],{},[274,275,281,282,281,294],"a",{"href":276,"target":52,"className":277},"https:\u002F\u002Fgithub.com\u002FMockline\u002Fmockline",[278,279,280],"flex","items-center","space-x-2","\n  ",[283,284,289,290,281],"svg",{"width":285,"height":285,"viewBox":286,"fill":287,"xmlns":288},"24","0 0 24 24","currentColor","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","\n    ",[291,292],"path",{"d":293},"M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2",[295,296,297],"span",{},"Mockline on GitHub",[81,299],{},[274,301,281,304,281,311],{"href":302,"target":52,"className":303},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@mockline\u002Futils",[278,279,280],[283,305,308],{"width":306,"height":306,"viewBox":307,"xmlns":288},"22","0 0 512 512",[291,309],{"fill":287,"d":310},"M71.609 112.569v286.649h143.432v-215.04h71.608v215.04h71.608V112.569zM430.08 40.96v430.08H0V40.96z",[295,312,313],{},"Mockline on NPM",{"title":315,"searchDepth":316,"depth":316,"links":317},"",2,[318,319,320,321],{"id":71,"depth":316,"text":72},{"id":125,"depth":316,"text":126},{"id":227,"depth":316,"text":228},{"id":249,"depth":316,"text":250},"Ambitious multi-framework component library built with TypeScript, Tailwind, and Turborepo, focused on design-system consistency, DX, shared components across Nuxt\u002FVue\u002FReact\u002FNext in a team led by Hugo RCD in 2025.","2025-04-30","Modern UI component library focused on developer experience and design consistency.","md","\u002Fassets\u002Fworks\u002Fmockline.webp",{},5,true,[331,332],"Full Stack","UI\u002FUX Designer",{"title":26,"description":324},"Team",[163,336,153],"Tailwind","https:\u002F\u002Fmockline.hrcd.fr\u002F","2025","qkeAN3zeUKzb1r2cwbck8u1s239Di7YL72L9d0iWG5Q",1778859912253]