> For the complete documentation index, see [llms.txt](https://yugalphp.gitbook.io/php/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yugalphp.gitbook.io/php/frontend-ssg-spa/making-components-in-yugal.md).
# Making Components in Yugal
Making component is `Yugal` is now more efficient, defining function in this way help Yugal to optimize the app very well, as using this way Yugal will send the component code to user only once and use it on every occurence instead of sending whole component at each occurence saving resources and loading time.
Do define component you have to navigate to make file in `@comp` directory in `./src` directory. Yugal will automatically index all component defined here.
Use one file per component, defining component in one file is now not possible.
Just make the `php` file and return the `HTML` code in it as given below.
Suppose it is `footer.php` in `@comp`
```php
THIS IS FOOTER
HTML;
?>
```
Now Yugal will automatically process it. You can use it in your pages by just using small snippet in code which is `[{{component_name}}]` using this snippet will make Yugal to use respective component there. For example as defined above in `footer.php`, if you want to use it in page you have to do use `[{{footer}}]` snippet in your code. `.php` is not allowed in `component` name in snippet.
Example Usage
```php
I am Body
[{{footer}}]