# Components
The majority of components come from our open-source package "[Petal Components](https://github.com/petalframework/petal_components)". However, there are some only in Petal Pro. Ultimately, petal.build will house all docs related to components, and these guides will more tailored to Petal Pro core functionality.
### Layouts
[Docs](https://petal.build/components/layouts) are on petal.build.
### Brand
See the [Branding section](https://docs.petal.build/petal-pro-documentation/v2.2.0/fundamentals/branding).
### Color scheme switch
```markup
<.color_scheme_switch />
```
The switch to switch between light and dark mode.
Note that for this to work you also need to add this to your `` . This is installed by default in Petal Pro.
```phoenix-heex
# in your :
<.color_scheme_switch_js />
```
### Email helpers
A set of components for email templates. Kind of like Petal Components, but for emails.
Example usage:
```markup
Let's verify your account
Touch the button below to verify your account
Verify account
If you didn't create an account with us, please ignore this.
```
If you want to add your own components, you can edit the following file:
```bash
/lib/petal_pro_web/components/email_components.ex
```
Then add your components:
```elixir
defmodule PetalPro.Components.EmailComponents do
use Phoenix.Component
def my_new_component(assigns) do
~H"""
Your component HTML goes here
"""
end
end
```
Now it'll be available in your email templates!
```markup
Let's verify your account
<.my_new_component />
```
### Landing page
A set of landing page related components. For example:
```
```
### Language select
A dropdown for setting your language.
```markup
<.language_select
current_locale={Gettext.get_locale(PetalProWeb.Gettext)}
language_options={PetalPro.config(:language_options)}
/>
```
This is a Petal Pro component. If you want to see how it's coded or modify it to your own needs you can edit this file:
```bash
/lib/petal_pro_web/components/pro_components/language_select.ex
```
Language options are set in your config.exs:
```elixir
config :petal_pro, :language_options, [
%{locale: "en", flag: "🇬🇧", label: "English"},
%{locale: "fr", flag: "🇫🇷", label: "French"}
]
```
See [translations](https://docs.petal.build/petal-pro-documentation/v2.2.0/fundamentals/translations) for more info.
### Notification
A flash notification component defined in Petal Pro. See [docs](https://petal.build/components/flash).
This comes from `flash_group/1` set in your layout:
{% code title="app.htm.heex" %}
```phoenix-heex
<.flash_group flash={@flash} />
```
{% endcode %}
To see the implementation:
```bash
/lib/petal_pro_web/components/pro_components/flash.ex
```
### Page components
A set of generic page components to help with building pages. To see a list of them:
```bash
/lib/petal_pro_web/components/pro_components/page_components.ex
```
#### Box
```markup
<.box padded>
<%= live_component(PetalProWeb.OrgFormComponent, [...]) %>
```
#### Page header
Shows a heading and optional slot for buttons on the right hand side.
```markup
<.page_header title="Listing Discounts">
<.button
link_type="live_patch"
label="New Discount"
to={Routes.discount_index_path(@socket, :new)}
/>
```
#### Sidebar tabs container
A panel with a sidebar for a menu, and a slot for content on the right.
```markup
<.sidebar_tabs_container current_page={:edit_profile} menu_items={[
%{
name: :edit_profile,
label: gettext("Edit profile"),
path: Routes.live_path(Endpoint, PetalProWeb.EditProfileLive),
icon: :user_circle
},
...
]}>
<%= render_slot(@inner_block) %>
```
### User dropdown menu
A Petal Pro component. 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/v2.2.0/layouts-and-menus#menus)).
```markup
<.user_menu_dropdown
user_menu_items={@user_menu_items}
avatar_src={@avatar_src}
current_user_name={if @current_user, do: user_name(@current_user), else: nil}
/>
```
To see the implementation:
```bash
/lib/petal_pro_web/components/pro_components/user_dropdown_menu.ex
```
### Markdown
#### Pretty markdown
Renders the markdown as HTML and uses the [Tailwind Typography](https://tailwindcss.com/docs/typography-plugin) classes to prettify it.
```markup
<.pretty_markdown content={some_markdown} class="mx-auto" />
```
To see the implementation:
```bash
/lib/petal_pro_web/components/pro_components/markdown.ex
```
#### Markdown
Simple renders pure HTML from markdown.
```markup
<.markdown content={some_markdown} />
```
### Social Button
```markup
<.social_button
link_type="a"
to={Routes.user_ueberauth_path(@conn_or_socket, :request, "google")}
variant="outline"
logo="google"
class="w-full"
/>
<.social_button
link_type="a"
to={Routes.user_ueberauth_path(@conn_or_socket, :request, "github")}
variant="outline"
logo="github"
class="w-full"
/>
```
This is a Petal Pro component. To see its implementation:
```bash
/lib/petal_pro_web/components/pro_components/social_button.ex
```