Frappe UI React

Frappe UI React & React Native

Demo

• Youtube Demo - https://youtu.be/kNRrUVyH_wo

• Frappe Gameplan app block - https://frappe-ui-react.tmls.dev/gameplan

• Frappe LMS app block - https://frappe-ui-react.tmls.dev/lms

• All components showcase - https://frappe-ui-react.tmls.dev/kitchen-sink

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

• LMS

Features

• Complete set of base components (Buttons, Inputs, etc.)

• Fully typed with TypeScript

• Responsive and accessible components

• Comprehensive documentation and examples

• Follows Frappe's Espresso UI - https://www.figma.com/community/file/1407648399328528443 specifications

• All the component are available in a url, drop-in our components using Shadcn to any repo

Tech Stack

• Next.js

• React 18+

• React Native

• TypeScript

• Tailwind CSS

• Radix UI (for accessible primitives)