# 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. There are two locations to find these:

* **Petal Framework Components**
  * These are maintained by us and located in `/lib/_petal_framework/web/components` 
  * If you want to modify any of these, we recommend duplicating it into your apps component folder (`/lib/<your_app>_web/components`) first. That way, if we release updated versions of Petal Pro, you can still just copy and paste the whole `_petal_framework` folder into your project
* Components for you to modify
  * These are components that you will likely modify&#x20;
    * eg. brand related or landing page related
  * Found in `/lib/<your_app>_web/components`&#x20;

### Layouts

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

### Brand

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

### Color scheme switch

```markup
<.color_scheme_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)

```markup
<h1>Let's verify your account</h1>

<p>Touch the button below to verify your account</p>

<EmailComponents.button_centered to={@url}>
  Verify account
</EmailComponents.button_centered>

<EmailComponents.small_text>
  If you didn't create an account with us, please ignore this.
</EmailComponents.small_text>
```

### Landing page

A set of landing page related components. For example:

```html
<LandingPage.features
  title={gettext("Features")}
  description={gettext("Here are some features you can use to get started with your web app.")}
  features={
    [
      %{
        title: "Authentication",
        description: Faker.Lorem.sentence(10..20),
        icon: :lightning_bolt
      },
      %{
        title: "HTML Emails",
        description: Faker.Lorem.sentence(10..20),
        icon: :puzzle
      },
      %{
        title: "Wallaby testing",
        description: Faker.Lorem.sentence(10..20),
        icon: :at_symbol
      }
    ]
  }
/>
```

![](/files/AwwhxzFwYa4l1s3kswdl)

### Language select

![](/files/H4v8q6ApgCnIIVzmLjOb)

A dropdown for setting your language.

```markup
<.language_select
  current_locale={Gettext.get_locale(PetalProWeb.Gettext)}
  language_options={PetalPro.config(:language_options)}
/>
```

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

A growing set of generic page components to help with building pages.&#x20;

#### Box

![](/files/WDXRspTVbhBnPCOf1Mh3)

```markup
<.box padded>
  <%= live_component(PetalProWeb.OrgFormComponent, [...]) %>
</.box>
```

#### Page header

Shows a heading and optional slot for buttons on the right hand side.

![](/files/6mVZJ5T68sRrFl0DWIy9)

```markup
<.page_header title="Listing Discounts">
  <.button
    link_type="live_patch"
    label="New Discount"
    to={Routes.discount_index_path(@socket, :new)}
  />
</.page_header>
```

#### Sidebar tabs container

A panel with a sidebar for a menu, and a slot for content on the right.

![](/files/3w9aDNjU8DthQdOn6Ad6)

```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) %>
</.sidebar_tabs_container>
```

### 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/v1.5.0/fundamentals/layouts-and-menus.md#menus)).

![](/files/ZWjKnBSry01yT1ZdlkLP)

```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}
/>
```

### 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" />
```

#### Markdown

Simple renders pure HTML from markdown.

```markup
<.markdown content={some_markdown} />
```

### Social Button

![](/files/sRtjGEOMXtf4VrHaHaLJ)

```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"
/>
```


---

# 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/v1.5.0/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.