[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73753":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":34,"readmeContent":35,"aiSummary":36,"trendingCount":16,"starSnapshotCount":16,"syncStatus":37,"lastSyncTime":38,"discoverSource":39},73753,"uikit","pmndrs\u002Fuikit","pmndrs","🎨 user interfaces for react-three-fiber","https:\u002F\u002Fpmndrs.github.io\u002Fuikit\u002Fdocs\u002F",null,"TypeScript",3165,173,25,39,0,1,4,16,3,64.32,"Other",false,"main",true,[27,28,29,30,31,5,32,33],"flexbox","r3f","react","threejs","typescript","userinterface","yoga","2026-06-12 04:01:11","\u003Cp align=\"center\">\n  \u003Cimg src=\".\u002Fdocs\u002Fgetting-started\u002Flogo.svg\" width=\"100\" \u002F>\n\u003C\u002Fp>\n\n\u003Ch1 align=\"center\">uikit\u003C\u002Fh1>\n\u003Ch3 align=\"center\">Build performant 3D user interfaces for threejs.\u003C\u002Fh3>\n\u003Cbr\u002F>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fnpmjs.com\u002Fpackage\u002F@react-three\u002Fuikit\" target=\"_blank\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@react-three\u002Fuikit?style=flat&colorA=000000&colorB=000000\" alt=\"NPM\" \u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fnpmjs.com\u002Fpackage\u002F@react-three\u002Fuikit\" target=\"_blank\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@react-three\u002Fuikit.svg?style=flat&colorA=000000&colorB=000000\" alt=\"NPM\" \u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fpmndrs\" target=\"_blank\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Ftwitter\u002Ffollow\u002Fpmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000\" alt=\"Twitter\" \u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002FZZjjNvJ\" target=\"_blank\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000\" alt=\"Discord\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n> Perfect for games, XR (VR\u002FAR), and any web-based Spatial Computing App.\n\n### What does it look like?\n\n| A simple UI with 2 containers horizontally aligned, rendered in fullscreen. When the user hovers over a container, the container's opacity changes. | ![render of the above code](.\u002Fdocs\u002Fgetting-started\u002Fbasic-example.gif) |\n| --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |\n\nSource code when using `@react-three\u002Fuikit`:\n\n```jsx\nimport { createRoot } from 'react-dom\u002Fclient'\nimport React from 'react'\nimport { Canvas } from '@react-three\u002Ffiber'\nimport { Fullscreen, Container } from '@react-three\u002Fuikit'\n\ncreateRoot(document.getElementById('root')).render(\n  \u003CCanvas>\n    \u003CFullscreen flexDirection=\"row\" padding={10} gap={10}>\n      \u003CContainer flexGrow={1} opacity={0.5} hover={{ opacity: 1 }} backgroundColor=\"red\" \u002F>\n      \u003CContainer flexGrow={1} opacity={0.5} hover={{ opacity: 1 }} backgroundColor=\"blue\" \u002F>\n    \u003C\u002FFullscreen>\n  \u003C\u002FCanvas>,\n)\n```\n\n## How to get started\n\nIf you are using `@react-three\u002Ffiber`, get started with **[building your first layout](https:\u002F\u002Fdocs.pmnd.rs\u002Fuikit\u002Fgetting-started\u002Ffirst-layout)**, take a look at our **[examples](https:\u002F\u002Fdocs.pmnd.rs\u002Fuikit\u002Fgetting-started\u002Fexamples)** to see uikit in action. If you want to use vanilla three.js, visit [this tutorial](https:\u002F\u002Fpmndrs.github.io\u002Fuikit\u002Fdocs\u002Fgetting-started\u002Fvanilla). Alternatively, learn more about:\n\n- [All components and their properties](https:\u002F\u002Fdocs.pmnd.rs\u002Fuikit\u002Fgetting-started\u002Fcomponents-and-properties)\n- [Interactivity](https:\u002F\u002Fdocs.pmnd.rs\u002Fuikit\u002Ftutorials\u002Finteractivity)\n- [Custom materials](https:\u002F\u002Fdocs.pmnd.rs\u002Fuikit\u002Ftutorials\u002Fcustom-materials)\n- [Custom fonts](https:\u002F\u002Fdocs.pmnd.rs\u002Fuikit\u002Ftutorials\u002Fcustom-fonts)\n- [Responsive user interfaces](https:\u002F\u002Fdocs.pmnd.rs\u002Fuikit\u002Ftutorials\u002Fresponsive)\n- [Scrolling](https:\u002F\u002Fdocs.pmnd.rs\u002Fuikit\u002Ftutorials\u002Fscroll)\n- [Sizing](https:\u002F\u002Fdocs.pmnd.rs\u002Fuikit\u002Ftutorials\u002Fsizing)\n- [Common pitfalls](https:\u002F\u002Fdocs.pmnd.rs\u002Fuikit\u002Fadvanced\u002Fpitfalls)\n- [Optimize performance](https:\u002F\u002Fdocs.pmnd.rs\u002Fuikit\u002Fadvanced\u002Fperformance)\n- [Theming components](https:\u002F\u002Fdocs.pmnd.rs\u002Fuikit\u002Fadvanced\u002Ftheming)\n\n## Pre-styled component kits\n\nWe provide multiple kits containing **themable pre-styled components**.\n\n| \u003Ch3>default\u003C\u002Fh3> _based on [Shadcn](https:\u002F\u002Fgithub.com\u002Fshadcn-ui\u002Fui)_                | \u003Ch3>horizon-kit\u003C\u002Fh3> _based on [RLDS](https:\u002F\u002Fwww.figma.com\u002Fde-de\u002Fcommunity\u002Ffile\u002F1509641173090552632\u002Fmeta-horizon-os-ui-set)_ |\n| ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- |\n| ![Overview over all default components](.\u002Fdocs\u002Fgetting-started\u002Fdefault-overview.jpg) | ![Overview over all horizon components](.\u002Fdocs\u002Fgetting-started\u002Fhorizon-overview.png)                                          |\n| [View All Components](https:\u002F\u002Fdocs.pmnd.rs\u002Fuikit\u002Fdefault-kit\u002Faccordion)              | [View All Components](https:\u002F\u002Fdocs.pmnd.rs\u002Fuikit\u002Fhorizon-kit\u002Favatar)                                                          |\n| install via `@react-three\u002Fuikit-default` or `@pmndrs\u002Fuikit-default`                  | install via `@react-three\u002Fuikit-horizon` or `@pmndrs\u002Fuikit-horizon`                                                           |\n\n## Migration guides\n\n- from [Uikit 0.\\*](https:\u002F\u002Fpmndrs.github.io\u002Fuikit\u002Fdocs\u002Fmigration\u002Ffrom-version-0)\n\n## Sponsors\n\nThis project is supported by a few companies and individuals building cutting edge 3D Web & XR experiences. Check them out!\n\n![Sponsors Overview](https:\u002F\u002Fbbohlender.github.io\u002Fsponsors\u002Fscreenshot.png)\n","pmndrs\u002Fuikit 是一个用于 react-three-fiber 的用户界面库，旨在构建高性能的 3D 用户界面。其核心功能包括基于 Flexbox 布局模型的组件系统，支持 React 和 TypeScript，使得开发者能够以声明式的方式创建复杂的三维交互界面。该工具包利用了 Yoga 布局引擎来实现灵活且响应式的布局设计，并且提供了丰富的自定义选项如材质、字体等，增强了应用的表现力和互动性。它非常适合游戏开发、扩展现实（XR）项目以及任何需要在网页上进行空间计算的应用场景中使用。",2,"2026-06-11 03:47:12","high_star"]