Introduction

Propel is Plane’s React component library: accessible behavior from Base UI, styled with a Tailwind CSS v4 token system, published as @makeplane/propel. It is the set of primitives Plane itself is built from — this site documents each one as a live, working instance beside its exact source.

How it’s put together

Every interactive component grafts a Base UI primitive onto a styled element, so keyboard behavior, focus management, and ARIA semantics come from Base UI while the look comes from Propel’s design tokens. The tokens are OKLCH throughout, semantic first (bg-canvas, text-primary, border-subtle), and carry four themes — light, dark, light-contrast, and dark-contrast — from a single data-theme attribute.

Explicit by design

Propel keeps styling axes explicit. An axis is a required prop unless a genuine, documented default exists (a handful do — e.g. Toggle/Avatar default to md), so the look is spelled out at the call site:

<Button stretch="auto" variant="primary" size="md" label="Save" />

The axis vocabulary is shared across the library — variant for visual form, variant for color intent, size for how big it is, stretch for auto-versus-full — so knowing one component means knowing all of them. What a component renders is never implicit, and impossible combinations aren’t representable.

Subpath imports

There’s no root barrel. Each component lives at its own subpath, so a bundle only ever contains what a page actually imports:

import { Dialog, DialogContent } from "@makeplane/propel/components/dialog";
import { Tooltip } from "@makeplane/propel/components/tooltip";

Where to go next

Head to Installation to wire Propel into your app, or jump straight into the components — Button is a good first read for the axis vocabulary in practice.