Quick start: DevLink Import

Install the Webflow CLI

Install the Webflow CLI globally to manage your component libraries.

$
npm i --save-dev @webflow/webflow-cli

Clone the template library

Clone the example library and install the dependencies.

$
git clone https://github.com/Webflow-Examples/code-component-library.git
$
cd code-component-library
$
npm install

Create a code component file

In your editor, navigate to the your components directory where you added your Badge component. Create a new file called badge.webflow.tsx. This file will define how your Badge component appears in Webflow.

Import the React component and Webflow functions

Import the necessary dependencies to create your code component: the React component, prop types, styles, and the declareComponent function.

1
import Badge from './badge';
2
import { props } from '@webflow/data-types';
3
import { declareComponent } from '@webflow/react';
4
import "../styles/global.css";

Declare the component

Declare the code component using the declareComponent function.

1
import Badge from './badge';
2
import { props } from '@webflow/data-types';
3
import { declareComponent } from '@webflow/react';
4
import "../styles/global.css";
5
6
export default declareComponent({Badge,
7
    name: 'Badge',
8
    description: 'A badge with variants',
9
    group: 'Info',
10
    props: {
11
        // We'll add props in the next step.
12
    }
13
14
15
});

The declareComponent function takes two parameters:

• Your React component (Badge)
• Configuration options:
  • name: The name of the component
  • description?: A description of the component (optional)
  • group?: The group the component belongs to (optional)
  • props: The props of the component, which we’ll define in the next step.
  • options?: The options of the component, (optional)

For more information and detailed configuration options for code components, see the component definition reference.

Define the component props

Add configurable properties that users can edit in the Webflow designer.

Add a props object to the declareComponent function. This object defines which properties designers can configure in the Webflow editor, and maps them to appropriate Webflow prop types using the props constructor.

1
    import Badge from './badge';
2
    import { props } from '@webflow/data-types';
3
    import { declareComponent } from '@webflow/react';
4
    import "../styles/global.css";
5
6
    export default declareComponent({Badge,{
7
        name: 'Badge',
8
        description: 'A badge with variants',
9
        group: 'Info',
10
        props: {
11
            children: props.Text({
12
                name: 'Badge Text',
13
                defaultValue: 'Hello Webflow!',
14
            }),
15
            variant: props.Variant({
16
                name: 'Badge Variant',
17
                options: ['default', 'secondary', 'destructive', 'outline'],
18
            }),
19
        },
20
    });

This code component defines two props:

• children: A text field for the badge content
• variant: A dropdown with predefined style options

Add the library to your Webflow project

Install the library on any site in your Workspace to start using your code components.

1. Open any Webflow site in your workspace.

2. Open the Libraries panel by pressing “L” or clicking the icon in the left sidebar.

   

3. Find your library in the list of available libraries.

4. Install the library by clicking the Install icon next to your library.

Open the Components panel

Open the Components panel by pressing “⇧C” or clicking the icon in the left sidebar.

Scroll to the section for the library you just installed. You should see your “Badge” component listed under the “Info” group.

Add the component to your page

Click and drag the Badge component from the components panel onto your page. The component will appear with its default text and styling.

Customize the component

Customize your component in the Properties panel on the right. You’ll see two configurable properties:

• Badge Text: Change the text content of the badge
• Badge Variant: Select from default, secondary, destructive, or outline styling

Try changing the text to “Welcome!” and selecting a different variant to see your component update in real-time.