# UI Framework Used in the Web Directory of Makeplane/Plane: React, Tailwind, and @plane/ui

> Discover the UI framework in makeplane/plane's web directory. Explore React, Tailwind CSS, and the internal @plane/ui component library for efficient web development.

- Repository: [Plane/plane](https://github.com/makeplane/plane)
- Tags: architecture
- Published: 2026-06-25

---

**The web directory in makeplane/plane uses a React-based UI framework consisting of React Router for client-side routing, Tailwind CSS for styling, and an internal component library called `@plane/ui` built on Headless UI.**

The makeplane/plane repository powers Plane, an open-source project management platform. Its `web` directory contains the main client application, which implements a modern React-centric UI framework. This stack leverages Vite as the build tool and integrates several core technologies to deliver a polished, accessible user interface.

## Core Technologies of the Web UI Framework

### React as the Foundation

The application is fundamentally built on **React**. In [`apps/web/package.json`](https://github.com/makeplane/plane/blob/main/apps/web/package.json), the core dependencies include `react` and `react-dom`, establishing React as the primary UI library. Throughout the codebase, components explicitly import React, such as in [`apps/web/core/components/workspace/sidebar/workspace-menu.tsx`](https://github.com/makeplane/plane/blob/main/apps/web/core/components/workspace/sidebar/workspace-menu.tsx) where you will see standard React imports managing component state and lifecycle.

### React Router for Client-Side Navigation

Navigation is handled by **React Router**, distinguishing this from meta-frameworks like Next.js. The configuration in [`apps/web/vite.config.ts`](https://github.com/makeplane/plane/blob/main/apps/web/vite.config.ts) registers the React Router Vite plugin, confirming this architectural choice. This setup enables dynamic client-side routing without server-side rendering, maintaining the application as a single-page application (SPA).

### Tailwind CSS for Styling

**Tailwind CSS** drives the styling layer. The codebase uses `tailwind-merge` for safe class composition, as evidenced in [`packages/propel/src/utils/classname.tsx`](https://github.com/makeplane/plane/blob/main/packages/propel/src/utils/classname.tsx). Utility classes are applied directly to JSX elements, allowing for rapid UI development without leaving the component files.

### The @plane/ui Component Library

The project maintains an internal package called **`@plane/ui`** that provides reusable components. This library is built on top of React and **Headless UI**, offering unstyled, accessible primitive components that are styled with Tailwind CSS. You can examine the implementation in [`packages/ui/src/tooltip/tooltip.tsx`](https://github.com/makeplane/plane/blob/main/packages/ui/src/tooltip/tooltip.tsx), which demonstrates how these composite components extend Headless UI patterns with custom Tailwind styling.

## Configuration and Build Setup

The framework configuration is centralized in two key files that confirm the React-centric architecture:

- **[`apps/web/package.json`](https://github.com/makeplane/plane/blob/main/apps/web/package.json)**: Lists all dependencies including `react`, `react-router`, and `tailwind-merge`
- **[`apps/web/vite.config.ts`](https://github.com/makeplane/plane/blob/main/apps/web/vite.config.ts)**: Configures the Vite build tool with the React Router plugin, optimizing the development experience for this specific React SPA setup

This configuration leverages Vite's fast HMR (Hot Module Replacement) capabilities rather than adopting a server-side rendering framework.

## Practical Code Examples

### Using the Internal UI Library

Components in the web directory import from the internal `@plane/ui` package:

```tsx
import React from "react";
import { Button } from "@plane/ui";

export const HelloWorld = () => (
  <div className="flex items-center justify-center min-h-screen">
    <Button onClick={() => alert("Hello, Plane!")}>Say Hi</Button>
  </div>
);

```

This example shows how the `Button` component from `@plane/ui` is used within Tailwind-styled containers.

### Routing Implementation

React Router handles navigation throughout the application:

```tsx
import { BrowserRouter, Routes, Route } from "react-router";

export const App = () => (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/projects/:id" element={<ProjectPage />} />
    </Routes>
  </BrowserRouter>
);

```

The Vite configuration processes these routes at build time, as configured in [`vite.config.ts`](https://github.com/makeplane/plane/blob/main/vite.config.ts).

### Tailwind-Styled Components

Direct utility class usage is standard throughout the web directory:

```tsx
export const Card = ({ title, children }: { title: string; children: React.ReactNode }) => (
  <div className="rounded-lg border border-gray-200 p-4 shadow-sm bg-white">
    <h2 className="text-lg font-medium">{title}</h2>
    <div className="mt-2">{children}</div>
  </div>
);

```

The `tailwind-merge` utility, imported from [`packages/propel/src/utils/classname.tsx`](https://github.com/makeplane/plane/blob/main/packages/propel/src/utils/classname.tsx), helps resolve conflicting Tailwind classes when composing components dynamically.

## Key Source Files That Define the Stack

Understanding the UI framework requires examining these specific files in the repository:

- **[`apps/web/package.json`](https://github.com/makeplane/plane/blob/main/apps/web/package.json)**: Declares React, React Router, and Tailwind dependencies
- **[`apps/web/vite.config.ts`](https://github.com/makeplane/plane/blob/main/apps/web/vite.config.ts)**: Registers the React Router plugin and configures Vite React settings
- **[`apps/web/core/components/workspace/sidebar/workspace-menu.tsx`](https://github.com/makeplane/plane/blob/main/apps/web/core/components/workspace/sidebar/workspace-menu.tsx)**: Example component showing React imports and usage patterns
- **[`packages/ui/src/tooltip/tooltip.tsx`](https://github.com/makeplane/plane/blob/main/packages/ui/src/tooltip/tooltip.tsx)**: Demonstrates the internal UI library built on Headless UI
- **[`packages/propel/src/utils/classname.tsx`](https://github.com/makeplane/plane/blob/main/packages/propel/src/utils/classname.tsx)**: Shows Tailwind CSS integration with `tailwind-merge` for class management

## Summary

- The **makeplane/plane** web directory uses **React** as the foundational UI library
- **React Router** handles all client-side routing, configured through the Vite plugin in [`vite.config.ts`](https://github.com/makeplane/plane/blob/main/vite.config.ts)
- **Tailwind CSS** provides the styling system, with `tailwind-merge` managing class compositions in [`packages/propel/src/utils/classname.tsx`](https://github.com/makeplane/plane/blob/main/packages/propel/src/utils/classname.tsx)
- The **`@plane/ui`** package offers internal reusable components built on React and Headless UI
- The architecture is configured as a Vite-based SPA rather than using Next.js or a similar meta-framework

## Frequently Asked Questions

### Does the Plane web app use Next.js?

No, the Plane web app does not use Next.js. According to the source code in [`apps/web/vite.config.ts`](https://github.com/makeplane/plane/blob/main/apps/web/vite.config.ts), the application uses **Vite** with the **React Router** plugin configured for client-side rendering. This creates a single-page application architecture rather than a server-rendered Next.js application.

### What is the @plane/ui package based on?

The `@plane/ui` package is built on top of **React** and **Headless UI**. Headless UI provides unstyled, accessible component primitives (like tooltips, buttons, and dialogs), which the Plane team styles with Tailwind CSS. You can see this pattern in [`packages/ui/src/tooltip/tooltip.tsx`](https://github.com/makeplane/plane/blob/main/packages/ui/src/tooltip/tooltip.tsx) where Headless UI patterns are implemented with custom Tailwind styling.

### How is Tailwind CSS integrated into the Plane web components?

Tailwind CSS is integrated through utility classes applied directly to JSX elements. The codebase uses **`tailwind-merge`** (utilized in [`packages/propel/src/utils/classname.tsx`](https://github.com/makeplane/plane/blob/main/packages/propel/src/utils/classname.tsx)) to safely combine and conditionalize Tailwind classes. This approach allows developers to write styling logic inline without separate CSS files.

### Where can I find example React components in the Plane web directory?

Example React components are located throughout `apps/web/core/components/`. Specifically, [`apps/web/core/components/workspace/sidebar/workspace-menu.tsx`](https://github.com/makeplane/plane/blob/main/apps/web/core/components/workspace/sidebar/workspace-menu.tsx) provides a clear example of how components import React and utilize the internal UI library. These files demonstrate the standard patterns for building UIs within the Plane codebase.