Skip to navigation
ReferenceUtilities

Define a code component

declareComponent(Component, data)

The declareComponent function is used to create a code component declaration. See the declare code component guide for more information.

Syntax

declareComponent(Component, data): void;

Parameters

  • Component: The React component to declare
  • Data: An object with: Component metadata, prop definitions, and optional configurations

Data object

The data object is used to define the component’s metadata, prop definitions, and optional configurations. It takes the following properties:

PropertyTypeDescription
namestringThe name of the component
description?stringA description of the component (optional)
group?stringGroup of the component in the component panel (optional)
propsobjectProps for the user to edit in Webflow. See the prop types reference for more information.
options?objectOptional configurations including applying tag selectors, and managing SSR.
Reserved prop names

Webflow reserves prop names that start with __wf_, in any letter case. The CLI rejects a library that declares one when you bundle it.

Example

Button.webflow.tsx
import { declareComponent } from '@webflow/react';
import { props } from '@webflow/data-types';
import { Button } from './Button';
// Declare the component
export default declareComponent(Button, {
  // Component metadata
  name: "Button",
  description: "A button component with a text and a style variant",
  group: "Interactive",
  // Prop definitions
  props: {
    text: props.Text({
        name: "Button Text",
        defaultValue: "Click me"
    }),
    variant: props.Variant({
        name: "Style",
        options: ["primary", "secondary"],
        defaultValue: "primary"
    }),
  },
  // Optional configuration
  options: {
    applyTagSelectors: true,
  },
});