Prop Types

Prop types define the configurable properties that designers can edit in the Webflow designer. When you create a code component, you specify which React component properties to expose to designers, and how they should appear in Webflow.

Defining props in your code component

In your declareComponent function, include a props property that maps your React component’s properties to Webflow prop types. This tells Webflow:

• Which properties designers can configure.
• How each property should appear in the designer
• Which values are valid for each property
• Default values for each property (for certain prop types)

Basic usage

1
import {Button} from './Button';
2
import { props } from '@webflow/data-types';
3
import { declareComponent } from '@webflow/react';
4
5
export default declareComponent(Button, {
6
  name: 'Button',
7
  description: 'A button component',
8
  group: 'Interaction',
9
  props: {
10
    // Expose the 'text' prop as a text field
11
    text: props.Text({
12
      name: 'Button text',
13
      defaultValue: 'Hello World!',
14
    }),
15
    
16
    // Expose the 'variant' prop as a dropdown named 'Style'
17
    variant: props.Variant({
18
      name: 'Style',
19
      options: ['primary', 'secondary'],
20
    }),
21
  },
22
});

Available prop types

Choose the appropriate prop type based on what you want designers to configure:

Text and content

• Text - Single line text input
• Rich Text - Multi-line text with formatting
• Link - URL input with validation

Assets and data

• Image - Image upload and selection
• Number - Numeric input with validation

Structure and styles

• Variant - Dropdown with predefined options
• Visibility - Show/hide controls
• Slot - Content areas for other components
• ID - HTML Element ID

Prop values

Each prop type returns a value to your React component. For example, props.Text returns a string, while props.Link() returns an object with href and target properties.

Most times, you can map the prop values directly. For example, if your React component expects text as a string, you can map it to a props.Text prop.

However, if your React component expects specific properties from the returned object, you need to create a wrapper component that transforms the data. For example, the props.Link() prop type returns the following object:

1
{
2
  href: string;
3
  target?: "_self" | "_blank" | string;
4
  preload?: "prerender" | "prefetch" | "none" | string;
5
}

If your React component expects href and target separately, you need to create a wrapper component that transforms the data:

1
import { props, PropType, PropValues } from "@webflow/data-types";
2
import { declareComponent } from "@webflow/react";
3
import React from "react";
4
import Button, { ButtonProps } from "./Button";
5
6
// Remove href and target from the props to prevent conflicts
7
type WebflowButtonProps = {
8
  link: PropValues[PropType.Link];
9
} & Omit<ButtonProps, "href" | "target">; // Remove buttonText from the props
10
11
// Wrapper that destructures the object returned from `props.Link` and passes the href and target to the button component as expected.
12
const WebflowButton = ({
13
  link: { href, target },
14
  ...props
15
}: WebflowButtonProps) => {
16
  return (
17
    <Button href={href} target={target} {...props} />
18
  );
19
};
20
21
// Component declaration for Webflow
22
export default declareComponent(WebflowButton, {
23
  name: "Button",
24
  props: {
25
    buttonText: props.Text({ 
26
      name: "Text", 
27
      defaultValue: "Lorem ipsum" 
28
    }),
29
    link: props.Link({ name: "Link" }),
30
  },
31
});

This example declaration file:

• Imports the PropType and PropValues types from the @webflow/data-types package.
• Defines a link prop for the Button component. This will provide a link picker in Webflow and return the href and target values.
• Adjusts the TypeScript types of the Button component to include the link object returned from the props.Link prop type.
• Wraps the Button component in a new component that gets the href and target values from the link object and passes them to the Button component as expected.

Best practices

Provide helpful defaults

Always set meaningful default values so components work immediately when added to a page. Some prop types have default values built in, like props.Text which defaults to an empty string. However, you may want to set a default value in your React component as well.

1
title: props.Text({
2
  name: 'Button Text',
3
  defaultValue: 'Click me', // Component works out of the box
4
}),

Use succinct names

The name property appears in the Webflow designer, keep them short and title case. Use descriptions to provide more context.

Group related props

Consider how props will appear together in the designer. Use the group property to group related props together.

1
props: {
2
  heroTitle: props.Text({ name: 'Hero Title', group: 'Content' }),
3
  text: props.Text({ name: 'Text', group: 'Button' }),
4
  style: props.Variant({ name: 'Style', group: 'Button' }),
5
  size: props.Variant({ name: 'Size', group: 'Button' }),
6
}

Example: Complete component

Here’s how you might define props for a button component:

1
import { props } from '@webflow/data-types';
2
import { declareComponent } from '@webflow/react';
3
import Card from './Card';
4
5
export default declareComponent(Card, {
6
  name: 'Card',
7
  description: 'A card component',
8
  group: 'Content',
9
  props: {
10
    variant: props.Variant({  
11
      name: 'Variant',  
12
      options: ['Horizontal', 'Vertical'],  
13
      }),  
14
    title: props.Text({  
15
      name: 'Title',  
16
      defaultValue: 'Card title',  
17
    }),  
18
    text: props.Text({  
19
      name: 'Text',  
20
      defaultValue: 'Hello World!'
21
    }),  
22
    buttonVisible: props.Visibility({  
23
      group: 'Button',  
24
      name: 'Visibility',  
25
      defaultValue: true,  
26
    }),  
27
    buttonVariant: props.Variant({  
28
      group: 'Button',  
29
      name: 'Variant',  
30
      options: ['Primary', 'Secondary', 'Outline'],  
31
    }),  
32
    buttonText: props.Text({  
33
      group: 'Button',  
34
      name: 'Text',  
35
      defaultValue: 'Click me',  
36
    }),  
37
    buttonLink: props.Link({  
38
      group: 'Button',  
39
      name: 'Link',  
40
    }),  
41
  },
42
});