# Folder structure

### The \`\_petal\_framework\` folder

![Petal Pro files that devs can ignore](https://3399528933-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPrds3tZMdNMoQM7suYlt%2Fuploads%2FU4XkIKQcJLP315mtLMxr%2FCleanShot%202022-05-13%20at%2008.09.59.png?alt=media\&token=e2a76383-b14a-4781-9a5f-8459130e0e8a)

Anything related to Petal Pro that developers shouldn't need to modify are put in a separate folder called `_petal_framework`  (we didn't name it `_petal_pro` because our project renaming script would overwrite the module names).

There is also another folder like this for our generator templates:

![Petal Pro template files (eg. mix petal.gen.live)](https://3399528933-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPrds3tZMdNMoQM7suYlt%2Fuploads%2FG4wHAPGWuN343UqYTWqB%2FCleanShot%202022-05-13%20at%2008.11.43.png?alt=media\&token=84d0283d-a641-4610-ba34-92d77f22db7b)

For upgrading purposes, we recommend never modifying files in these folders directly.&#x20;

### How do I modify Petal Pro components?

Simply duplicate them into your own namespace. For example, you might want to modify our email components to jazz them up a bit:

![](https://3399528933-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPrds3tZMdNMoQM7suYlt%2Fuploads%2FcJYVpt2c8NRQAK2a8P21%2FCleanShot%202022-05-13%20at%2008.16.44.png?alt=media\&token=6a4737e4-7deb-49e7-9a04-25b1974eca26)

You will then need to rename the module, eg. from `PetalFramework.Components.EmailComponents` to `YourApp.Components.EmailComponents`.&#x20;

Then do a global search for where you import or alias that component. eg if I search for `PetalFramework.Components.EmailComponents` I see it here:

```elixir
defmodule PetalProWeb.EmailView do
  use PetalProWeb, :view
  alias PetalFramework.Components.EmailComponents
end
```

I just need to change that alias to my new duplicated component:

```elixir
defmodule PetalProWeb.EmailView do
  use PetalProWeb, :view
  alias YourApp.Components.EmailComponents
end
```

Now you can modify the component to however you want.
