🧊
Components
The majority of components comes from our open source package "Petal Components". 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

Brand

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
}
]
}
/>

Language select

A dropdown for setting your language.
<.language_select
current_locale={Gettext.get_locale(PetalProWeb.Gettext)}
language_options={PetalPro.config(:language_options)}
/>

Notification

A flash notification component. Will appear down the bottom right of the screen and has a timer before disappearing (pairs with RemoveFlashHook).
The top dark bit is an animated bar that progresses to the right hand corner, then the box disappears

Page components

A growing set of generic page components to help with building pages.

Box

<.box padded>
<%= live_component(PetalProWeb.OrgFormComponent, [...]) %>
</.box>
Shows a heading and optional slot for buttons on the right hand side.
<.page_header title="Listing Discounts">
<.button
link_type="live_patch"
label="New Discount"
to={Routes.discount_index_path(@socket, :new)}
/>
</.page_header>
A panel with a sidebar for a menu, and a slot for content on the right.
<.sidebar_tabs_container current_page={:edit_profile} menu_items={[
%{
name: :edit_profile,
label: gettext("Edit profile"),
path: Routes.live_path(Endpoint, PetalProWeb.EditProfileLive),
icon: :user_circle
},
...
]}>
<%= render_slot(@inner_block) %>
</.sidebar_tabs_container>

User dropdown menu

Displays the user's avatar and will show a dropdown menu upon being clicked. Used in the navbar. Displays a list of menu items (see the Menus section).
<.user_menu_dropdown
user_menu_items={@user_menu_items}
avatar_src={@avatar_src}
current_user_name={if @current_user, do: user_name(@current_user), else: nil}
/>

Markdown

Pretty markdown

Renders the markdown as HTML and uses the Tailwind Typography classes to prettify it.
<.pretty_markdown content={some_markdown} class="mx-auto" />

Markdown

Simple renders pure HTML from markdown.
<.markdown content={some_markdown} />

Social Button

<.social_button
link_type="a"
to={Routes.user_ueberauth_path(@conn_or_socket, :request, "google")}
variant="outline"
logo="google"
class="w-full"
/>
​
<.social_button
link_type="a"
to={Routes.user_ueberauth_path(@conn_or_socket, :request, "github")}
variant="outline"
logo="github"
class="w-full"
/>
Copy link
On this page
Layouts
Brand
Color scheme switch
Email helpers
Landing page
Language select
Notification
Page components
User dropdown menu
Markdown
Social Button