{"id":16296279,"url":"https://github.com/jannchie/roku-ui","last_synced_at":"2025-03-20T04:31:19.500Z","repository":{"id":63178582,"uuid":"521387023","full_name":"Jannchie/roku-ui","owner":"Jannchie","description":"又一个组件库，但是很好看。","archived":false,"fork":false,"pushed_at":"2023-07-01T14:20:10.000Z","size":1751,"stargazers_count":26,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-17T14:49:03.574Z","etag":null,"topics":["component","react","ui","ui-components","uikit"],"latest_commit_sha":null,"homepage":"https://roku-ui.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Jannchie.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2022-08-04T19:13:07.000Z","updated_at":"2024-09-20T23:27:07.000Z","dependencies_parsed_at":"2024-10-10T20:22:11.348Z","dependency_job_id":"b61f6de2-cfa0-4da9-b996-012c2095368b","html_url":"https://github.com/Jannchie/roku-ui","commit_stats":null,"previous_names":[],"tags_count":76,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jannchie%2Froku-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jannchie%2Froku-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jannchie%2Froku-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jannchie%2Froku-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jannchie","download_url":"https://codeload.github.com/Jannchie/roku-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244552384,"owners_count":20471065,"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":["component","react","ui","ui-components","uikit"],"created_at":"2024-10-10T20:21:55.718Z","updated_at":"2025-03-20T04:31:18.615Z","avatar_url":"https://github.com/Jannchie.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Roku UI\n\n已在这里消耗的时间：\n\n[![CodeTime badge](https://img.shields.io/endpoint?style=social\u0026url=https%3A%2F%2Fapi.codetime.dev%2Fshield%3Fid%3D2%26project%3Droku-ui%26in%3D0)](https://codetime.dev)\n\n这是一个 [React](https://reactjs.org/) 组件库。基于 [Uno CSS](https://github.com/unocss/unocss)、[Vite](https://cn.vitejs.dev) 等项目，很潮。\n\n\u003e **Warning**\n\u003e\n\u003e 这是一个开发中的 React 组件库。所有 API 可能会有非常大的变化。\n\n相对于现有的组件库，Ruku UI 试图实现以下目标：\n\n- 内置丰富而不造作的动画。\n- 内置开箱即用的高级组件。\n\n## 为什么要做一个新的的组件库？\n\n已经有许多优秀的组件库。他们都有不同的设计逻辑和依赖。而这些是我们所不能自由选择的。比如大量的组件库使用了 CSS in JS 的技术——而这一技术是否值得引入仍然存在争议。因为这存在潜在的性能问题，同时也会增加开发者的学习成本。\n\n有一些组件库支持很多 Fancy 的写法和功能，能够深入进行定制，但是打包体积变得巨大，即使开启了 Tree Shaking，也不能显著减少包大小。\n\n另一方面，许多组件库没有提供业务所需的独特组件，或者没有提供令人满意的动画和效果。这些组件库虽然支持定制，但是如果要大规模地改变样式，需要深入理解他们的代码是如何控制样式的，否则很容易造成冲突。\n\n但实践中，从已有的组件上进行修改甚至不如自己从头做一套来得快。于是我搓了一堆自定义组件分散在自己维护的各个项目里。随着我技术的提升，我发现个人维护一个组件库项目也不是不可能的事情。\n\n因此，为了能够复用这些自定义的动画效果和组件，我启动了这个项目。我希望至少在我的个人项目中，我不需要再魔改他们。它的可定制性肯定不够强，但我希望默认的组件配置足以覆盖我个人的全部需求。\n\n也希望它能够覆盖你的需求。\n\n## 使用案例\n\n只有很少的一部分网站使用了 Roku UI，全部都是我做的。不过那又如何，至少只要我还在做网站，这个项目就会一直更新下去。\n\n由 Roku UI 驱动的网站有：\n\n- [Roku UI 官方文档](https://roku-ui.vercel.app/)：也就是你正在浏览的网站。\n- [Zeroroku](https://zeroroku.com/)：一个数据观测站点。\n\n如果你竟然真的敢于将这个项目用在了自己的网站中，那么非常欢迎向我提交 Issue，我会把你的网站追加在这里。\n\n## 安装\n\n可以朴实无华地使用 [pnpm](https://pnpm.io/)、[npm](https://www.npmjs.com/) 或 [yarn](https://yarnpkg.com/) 安装。开发时使用的是 pnpm，因此我更推荐你使用它。\n\n```bash\npnpm install roku-ui\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjannchie%2Froku-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjannchie%2Froku-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjannchie%2Froku-ui/lists"}