# Components

The majority of components comes from our open source package "[Petal Components](https://github.com/petalframework/petal_components)". However, there are some only in Petal Pro:

![A look at the components folder](/files/5iLBOkqWc9du6YwfUupB)

### Layouts

See the [layouts section](/petal-pro-documentation/product-docs/fundamentals/layouts-and-menus.md).

### Brand

See the [Branding section](/petal-pro-documentation/product-docs/fundamentals/branding.md).

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

![](/files/9Y4hDrxbPkcyBc1jB3rv)

### Landing page

A set of landing page related components.

![](/files/ohOjZRJMIlZpQCkgBJhI)

### Language select

![](/files/H4v8q6ApgCnIIVzmLjOb)

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](/files/9XVnWvqI2cmY3651sgZA)

### Page helpers

A growing set of components to help with building pages. 

![](/files/VSnBXrrt5Z8UlH5HeTTv)

### 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](/petal-pro-documentation/product-docs/fundamentals/layouts-and-menus.md#menus)).

![](/files/ZWjKnBSry01yT1ZdlkLP)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.petal.build/petal-pro-documentation/product-docs/fundamentals/components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.