{"id":13611662,"url":"https://github.com/pmndrs/uikit","last_synced_at":"2025-05-12T15:19:56.583Z","repository":{"id":222708350,"uuid":"758157194","full_name":"pmndrs/uikit","owner":"pmndrs","description":"🎨 user interfaces for react-three-fiber","archived":false,"fork":false,"pushed_at":"2025-04-21T20:18:26.000Z","size":173759,"stargazers_count":2873,"open_issues_count":40,"forks_count":154,"subscribers_count":26,"default_branch":"main","last_synced_at":"2025-04-23T17:18:17.016Z","etag":null,"topics":["flexbox","r3f","react","threejs","typescript","uikit","userinterface","yoga"],"latest_commit_sha":null,"homepage":"https://pmndrs.github.io/uikit/docs/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pmndrs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"bbohlender","polar":"bbohlender"}},"created_at":"2024-02-15T18:26:49.000Z","updated_at":"2025-04-23T04:33:22.000Z","dependencies_parsed_at":"2024-11-06T14:40:21.371Z","dependency_job_id":null,"html_url":"https://github.com/pmndrs/uikit","commit_stats":{"total_commits":274,"total_committers":23,"mean_commits":11.91304347826087,"dds":"0.18613138686131392","last_synced_commit":"02e6afd4dde9a1fbedbcc0ce84b4aa9d5c346f68"},"previous_names":["pmndrs/uikit"],"tags_count":67,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Fuikit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Fuikit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Fuikit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Fuikit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pmndrs","download_url":"https://codeload.github.com/pmndrs/uikit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250477820,"owners_count":21437049,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flexbox","r3f","react","threejs","typescript","uikit","userinterface","yoga"],"created_at":"2024-08-01T19:01:59.816Z","updated_at":"2025-04-23T17:18:49.707Z","avatar_url":"https://github.com/pmndrs.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./docs/getting-started/logo.svg\" width=\"100\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003euikit\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003eBuild performant 3D user interfaces for\u003cbr/\u003e  threejs using R3F and yoga.\u003c/h3\u003e\n\u003cbr/\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://npmjs.com/package/@react-three/uikit\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@react-three/uikit?style=flat\u0026colorA=000000\u0026colorB=000000\" alt=\"NPM\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmjs.com/package/@react-three/uikit\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dt/@react-three/uikit.svg?style=flat\u0026colorA=000000\u0026colorB=000000\" alt=\"NPM\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://twitter.com/pmndrs\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs\u0026style=flat\u0026colorA=000000\u0026colorB=000000\u0026logo=twitter\u0026logoColor=000000\" alt=\"Twitter\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://discord.gg/ZZjjNvJ\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/discord/740090768164651008?style=flat\u0026colorA=000000\u0026colorB=000000\u0026label=discord\u0026logo=discord\u0026logoColor=000000\" alt=\"Discord\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e Perfect for games, XR (VR/AR), and any web-based Spatial Computing App.\n\n```bash\nnpm install three @react-three/fiber @react-three/uikit\n```\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](./docs/getting-started/basic-example.gif) |\n| --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |\n\n```jsx\nimport { createRoot } from 'react-dom/client'\nimport React from 'react'\nimport { Canvas } from '@react-three/fiber'\nimport { Fullscreen, Container } from '@react-three/uikit'\n\ncreateRoot(document.getElementById('root')).render(\n  \u003cCanvas\u003e\n    \u003cFullscreen flexDirection=\"row\" padding={10} gap={10}\u003e\n      \u003cContainer flexGrow={1} backgroundOpacity={0.5} hover={{ backgroundOpacity: 1 }} backgroundColor=\"red\" /\u003e\n      \u003cContainer flexGrow={1} backgroundOpacity={0.5} hover={{ backgroundOpacity: 1 }} backgroundColor=\"blue\" /\u003e\n    \u003c/Fullscreen\u003e\n  \u003c/Canvas\u003e,\n)\n```\n\n## How to get started\n\n\u003e Some familiarity with\n\u003e react, threejs, and @react-three/fiber, is recommended.\n\nGet started with **[building your first layout](https://docs.pmnd.rs/uikit/getting-started/first-layout)**, take a look at our **[examples](https://docs.pmnd.rs/uikit/getting-started/examples)** to see uikit in action, or learn more about:\n\n- [All components and their properties](https://docs.pmnd.rs/uikit/getting-started/components-and-properties)\n- [Interactivity](https://docs.pmnd.rs/uikit/tutorials/interactivity)\n- [Custom materials](https://docs.pmnd.rs/uikit/tutorials/custom-materials)\n- [Custom fonts](https://docs.pmnd.rs/uikit/tutorials/custom-fonts)\n- [Responsive user interfaces](https://docs.pmnd.rs/uikit/tutorials/responsive)\n- [Scrolling](https://docs.pmnd.rs/uikit/tutorials/scroll)\n- [Sizing](https://docs.pmnd.rs/uikit/tutorials/sizing)\n- [Common pitfalls](https://docs.pmnd.rs/uikit/advanced/pitfalls)\n- [Optimize performance](https://docs.pmnd.rs/uikit/advanced/performance)\n- [Theming components](https://docs.pmnd.rs/uikit/advanced/theming)\n\n## Pre-styled component kits\n\nWe provide multiple kits containing **themable pre-styled components**.\n\n| \u003ch3\u003edefault\u003c/h3\u003e _based on [Shadcn](https://github.com/shadcn-ui/ui)_                | \u003ch3\u003eapfel\u003c/h3\u003e _inspired by AVP_                                                 |\n| ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |\n| ![Overview over all default components](./docs/getting-started/default-overview.jpg) | ![Overview over all apfel components](./docs/getting-started/apfel-overview.jpg) |\n| [View All Components](https://docs.pmnd.rs/uikit/default-kit/accordion)              | [View All Components](https://docs.pmnd.rs/uikit/apfel-kit/button)               |\n| `npm i @react-three/uikit-default`                                                   | `npm i @react-three/uikit-apfel`                                                 |\n\n## Migration guides\n\n- from [Koestlich](https://docs.pmnd.rs/uikit/migration/from-koestlich)\n- from [HTML/CSS](https://docs.pmnd.rs/uikit/migration/from-html-css)\n- from [Tailwind](https://docs.pmnd.rs/uikit/migration/from-tailwind)\n\n## Sponsors\n\nThis project is supported by a few companies and individuals building cutting edge 3D Web \u0026 XR experiences. Check them out!\n\n![Sponsors Overview](https://bbohlender.github.io/sponsors/screenshot.png)\n","funding_links":["https://github.com/sponsors/bbohlender","https://polar.sh/bbohlender"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmndrs%2Fuikit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpmndrs%2Fuikit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmndrs%2Fuikit/lists"}