langflow/docs/docs/_partial-basic-component-structure.mdx

1. Create a Python file for your component, such as `dataframe_processor.py`.

2. Write your component as an object of the [`Component`](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/custom/custom_component/component.py) class. Create a new class that inherits from `Component` and override the base class's methods.

    :::tip Backwards compatibility
    The `lfx` import path replaced the `import from langflow.custom import Component` in Langflow 1.7, but the original input is still compatible and works the same way.
    :::

    ```python
    from typing import Any, Dict, Optional
    import pandas as pd
    from lfx.custom.custom_component.component import Component

    class DataFrameProcessor(Component):
        """A component that processes pandas DataFrames with various operations."""
    ```

3. Define class attributes to provide information about your custom component:

    ```python
    from typing import Any, Dict, Optional
    import pandas as pd
    from lfx.custom.custom_component.component import Component

    class DataFrameProcessor(Component):
        """A component that processes pandas DataFrames with various operations."""

        display_name: str = "DataFrame Processor"
        description: str = "Process and transform pandas DataFrames with various operations like filtering, sorting, and aggregation."
        documentation: str = "https://docs.langflow.org/components-dataframe-processor"
        icon: str = "DataframeIcon"
        priority: int = 100
        name: str = "dataframe_processor"
    ```

   * `display_name`: A user-friendly name shown in the visual editor.
   * `description`: A brief description of what your component does.
   * `documentation`: A link to detailed documentation.
   * `icon`: An emoji or icon identifier for visual representation.
      Langflow uses [Lucide](https://lucide.dev/icons) for icons. To assign an icon to your component, set the icon attribute to the name of a Lucide icon as a string, such as `icon = "file-text"`. Langflow renders icons from the Lucide library automatically.
      For more information, see [Contributing bundles](/contributing-bundles#add-the-bundle-to-the-frontend-folder).
   * `priority`: An optional integer to control display order. Lower numbers appear first.
   * `name`: An optional internal identifier that defaults to class name.
4. Define the component's interface by specifying its inputs, outputs, and the method that will process them. The method name must match the `method` field in your outputs list, as this is how Langflow knows which method to call to generate each output.

    This example creates a minimal custom component skeleton.

    ```python
    from typing import Any, Dict, Optional
    import pandas as pd
    from lfx.custom.custom_component.component import Component

    class DataFrameProcessor(Component):
        """A component that processes pandas DataFrames with various operations."""

        display_name: str = "DataFrame Processor"
        description: str = "Process and transform pandas DataFrames with various operations like filtering, sorting, and aggregation."
        documentation: str = "https://docs.langflow.org/components-dataframe-processor"
        icon: str = "DataframeIcon"
        priority: int = 100
        name: str = "dataframe_processor"

        # input and output lists
        inputs = []
        outputs = []

        # method
        def some_output_method(self):
            return ...
    ```