Code

The same tokens, in your codebase.

Every value in the Figma variables is exported to code: one CSS file for all modes, a Tailwind preset, a shadcn/ui theme and design-token JSON for other tools. Designers switch a mode in Figma; engineers set one attribute.

Token export

Four files, generated from Figma.

Nothing is hand-copied. When the variables change, the files are regenerated, and the contrast audit runs again.

`tokens.css`

Every token as a CSS variable (--propel-*), with light, dark, both brands, three densities and the layout breakpoints. Load it once, globally.

`tailwind.preset.js`

A Tailwind v3 preset that reads those variables: bg-bg-surface, text-fg-secondary, rounded-card, shadow-elevation-popover, h-row.

`shadcn-theme.css`

Maps shadcn/ui's variables (--background, --primary, --input, --ring, --chart-1…) to Propel, so existing shadcn components take your brand.

`tokens.json`

W3C design-tokens format for Style Dictionary, Tokens Studio and other tools, with every mode under $extensions.

`ACCESSIBILITY.md`

The contrast record for every text and control pair in every mode, regenerated with the tokens.

`demo.html`

Open it in a browser to check light and dark, Signal and Teal, and the three densities side by side.

Modes in code

Three attributes on one element.

Set theme, brand and density together, usually on <html>. Without data-theme the page follows the system setting. Layout follows the viewport.

<!-- one root, every mode -->
<html data-theme="dark" data-brand="teal" data-density="comfortable">

/* any component */
.card {
  background: var(--propel-color-bg-surface);
  border-radius: var(--propel-radius-card);
  box-shadow: var(--propel-shadow-elevation-surface);
}
.card:focus-visible {
  box-shadow: var(--propel-shadow-focus-ring);
}

React components

34 React components, the same tokens as Figma.

@thepropel/react is the code side of the kit. It ships the controls, data, feedback and overlay parts that every B2B screen uses. Prop names follow the Figma properties, and each component's docs name the Figma node it mirrors.

Native elements wherever they exist (button, input, select, dialog, table), with WAI-ARIA patterns for tabs, menus, radio groups and accordions.
The same data-theme, data-brand and data-density modes as the Figma variables.
10 kB gzipped JS, no runtime dependencies beyond React 18+.

Components in @thepropel/react 0.1
Group	Components
Actions	Button, IconButton, TextLink, Menu
Form	TextField, TextArea, Select, SearchField, Checkbox, RadioGroup, Switch
Display	Status, Tag, Badge, FilterChip, Avatar, AvatarGroup, KpiCard, EmptyState, Divider
Data	DataTable: caption, row headers, sorting, selection
Navigation	Tabs, SegmentedControl, Breadcrumb, Pagination, Accordion
Feedback	Dialog, AlertBanner, InlineAlert, Toast, ProgressBar, Spinner, Skeleton, Tooltip

Code Connect

Figma shows the real component.

40 Figma components come with Code Connect mappings. Selecting one in Dev Mode shows the matching React import and props instead of generated CSS. Variants map to props, so Style=Danger solid reads as <Button variant="danger-solid">.

Code Connect is a Figma Organization or Enterprise feature. The package includes the mapping files and a one-line script that points them at your copy of the kit; publish them with npx figma connect publish.

On any other plan: Propel Code

Propel Code is a Dev Mode plugin that comes with the kit. Select a component and it writes the React from the selected variant and its label: Style=Danger solid with "Delete project" becomes <Button variant="danger-solid">Delete project</Button>. Select a whole screen and it lists every Propel part inside it under one import. It works on any paid Figma plan with Dev Mode.

Every mapped component's Figma description also carries its import, an example and its Figma → props list, so the code is one click away even without the plugin. All 106 snippets the plugin can produce are type-checked against the package.

// Dev Mode, Button selected
import { Button } from "@thepropel/react";

<Button variant="primary" iconStart={<Plus />}>
  Run payroll
</Button>

With AI

Your AI writes code with the same names.

code.md in the skill pack tells Claude how to turn a Propel screen into React with these tokens and the shadcn theme, so the code uses --propel-color-text-secondary, not a hex value it guessed.

What the code recipe covers

Which token to use for each Figma variable, by name.
Tailwind class names from the preset.
Setting modes with data attributes, not new themes.
Status as shape plus word, focus rings from the token.

Read about the skill pack