The title of the page

` of the body, like this: {% code title="/index.HTML (rendered by Frontity)" %} ```markup ...

``` {% endcode %} **Frontity** uses that `

` to inject the roots of all the packages that are installed: {% code title="/index.HTML (rendered by Frontity)" %} ```jsx ...

``` {% endcode %} Most of the time only your `theme` will export a **root**, but if any other package needs something in the DOM, it can include it also. For example, let's imagine a *ShareModal* package that has a modal like this: ![](https://frontity.org/wp-content/uploads/2021/04/screenshot-blog-mobile-share.jpg) This package can export the React elements it needs in its **root** and expose an action like `actions.share.openModal()` to interact with the theme. The **root** could be something like this: {% code title="/packages/my-share-modal-package/src/components/index.js" %} ```jsx const ShareRoot = ({ state }) => state.share.isModalOpen && ; export default ShareRoot; ``` {% endcode %} And the rest of the package something like this: {% code title="/packages/my-share-modal-package/src/index.js" %} ```javascript import ShareRoot from "./components/"; export default { roots: { share: ShareRoot }, state: { share: { isModalOpen: false } }, actions: { share: { openModal: ({ state }) => { state.share.isModalOpen = true; }, closeModal: ({ state }) => { state.share.isModalOpen = false; } } } } ``` {% endcode %} Then the only thing the theme would have to do if they want to include share functionality is to check if there's a `share` package and if there is, use its `actions.share.openModal()` action when appropriate. For example in these buttons: ![](https://frontity.org/wp-content/uploads/2021/04/screenshot-mobile-share.jpg) I hope you're starting to see how extensibility works in **Frontity**, but don't worry too much now, we'll talk in more detail later. By the way, **Frontity** has an API to modify the `` element inside React using the `` component like this: ```jsx import { Head } from "frontity"; const MyPackage = () => ( The title of the page ); ``` So even though **Frontity** only allows packages to insert React nodes in the `

` of the body, they can also modify the `` by adding tags inside a ``. For a more detailed explanation you can check [Head page](https://gitbook-docs.frontity.org/learning-frontity/broken-reference). {% hint style="info" %} If you still have any questions about Roots in Frontity, please check out the [**community forum**](https://community.frontity.org), which is packed full of answers and solutions to all sorts of Frontity questions. If you don't find what you're looking for, feel free to start a new post. {% endhint %}