{"id":39347806,"url":"https://github.com/loplat/loplat-ui","last_synced_at":"2026-01-18T02:24:51.468Z","repository":{"id":50438214,"uuid":"461793988","full_name":"loplat/loplat-ui","owner":"loplat","description":"A React-based UI Component Library, powered by loplat Frontend Team.","archived":false,"fork":false,"pushed_at":"2025-01-23T02:41:29.000Z","size":2647,"stargazers_count":26,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-10-05T06:41:29.842Z","etag":null,"topics":["design-system","loplat","react","typescript","ui","ui-library"],"latest_commit_sha":null,"homepage":"https://ui.loplat.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/loplat.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2022-02-21T09:40:46.000Z","updated_at":"2025-09-14T12:51:47.000Z","dependencies_parsed_at":"2024-07-31T12:08:11.842Z","dependency_job_id":null,"html_url":"https://github.com/loplat/loplat-ui","commit_stats":{"total_commits":497,"total_committers":6,"mean_commits":82.83333333333333,"dds":0.5553319919517102,"last_synced_commit":"78e8f152bb3bbdc1da28dca6502f07e5748115a3"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/loplat/loplat-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loplat%2Floplat-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loplat%2Floplat-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loplat%2Floplat-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loplat%2Floplat-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/loplat","download_url":"https://codeload.github.com/loplat/loplat-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loplat%2Floplat-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28526569,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["design-system","loplat","react","typescript","ui","ui-library"],"created_at":"2026-01-18T02:24:50.893Z","updated_at":"2026-01-18T02:24:51.458Z","avatar_url":"https://github.com/loplat.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003ca href=\"https://loplat.com/\" rel=\"noopener\" target=\"_blank\"\u003e\n  \u003cimg width=\"150\" src=\"https://loplat.com/images/loplat-logo.png\" alt=\"loplat logo\"\u003e\n\u003c/a\u003e\n\n\u003ch1\u003eloplat UI\u003c/h1\u003e\n\nA React UI Component Library, powered by loplat Frontend Team.\n\n[![license](https://badgen.net/github/license/loplat/loplat-ui)](https://github.com/loplat/loplat-ui/blob/main/LICENSE)\n[![license](https://badgen.net/npm/v/loplat-ui)](https://www.npmjs.com/package/loplat-ui)\n[![license](https://badgen.net/bundlephobia/minzip/loplat-ui)](https://bundlephobia.com/package/loplat-ui)\n[![license](https://badgen.net/npm/types/loplat-ui)](https://www.npmjs.com/package/loplat-ui)\n[![license](https://badgen.net/bundlephobia/tree-shaking/loplat-ui)](https://bundlephobia.com/package/loplat-ui)\n[![license](https://badgen.net/npm/dt/loplat-ui)](https://www.npmjs.com/package/loplat-ui)\n\n\u003c/div\u003e\n\n## Installation\n\n```sh\n// with yarn\nyarn add loplat-ui\n\n// with npm\nnpm install loplat-ui\n```\n\n## Usage\n\n### Getting Started\n\n```jsx\nimport React from 'react';\nimport { Button } from 'loplat-ui';\n\nfunction Example() {\n  return \u003cButton\u003eHello world!\u003c/Button\u003e;\n}\n```\n\n### Styling Components\n\nAll the loplat UI components are styled with `@emotion`.\n\nIf you'd like to change the styles of loplat UI components, you must use `styled` API provided by either `loplat-ui` or `@emotion/styled`.\n\n`styled` API provided by other CSS-in-JS libraries will not work as expected.\n\n```jsx\nimport { Button, styled } from 'loplat-ui';\n\nconst StyledButton = styled(Button)`\n  color: red;\n`;\n\nfunction Example() {\n  return \u003cStyledButton\u003eHello world!\u003c/StyledButton\u003e;\n}\n```\n\n## Documentation \u0026 Demo\n\nCheck out our [storybook website](https://ui.loplat.com/).\n\n## Changelog\n\nIf you have recently updated, please read the [changelog](https://github.com/loplat/loplat-ui/blob/main/CHANGELOG.md) for details of what has changed.\n\n## Roadmap\n\n- Table\n- Pagination\n- D3.js Charts\n\n## License\n\nThis project is licensed under the terms of the [MIT license](https://github.com/loplat/loplat-ui/blob/main/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floplat%2Floplat-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Floplat%2Floplat-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floplat%2Floplat-ui/lists"}