The majority of components comes from our open source package "Petal Components". However, there are some only in Petal Pro:


See the layouts section.


See the Branding section.

Color theme 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.

Language select

A dropdown for setting your language.


A flash notification component. Will appear down the bottom right of the screen and has a timer before disappearing (pairs with RemoveFlashHook).

Page helpers

A growing set of components to help with building pages.

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

Last updated