Create a component

To create a custom component for Uiflow, you must update the code in the index.tsx file. Uiflow custom components are based on React.
Note: An alternative to manually creating a custom component as described below, is to generate a custom component using AI.
To create a new component:
  1. 1.
    Open a command line window.
  2. 2.
    Navigate to your components directory:
    cd <path-to-custom-components-directory>/components
  3. 3.
    Create a MyComponent directory and generate an index.tsx file for your component:
    mkdir MyComponent
    cd MyComponent
    touch index.tsx
    Note: This walkthrough uses MyComponent as a sample name for the custom component directory, but you can name the folder as you see fit.
  4. 4.
    In a text/code editor, open the index.tsx file.
  5. 5.
    Add your custom component code to the index.tsx file.
    For custom component examples, see Custom component types.
  6. 6.
    Save your index.tsx file.
Note: To find preconfigured custom components for your application, see Uiflow's custom component repository.