The majority of components comes from our open source package "". However, there are some only in Petal Pro. There are two locations to find these:
Petal Framework Components
These are maintained by us and located in /lib/_petal_framework/web/components
If you want to modify any of these, we recommend duplicating it into your apps component folder (/lib/<your_app>_web/components) first. That way, if we release updated versions of Petal Pro, you can still just copy and paste the whole _petal_framework folder into your project
Components for you to modify
These are components that you will likely modify
eg. brand related or landing page related
Found in /lib/<your_app>_web/components
Layouts
See the .
Brand
See the .
Color scheme switch
<.color_scheme_switch />
The switch to switch between light and dark mode. Pairs with color-scheme-switch.js, which will use cookies and local storage to set the theme.
Email helpers
A set of components for email templates. Kind of like Petal Components, but for emails.
<h1>Let's verify your account</h1>
<p>Touch the button below to verify your account</p>
<EmailComponents.button_centered to={@url}>
Verify account
</EmailComponents.button_centered>
<EmailComponents.small_text>
If you didn't create an account with us, please ignore this.
</EmailComponents.small_text>
Landing page
A set of landing page related components. For example:
<LandingPage.features
title={gettext("Features")}
description={gettext("Here are some features you can use to get started with your web app.")}
features={
[
%{
title: "Authentication",
description: Faker.Lorem.sentence(10..20),
icon: :lightning_bolt
},
%{
title: "HTML Emails",
description: Faker.Lorem.sentence(10..20),
icon: :puzzle
},
%{
title: "Wallaby testing",
description: Faker.Lorem.sentence(10..20),
icon: :at_symbol
}
]
}
/>