Installation · Propel

Install

pnpm add @makeplane/propel

Peer dependencies

pnpm add react react-dom tailwindcss

Import styles

@makeplane/propel ships a Tailwind v4 source file, not pre-built CSS — import it from your own Tailwind entry so its tokens and utilities compile alongside your app’s:

@import "tailwindcss";
@import "@makeplane/propel/styles";

Set a theme

Propel’s color tokens are scoped to a data-theme attribute — set one on <html> or the app root, or every semantic color resolves to nothing. Valid values are light, dark, light-contrast, and dark-contrast:

<html data-theme="light"></html>

Propel ships no theme-switching JavaScript; toggling is your app’s concern — swap the attribute and every token follows.

Load the fonts

The tokens name Inter Variable (headings and body) and IBM Plex Mono (code) as their first choices but don’t bundle the files. Self-host them with Fontsource — or skip this and the stacks fall back to the system fonts:

pnpm add @fontsource-variable/inter @fontsource/ibm-plex-mono

@import "@fontsource-variable/inter";
@import "@fontsource/ibm-plex-mono/400.css";
@import "@fontsource/ibm-plex-mono/500.css";

Import components

There’s no root barrel — each component is imported from its own subpath, so you only pull in (and tree-shake to) what you use:

import { Button } from "@makeplane/propel/components/button";