LogoLogo
v1.1.1
v1.1.1
  • 🌸What is Petal Pro?
  • Guides
    • 🚀Creating a web app from start to finish
  • Fundamentals
    • 👥Users & Authentication
    • 📄Included Pages
    • 🧊Components
    • 🎨Branding
    • 🌱Seeding
    • 📄Layouts & Menus
    • 🛠️Background Tasks and Jobs
    • 🔧Util, DB & Helpers
    • 📧Emails
    • 🪝Javascript Hooks
    • 📚Extra Hex Libraries
    • 🏗️Generators & Page Builder
    • 🗣️Translations
Powered by GitBook
On this page
  • Layouts
  • Brand
  • Color theme switch
  • Email helpers
  • Landing page
  • Language select
  • Notification
  • Page helpers
  • User dropdown menu

Was this helpful?

  1. Fundamentals

Components

PreviousIncluded PagesNextBranding

Last updated 3 years ago

Was this helpful?

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

Layouts

Brand

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

Page helpers

A growing set of components to help with building pages.

User dropdown menu

See the .

See the .

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

🧊
layouts section
Branding section
Petal Components
A look at the components folder
The top dark bit is an animated bar that progresses to the right hand corner, then the box disappears
Menus section