Components

Main Website Downloads Roadmap Community
Search…
🧊
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
See the layouts section.
Brand
See the Branding section.
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>
Page header
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>
Sidebar tabs container
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"
/>
Fundamentals - Previous
Organizations & Multitenancy
Next - Fundamentals
Dark mode
Last modified 3mo ago
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