> For the complete documentation index, see [llms.txt](https://docs.petal.build/petal-pro-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.petal.build/petal-pro-documentation/product-docs/fundamentals/components.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.