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

### Brand

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

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

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

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

![](https://524212494-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Flc3AHrmpWNJL3jzvCL5p%2Fuploads%2FqZoUjCJO6lrbcd5COwsX%2FCleanShot%202022-05-26%20at%2013.40.33.png?alt=media\&token=d0aece72-10ba-4b91-8b28-b7b8cb78bc36)

### Language select

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

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

### Page components

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

#### Box

![](https://524212494-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Flc3AHrmpWNJL3jzvCL5p%2Fuploads%2FDEECxGxl8HFlnIHo7VqW%2FCleanShot%202022-05-26%20at%2013.58.45.png?alt=media\&token=38ea177e-acc4-46c6-826b-4f9d12cfd5fb)

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

#### Page header

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

![](https://524212494-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Flc3AHrmpWNJL3jzvCL5p%2Fuploads%2FxXlOTG6Me9krPsV8XBjY%2FCleanShot%202022-05-26%20at%2014.06.30.png?alt=media\&token=35fe17d4-c8b6-40bf-9159-3f31b80f4498)

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

![](https://524212494-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Flc3AHrmpWNJL3jzvCL5p%2Fuploads%2FenKUmBHFb4QebJQYAW7o%2FCleanShot%202022-05-26%20at%2014.10.41.png?alt=media\&token=0a1feb85-5c7c-4e1f-997e-e4b2c38260e5)

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

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

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

![](https://524212494-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Flc3AHrmpWNJL3jzvCL5p%2Fuploads%2FeKeXCBzwnC3Dyai8Ca9x%2FCleanShot%202022-05-26%20at%2014.20.19.png?alt=media\&token=1f688bdc-b9a8-4169-8aa9-e6a98b826e34)

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