> ## Documentation Index
> Fetch the complete documentation index at: https://docs.morph-data.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Creating Custom Components

In Morph markdown files, you can use **React** components.

## Create and use custom components in markdown files

<Steps>
  <Step title="Create a tsx file and export the component">
    Create a tsx file in the src directory. It is recommended to create it in the `src/components` directory, but it can be anywhere.

    ```tsx src/components/CustomComponent.tsx theme={"dark"}
    // src/components/CustomComponent.tsx
    import React from 'react';

    export const CustomComponent: React.FC = () => {
      return (
        <div>
          <h1>Custom Component</h1>
        </div>
      );
    };
    ```
  </Step>

  <Step title="Use the custom component in an mdx file">
    In the mdx file, you can import and use the tsx file with a relative path.

    ```tsx index.mdx theme={"dark"}
    import { CustomComponent } from '../components/CustomComponent';

    # Test Custom Component

    <CustomComponent />
    ```
  </Step>
</Steps>

## Use API endpoints from custom components

To execute Python functions from within a custom component, do the following.

To understand this sample code, refer to [Alias](/docs/ja/develop/guides/alias), [loadData()](/data-application/ja/morph-data-load-data.mdx), and [postData()](/data-application/ja/morph-data-post-data.mdx).

<CodeGroup>
  ```tsx src/components/CustomComponent.tsx theme={"dark"}
  // src/components/CustomComponent.tsx
  import React from "react";
  import { loadData } from "@morph-data/components";

  const metrics = loadData("example_metrics", "json"); // specify the alias and the format

  export const LoadDataComp = () => {
    return (
      <div>
        <h1>Metrics</h1>
        <pre>{JSON.stringify(metrics, null, 2)}</pre>
      </div>
    );
  };

  const execBatch = postData("example_batch_process");

  export const BatchButton = () => {
    const [variables, setVariables] = useState({});
    return (
      <button onClick={() => execBatch.run(variables)}>Execute Python</button>
    );
  };
  ```

  ```tsx src/pages/index.mdx theme={"dark"}
  import { LoadDataComp, BatchButton } from '../components/CustomComponent';

  # Test Custom Component

  <LoadDataComp />

  <BatchButton />
  ```
</CodeGroup>