{"id":42633321,"url":"https://github.com/timelessco/frappe-ui-react","last_synced_at":"2026-01-29T05:26:30.254Z","repository":{"id":278185817,"uuid":"934789689","full_name":"timelessco/frappe-ui-react","owner":"timelessco","description":"React Component Library for Espresso UI by Frappe","archived":false,"fork":false,"pushed_at":"2026-01-21T06:35:32.000Z","size":1861,"stargazers_count":24,"open_issues_count":5,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2026-01-21T18:31:29.035Z","etag":null,"topics":["fosshack","fosshack25","frappe","hackathon","reactjs","reactjs-components"],"latest_commit_sha":null,"homepage":"http://frappe-ui-react.tmls.dev","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/timelessco.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-02-18T12:08:18.000Z","updated_at":"2025-12-12T07:00:20.000Z","dependencies_parsed_at":"2025-02-18T13:29:41.853Z","dependency_job_id":"e828b571-b748-4dd1-b323-3fe035575a0d","html_url":"https://github.com/timelessco/frappe-ui-react","commit_stats":null,"previous_names":["timelessco/frappe-ui-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/timelessco/frappe-ui-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelessco%2Ffrappe-ui-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelessco%2Ffrappe-ui-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelessco%2Ffrappe-ui-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelessco%2Ffrappe-ui-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timelessco","download_url":"https://codeload.github.com/timelessco/frappe-ui-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelessco%2Ffrappe-ui-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28863564,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T22:56:21.783Z","status":"online","status_checked_at":"2026-01-29T02:00:06.714Z","response_time":59,"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":["fosshack","fosshack25","frappe","hackathon","reactjs","reactjs-components"],"created_at":"2026-01-29T05:26:29.547Z","updated_at":"2026-01-29T05:26:30.245Z","avatar_url":"https://github.com/timelessco.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n \u003ch1 align=\"center\"\u003e\u003ca aria-label=\"Frappe UI React\" href=\"https://github.com/timelessco/frappe-ui-react\"\u003eFrappe UI React \u0026 React Native\u003c/a\u003e\u003c/h1\u003e\n \u003cp align=\"center\"\u003eA React component library implementing Frappe's Espresso UI design system.\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://github.com/timelessco/frappe-ui-react/blob/main/.github/CODE_OF_CONDUCT.md\" target=\"_blank\"\u003e\n  \u003cimg alt=\"Contributor Covenant\" src=\"https://img.shields.io/badge/code_of_conduct-enforced-21bb42\" /\u003e\n \u003c/a\u003e\n \u003cimg alt=\"Style: Prettier\" src=\"https://img.shields.io/badge/style-prettier-21bb42.svg\" /\u003e\n \u003cimg alt=\"TypeScript: Strict\" src=\"https://img.shields.io/badge/typescript-strict-21bb42.svg\" /\u003e\n \u003ca href=\"#contributors\" target=\"_blank\"\u003e\n  \u003c!-- prettier-ignore-start --\u003e\n  \u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n\u003cimg alt=\"All Contributors: 4\" src=\"https://img.shields.io/badge/all_contributors-4-21bb42.svg\" /\u003e\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n  \u003c!-- prettier-ignore-end --\u003e\n \u003c/a\u003e\n\u003c/p\u003e\n\n## Overview\n\nfrappe-ui-react is a comprehensive React \u0026 React Native component library that implements Frappe's Espresso UI design system. While Frappe officially uses Vue.js internally, this library bridges the gap for React developers in the Frappe ecosystem who want to maintain consistent design language across their applications.\n\n## Why This Library?\n\n### Community Need\n\nThe Frappe ecosystem provides excellent tools including a [React SDK](https://github.com/The-Commit-Company/frappe-react-sdk) for backend interactions, but lacks official React components. This forces React developers to either:\n\n- Build UI components from scratch\n- Use inconsistent UI libraries that don't match Frappe's design language\n- Switch to Vue.js (which might not be feasible for existing React projects)\n\n### Design Consistency\n\nThis library ensures React applications can maintain the same look and feel as official Frappe products which used [frappe-ui](https://github.com/frappe/frappe-ui) like:\n\n- Gameplan\n- Frappe Cloud\n- Helpdesk\n\n## Features\n\n- Complete set of base components (Buttons, Inputs, etc.)\n- Fully typed with TypeScript\n- Responsive and accessible components\n- Comprehensive documentation and examples\n\n### Developer Experience\n\n- Type-safe components with TypeScript\n- Follows [Frappe's Espresso UI](https://www.figma.com/community/file/1407648399328528443) specifications\n- Drop-in components matching Frappe's Vue components\n\n## Technical Details\n\n### Built With\n\n- React 18+\n- React Native\n- TypeScript\n- Tailwind CSS\n- Radix UI (for accessible primitives)\n\n### Build the nextjs registry with docs website\n\n```bash\nturbo run build\n```\n\n### Build and start the nextjs registry with docs website\n\n```bash\nturbo run start\n```\n\n## Available demos\n\n- [`/gameplan`](https://frappe-ui-react.tmls.dev/gameplan) - showcases the Frappe Gameplan app block\n- [`/lms`](https://frappe-ui-react.tmls.dev/lms) - showcases the Frappe LMS app block\n- [`/kitchen-sink`](https://frappe-ui-react.tmls.dev/kitchen-sink) - showcases all components\n\n### Design System\n\nComponents are built following the [Espresso UI Design System](https://www.figma.com/community/file/1407648399328528443) specifications, ensuring:\n\n- Consistent spacing\n- Color schemes\n- Typography\n- Component behavior\n- Accessibility patterns\n\n## Structure\n\n```txt\n.\n├── apps\n│   └── registry (shadcn component registry with nextjs website)\n└── native-app (react native app)\n```\n\n## Apps\n\n- [apps/registry](./apps/registry): Next.js, Typescript [README](./apps/registry/README.md) | [CHANGELOG](./apps/registry/CHANGELOG.md)\n- [native-app](./native-app): Frappe UI React Native, Typescript [README](./native-app/README.md)\n\n## Development\n\nSee [`.github/CONTRIBUTING.md`](./.github/CONTRIBUTING.md), then\n[`.github/DEVELOPMENT.md`](./.github/DEVELOPMENT.md). Thanks! 💖\n\n## License\n\nMIT License - See [LICENSE](LICENSE) for details.\n\n## Contributors\n\n\u003c!-- spellchecker: disable --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://navinmoorthy.me/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/39694575?v=4?s=100\" width=\"100px;\" alt=\"Navin Moorthy\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNavin Moorthy\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/timelessco/frappe-ui-react/commits?author=navin-moorthy\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#infra-navin-moorthy\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"#maintenance-navin-moorthy\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://mcnaveen.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/8493007?v=4?s=100\" width=\"100px;\" alt=\"Naveen MC\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNaveen MC\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#maintenance-mcnaveen\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"https://github.com/timelessco/frappe-ui-react/commits?author=mcnaveen\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/timelessco/frappe-ui-react/commits?author=mcnaveen\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://bento.me/iamkarthik\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/35562287?v=4?s=100\" width=\"100px;\" alt=\"Karthik\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKarthik\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#maintenance-karthik-b-06\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"https://github.com/timelessco/frappe-ui-react/commits?author=karthik-b-06\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/padmanathan10\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/58564318?v=4?s=100\" width=\"100px;\" alt=\"padmanathan10\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003epadmanathan10\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#maintenance-padmanathan10\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"https://github.com/timelessco/frappe-ui-react/commits?author=padmanathan10\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\u003c!-- spellchecker: enable --\u003e\n\u003csub\u003e\n\n\u003e 💙 This package uses template files from\n\u003e [@JoshuaKGoldberg](https://github.com/JoshuaKGoldberg)'s\n\u003e [template-typescript-node-package](https://github.com/JoshuaKGoldberg/template-typescript-node-package).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimelessco%2Ffrappe-ui-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimelessco%2Ffrappe-ui-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimelessco%2Ffrappe-ui-react/lists"}