🧊Components

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

A look at the components folder

Layouts

See the layouts section.

Brand

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.

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