https://github.com/timelessco/frappe-ui-react
React Component Library for Espresso UI by Frappe
https://github.com/timelessco/frappe-ui-react
fosshack fosshack25 frappe hackathon reactjs reactjs-components
Last synced: 16 days ago
JSON representation
React Component Library for Espresso UI by Frappe
- Host: GitHub
- URL: https://github.com/timelessco/frappe-ui-react
- Owner: timelessco
- License: mit
- Created: 2025-02-18T12:08:18.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2026-01-21T06:35:32.000Z (24 days ago)
- Last Synced: 2026-01-21T18:31:29.035Z (24 days ago)
- Topics: fosshack, fosshack25, frappe, hackathon, reactjs, reactjs-components
- Language: TypeScript
- Homepage: http://frappe-ui-react.tmls.dev
- Size: 1.77 MB
- Stars: 24
- Watchers: 4
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
Frappe UI React & React Native
A React component library implementing Frappe's Espresso UI design system.
## Overview
frappe-ui-react is a comprehensive React & 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.
## Why This Library?
### Community Need
The 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:
- Build UI components from scratch
- Use inconsistent UI libraries that don't match Frappe's design language
- Switch to Vue.js (which might not be feasible for existing React projects)
### Design Consistency
This 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:
- Gameplan
- Frappe Cloud
- Helpdesk
## Features
- Complete set of base components (Buttons, Inputs, etc.)
- Fully typed with TypeScript
- Responsive and accessible components
- Comprehensive documentation and examples
### Developer Experience
- Type-safe components with TypeScript
- Follows [Frappe's Espresso UI](https://www.figma.com/community/file/1407648399328528443) specifications
- Drop-in components matching Frappe's Vue components
## Technical Details
### Built With
- React 18+
- React Native
- TypeScript
- Tailwind CSS
- Radix UI (for accessible primitives)
### Build the nextjs registry with docs website
```bash
turbo run build
```
### Build and start the nextjs registry with docs website
```bash
turbo run start
```
## Available demos
- [`/gameplan`](https://frappe-ui-react.tmls.dev/gameplan) - showcases the Frappe Gameplan app block
- [`/lms`](https://frappe-ui-react.tmls.dev/lms) - showcases the Frappe LMS app block
- [`/kitchen-sink`](https://frappe-ui-react.tmls.dev/kitchen-sink) - showcases all components
### Design System
Components are built following the [Espresso UI Design System](https://www.figma.com/community/file/1407648399328528443) specifications, ensuring:
- Consistent spacing
- Color schemes
- Typography
- Component behavior
- Accessibility patterns
## Structure
```txt
.
├── apps
│ └── registry (shadcn component registry with nextjs website)
└── native-app (react native app)
```
## Apps
- [apps/registry](./apps/registry): Next.js, Typescript [README](./apps/registry/README.md) | [CHANGELOG](./apps/registry/CHANGELOG.md)
- [native-app](./native-app): Frappe UI React Native, Typescript [README](./native-app/README.md)
## Development
See [`.github/CONTRIBUTING.md`](./.github/CONTRIBUTING.md), then
[`.github/DEVELOPMENT.md`](./.github/DEVELOPMENT.md). Thanks! 💖
## License
MIT License - See [LICENSE](LICENSE) for details.
## Contributors
Navin Moorthy
💻 🚇 🚧
Naveen MC
🚧 💻 📖
Karthik
🚧 💻
padmanathan10
🚧 💻
> 💙 This package uses template files from
> [@JoshuaKGoldberg](https://github.com/JoshuaKGoldberg)'s
> [template-typescript-node-package](https://github.com/JoshuaKGoldberg/template-typescript-node-package).