Frappe UI React: A Modern React Component Library for Frappe

Frappe UI is the official component library built with Vue 3 and Tailwind CSS, providing ready‑made components like buttons, dialogs, data tables, etc. This ensures a consistent design across Frappe apps. 

The Frappe UI library is based on the Espresso design system, which covers design elements used by all modern Frappe apps. The official Frappe UI follows Espresso closely but uses Vue.js.

However, many developers and agencies like rtCamp prefer React over Vue. Until recently, React developers using Frappe had no official React UI kit and had to build custom components. The amazing team at The Commit Co maintains a React SDK for backend APIs; however, every React developer has to build their own UI components, which often pushes developers to either adopt Vue or invest time in building custom React components. The new Frappe UI React library fills this gap by providing components in React.

The Frappe UI React library has now been released as an open‑source npm package (@rtcamp/frappe-ui-react).  It brings a complete set of base UI components (buttons, inputs, dialogs, tables, etc.) fully typed in TypeScript, focused on responsiveness and accessibility. The components can be browsed on opensource.rtcamp.com/frappe-ui-react. 

Not only this, we are collaborating with Timeless to expand the Espresso design library to cover more components that we need for a number of Frappe Apps we are working on to be released in open source. Most notable of them are a Project Management System (PMS) and an Applicant Tracking System (ATS). Also we plan to refurbish our existing React based Frappe apps to Frappe React UI.

Why Frappe UI in React?

There are many reasons, the most important being the size of the React ecosystem, opportunities it presents, and sometimes clients have an explicit mandate to use React.

That being said, we had a choice to use any existing React UI library, but having multiple UI libraries within one ecosystem increases cognitive load for users switching between apps built using different UI libraries. 

Hence, we decided to bring Espresso to React on similar lines of Frappe UI in Vue. We believe this will ensure React apps also look similar to Vue apps in the Frappe ecosystem, and users will benefit from faster adoption.

Using Frappe UI in React

A simple getting started is provided on the opensource.rtcamp.com/frappe-ui-react and the GitHub repository. For example, to install the library one runs:

npm install @rtcamp/frappe-ui-react

and then include its Tailwind theme in the project’s CSS so that its styles are picked up.

@import '@rtcamp/frappe-ui-react/theme';

Quick Setup

Alternatively, you can also spin up a new project instantly using the frappe-ui-react-starter template by running the following command. Please refer to the readme for full documentation.

npx degit rtCamp/frappe-ui-react-starter frontend

It can then be used by importing components from the package. For example,

import { Button } from "@rtcamp/frappe-ui-react";
function App() {
  return (
    <div className="app-container">
      <Button label="Save" theme="gray" size="md" variant="subtle" />
    </div>
  );
}

Key Developer Notes

Though frappe-ui-react is inspired by the original frappe-ui, which was created in Vue and offers similar components and aesthetics in React, we are not limited to a one to one port. We also provide a growing collection of custom built components to give developers more power and flexibility.

Component design

Components follow a predictable pattern: a React wrapper around a primitive with styling, props for common variations, and sensible defaults. A lot of work went into establishing uniform naming and predictable structure so that once you’ve used a few components, the rest feel familiar. The idea is that teams don’t have to constantly refer to documentation just to remember how props are named.

Styling approach

Tailwind is used to express the design system directly in code. There isn’t a theme engine hidden behind configuration. The library ships with predefined styles and utility classes so projects get a consistent look. Tailwind v4 works out of the box. Tailwind v3 works with some extra config so older codebases are not forced to upgrade immediately.

Tailwind setup

The package ships with CSS that expresses the design system. Tailwind needs to scan that CSS to generate the final styles. In Tailwind v4 this happens automatically. In Tailwind v3 you need to point the configuration to the library’s dist folder or use the preset that the library ships with. The intent is to make the upgrade path smooth while still pushing toward the newer ecosystem.

Dependency choices

Headless UI and Radix UI are used for complex behaviors like focus management, keyboard navigation, menus, popovers, and dialogs. React Quill is used for rich text. Dayjs is used for date formatting. These choices keep components accessible without carrying unnecessary weight. They also make future contributions easier because contributors can focus on UI rather than implementing interactions from scratch.

Type safety

Components are written in TypeScript. The types lean toward clarity over cleverness. Generic props are used where they make sense, but the focus is on reducing friction when using the library, not inventing elaborate type systems. The goal is reliable auto-complete and easy onboarding for teams.

Scope and roadmap

The focus is on quality core blocks rather than shipping hundreds of niche components. As real use cases surface, new components will be added. The library is still early in its lifecycle. Feedback from daily use is expected to shape what gets added and how APIs evolve.

Under the hood, we are using:

• TailwindCSS (v4): We’ve built the styling system to be future-proof, supporting the latest Tailwind features for maximum flexibility.
• Headless UI & Radix UI: By using these unstyled primitives, we ensure that dropdowns, dialogs, and popovers work correctly for everyone, right out of the box.
• React Quill: Rich text editor component for React.
• dayjs: Lightweight JavaScript library for working with dates.

Future Roadmap

We are actively working on this project, so if you face any issues, please report them on the GitHub repo, and we will take them up with the highest priority.

Upcoming Components

Below is list of upcoming components that we are working on:

• Dashboard
• Button Group
• Divider
• Radio Button
• Slider
• Spacer
• Tags
• Comments
• Confirmation Dialog
• Skeleton
• Separator
• Label
• Radio Group
• Sheet
• Table
• Card
• Task Status
• Typography
• Hover Card

We are inviting participation from the Frappe developer community to give feedback and contribute to this initiative.

Links

• Frappu UI React Demo
• GitHub Repo