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 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 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 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

turbo run build

Build and start the nextjs registry with docs website

turbo run start

Available demos

• /gameplan - showcases the Frappe Gameplan app block
• /lms - showcases the Frappe LMS app block
• /kitchen-sink - showcases all components

Design System

Components are built following the Espresso UI Design System specifications, ensuring:

• Consistent spacing
• Color schemes
• Typography
• Component behavior
• Accessibility patterns

Structure

.
├── apps
│   └── registry (shadcn component registry with nextjs website)
└── native-app (react native app)

Apps

• apps/registry: Next.js, Typescript README | CHANGELOG
• native-app: Frappe UI React Native, Typescript README

Development

See .github/CONTRIBUTING.md, then .github/DEVELOPMENT.md. Thanks! 💖

License

MIT License - See LICENSE for details.

Contributors

Navin Moorthy 💻 🚇 🚧

Naveen MC 🚧 💻 📖

Karthik 🚧 💻

padmanathan10 🚧 💻

💙 This package uses template files from @JoshuaKGoldberg's template-typescript-node-package.