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

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 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
• packages/ui/src/dropdown/common/options.tsx
• packages/ui/src/dropdown/common/loader.tsx
• packages/ui/src/dropdown/common/button.tsx

These are re-exported through the central index at packages/ui/src/dropdown/common/index.ts, creating a clean public API for the dropdown system.

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, renders an icon and truncated name for any "switcher" UI element. It is imported throughout the workspace sidebar and onboarding flows.

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 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 - Shared page header component for admin dashboards
• 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 that re-exports its members, enabling clean import patterns and encapsulating internal file structure from consuming modules.

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

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 and apps/web/core/components/common/switcher-label.tsx demonstrate the pattern of component centralization.
• Barrel exports via 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 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}