# Labeled connections

::references
  :::ref-guide
  ---
  link: /docs/guides/renderers/react#full-connection-customization
  title: Guide
  ---
  :::
::

You can add labels to connections by implementing a custom connection component. This approach provides you with full flexibility to customize and optimize this feature. All you need is:

- create a custom connection component
- calculate the position of the point relative to the path (start, middle, end)
- display a text block at this position
- create user-added connections with predefined labels

::pro-example{src="https://retejs-labeled-connections.netlify.app"}
::

Although the example is built on React.js, you can easily adapt it for a different stack. To do so, simply copy certain modules from this example and substitute the custom connection component with one that matches your stack. If you encounter any issues with it, don't hesitate to reach out via GitHub Issues in the relevant repository.