🧊Components

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

Landing page

A set of landing page related components. For example:

Language select

A dropdown for setting your language.

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

Shows a heading and optional slot for buttons on the right hand side.

A panel with a sidebar for a menu, and a slot for content on the right.

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).

Markdown

Pretty markdown

Renders the markdown as HTML and uses the Tailwind Typographyarrow-up-right classes to prettify it.

Markdown

Simple renders pure HTML from markdown.

Social Button

Last updated

Was this helpful?