Webflow code components · React · DevLink

React components that designers configure in Webflow.

Three production-quality components, each declared with declareComponent so designers get typed props in Webflow's Properties panel. They use correct ARIA semantics (the accordion follows the WAI-ARIA pattern, the billing toggle is a real switch), render on the server without layout shift, and respect reduced-motion settings. Below they're rendered on a plain white "site" with the same props a designer would set.

How a component reaches the Designer

// src/components/PricingTable/PricingTable.webflow.jsx
import { declareComponent } from '@webflow/react';
import { props } from '@webflow/data-types';

export default declareComponent(WebflowPricingTable, {
  name: 'Pricing Table',
  group: 'Commerce',
  props: {
    currency: props.Variant({ name: 'Currency', options: ['USD', 'EUR', 'GBP'], defaultValue: 'USD' }),
    annualDiscount: props.Number({ name: 'Annual discount %', defaultValue: 20, min: 0, max: 90 }),
    plan2Link: props.Link({ name: 'Button link', group: 'Plan 2' }),   // → { href, target }
    …
  },
});

npm ci && npm test                       # SSR + logic tests
npx webflow devlink bundle               # Webflow's CLI builds the library locally (also run in CI)
npx webflow devlink import               # share to your Workspace (needs a Workspace API token)