# 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](https://50448613-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSwy36CS0dsnIH4ah9iHk%2Fuploads%2Ft6Dguy83HEbovWB1XkOd%2Fpetal_pro_components.png?alt=media\&token=b879c51e-dfdc-498c-876c-0e3fe71fe125)

### Layouts

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

### Brand

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

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

![](https://50448613-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSwy36CS0dsnIH4ah9iHk%2Fuploads%2F37uAeVinSLGkvqOIRtG0%2Fimage.png?alt=media\&token=306e795b-1edc-480a-9051-448f9a4b3418)

### Landing page

A set of landing page related components.

![](https://50448613-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSwy36CS0dsnIH4ah9iHk%2Fuploads%2Fo1uGsUeUU7kchYwrmSlA%2Fimage.png?alt=media\&token=627214e4-d731-41d0-abad-3c29d45b42a5)

### Language select

![](https://50448613-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSwy36CS0dsnIH4ah9iHk%2Fuploads%2FLN8lpZDruQA7wUV5ZgcF%2Fimage.png?alt=media\&token=396449c4-1b23-49d2-bb58-e8a52b2ff709)

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](https://50448613-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSwy36CS0dsnIH4ah9iHk%2Fuploads%2FkhjruxXTneK1s1u8Xdbr%2Fimage.png?alt=media\&token=743ea2c0-faf0-4926-8171-47cecc1a2594)

### Page helpers

A growing set of components to help with building pages. 

![](https://50448613-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSwy36CS0dsnIH4ah9iHk%2Fuploads%2FgPaT65xIBuBvLjAHKG09%2Fimage.png?alt=media\&token=c9851d0f-07be-44e3-bb81-4185138b1367)

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

![](https://50448613-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSwy36CS0dsnIH4ah9iHk%2Fuploads%2F1IaSM8PzXYiGYUIrQ5Dw%2Fimage.png?alt=media\&token=0fb76136-2d4c-456d-a958-a7811ccdaafb)