# What Is the Common Directory in Plane? A Deep Dive into makeplane/plane's Shared Architecture

> Discover the purpose of the common directory in makeplane/plane. Learn how this shared architecture centralizes UI components and utilities for efficiency and consistency across modules.

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

---

**The `common` directories in the makeplane/plane repository are centralized collections of reusable UI components, utilities, and helpers that are shared across multiple feature modules to eliminate duplication and enforce consistency.**

In the Plane open-source project, you will find `common` directories scattered throughout the codebase, from the UI package to individual application folders. These folders serve as architectural anchors that house generic pieces of functionality not tied to specific features, allowing any module to import standardized components via clean barrel exports.

## Architectural Purpose of the Common Directory

The `common` directories in **makeplane/plane** serve two primary architectural goals that maintain code quality at scale.

### Eliminating Code Duplication

Shared components are written once and exported via an [`index.ts`](https://github.com/makeplane/plane/blob/main/index.ts) file, allowing any feature module to import them using patterns like `import { InputSearch } from "@plane/ui/src/dropdown/common"`. This prevents teams from rewriting identical dropdown logic, loader animations, or search inputs across different features, significantly reducing the overall bundle size and maintenance burden.

### Enforcing UI Consistency

By centralizing styling, behavior, and strict TypeScript typing in `common` directories, Plane ensures that interactive elements look and act identically whether they appear in the workspace sidebar, admin dashboard, or onboarding flows. This centralization guarantees that updates to component behavior propagate consistently across the entire application.

## Common Directory Structure in the UI Package

In the **UI package** (`packages/ui/src/dropdown/common`), the folder groups the dropdown's sub-components, including the search input, loader, button, and options. This organization allows any dropdown instance to import primitive pieces from a single location.

The concrete components live side-by-side:

- [`packages/ui/src/dropdown/common/input-search.tsx`](https://github.com/makeplane/plane/blob/main/packages/ui/src/dropdown/common/input-search.tsx)
- [`packages/ui/src/dropdown/common/options.tsx`](https://github.com/makeplane/plane/blob/main/packages/ui/src/dropdown/common/options.tsx)
- [`packages/ui/src/dropdown/common/loader.tsx`](https://github.com/makeplane/plane/blob/main/packages/ui/src/dropdown/common/loader.tsx)
- [`packages/ui/src/dropdown/common/button.tsx`](https://github.com/makeplane/plane/blob/main/packages/ui/src/dropdown/common/button.tsx)

These are re-exported through the central index at [`packages/ui/src/dropdown/common/index.ts`](https://github.com/makeplane/plane/blob/main/packages/ui/src/dropdown/common/index.ts), creating a clean public API for the dropdown system.

```tsx
import { Dropdown, DropdownOptions } from "@plane/ui/src/dropdown";

// inside a component
<Dropdown isOpen={open} onClose={close}>
  {/* The common dropdown options component handles searching, loading, and rendering */}
  <DropdownOptions
    isOpen={open}
    query={search}
    setQuery={setSearch}
    options={myOptions}
    keyExtractor={(opt) => opt.id}
    renderItem={({ value }) => <span>{value}</span>}
  />
</Dropdown>

```

All pieces (`DropdownOptions`, `InputSearch`, `DropdownOptionsLoader`, etc.) are pulled from the **common** folder, keeping the dropdown logic concise and maintainable.

## Shared Components in the Web Application

The **Web app** (`apps/web/core/components/common`) contains generic UI helpers used by many screens, such as switcher labels, quick-action factories, empty-state components, and activity widgets.

### SwitcherLabel Component

The `SwitcherLabel` component, located at [`apps/web/core/components/common/switcher-label.tsx`](https://github.com/makeplane/plane/blob/main/apps/web/core/components/common/switcher-label.tsx), renders an icon and truncated name for any "switcher" UI element. It is imported throughout the workspace sidebar and onboarding flows.

```tsx
import { SwitcherLabel } from "apps/web/core/components/common/switcher-label";
import { UserIcon } from "@plane/propel/icons";

function WorkspaceSwitcherItem({ workspace }) {
  return (
    <SwitcherLabel
      logo_url={workspace.logo}
      name={workspace.name}
      LabelIcon={UserIcon}
    />
  );
}

```

This component lives in the `common` directory, making it reusable across the sidebar, onboarding steps, and any place a workspace selector appears without duplicating the icon-handling logic.

### Quick Actions Factory

Similarly, [`apps/web/core/components/common/quick-actions-factory.tsx`](https://github.com/makeplane/plane/blob/main/apps/web/core/components/common/quick-actions-factory.tsx) provides a factory for building quick-action menus used throughout the UI, ensuring that context menus and action lists behave consistently across different features.

## Pattern Implementation Across Apps

Similar `common` folders exist in **admin**, **space**, and other applications within the monorepo, each providing generic pieces needed in many places:

- [`apps/admin/components/common/page-header.tsx`](https://github.com/makeplane/plane/blob/main/apps/admin/components/common/page-header.tsx) - Shared page header component for admin dashboards
- [`apps/space/components/common/logo-spinner.tsx`](https://github.com/makeplane/plane/blob/main/apps/space/components/common/logo-spinner.tsx) - Reusable loading spinner for logos

These directories contain page wrappers, header components, and loading states that are **not tied to a single feature** but required across multiple views.

## Index Barrel Exports

Each `common` folder ships an [`index.ts`](https://github.com/makeplane/plane/blob/main/index.ts) that re-exports its members, enabling clean import patterns and encapsulating internal file structure from consuming modules.

```ts
// packages/ui/src/dropdown/common/index.ts
export * from "./input-search";
export * from "./button";
export * from "./options";
export * from "./loader";

```

This allows consuming code to import specific utilities without referencing internal file paths:

```tsx
import { InputSearch, DropdownOptions } from "@plane/ui/src/dropdown/common";

```

## Summary

- The `common` directory in makeplane/plane contains **reusable UI components and utilities** shared across feature modules.
- Files like [`packages/ui/src/dropdown/common/index.ts`](https://github.com/makeplane/plane/blob/main/packages/ui/src/dropdown/common/index.ts) and [`apps/web/core/components/common/switcher-label.tsx`](https://github.com/makeplane/plane/blob/main/apps/web/core/components/common/switcher-label.tsx) demonstrate the pattern of component centralization.
- **Barrel exports** via [`index.ts`](https://github.com/makeplane/plane/blob/main/index.ts) files create clean import APIs while hiding internal implementation details.
- This architecture **prevents code duplication** and ensures consistent styling and behavior across the workspace, admin, and space applications.
- Components such as `SwitcherLabel`, `InputSearch`, and `DropdownOptions` live in `common` directories to serve multiple features without duplication.

## Frequently Asked Questions

### Where are the common components located in the Plane repository?

Common components are distributed across multiple locations including `packages/ui/src/dropdown/common/` for dropdown primitives, `apps/web/core/components/common/` for web app utilities, `apps/admin/components/common/` for admin-specific shared components, and `apps/space/components/common/` for space app utilities. Each location serves the specific needs of its package while following the same architectural pattern.

### How do I import a component from a common directory in Plane?

Import components using the barrel export pattern from the [`index.ts`](https://github.com/makeplane/plane/blob/main/index.ts) file located in the specific `common` directory. For example, use `import { InputSearch } from "@plane/ui/src/dropdown/common"` or `import { SwitcherLabel } from "apps/web/core/components/common/switcher-label"`. This approach ensures you access the public API without depending on internal file structures that may change.

### What types of components belong in the common directory?

The `common` directory houses generic, reusable components that are not tied to specific business logic or features. Examples include dropdown sub-components like `InputSearch` and `DropdownOptions`, utility components like `SwitcherLabel` and `LogoSpinner`, and factory components like `QuickActionsFactory`. If a component is used across multiple features or applications, it belongs in a `common` directory.

### How does the common directory pattern improve development in Plane?

This pattern improves development by centralizing component logic, ensuring strict TypeScript typing consistency, and providing a single source of truth for UI primitives. When developers update [`options.tsx`](https://github.com/makeplane/plane/blob/main/options.tsx) in `packages/ui/src/dropdown/common/`, the changes automatically apply to every dropdown instance across the web, admin, and space applications, eliminating the need for manual synchronization across dozens of files.