Petal Components

https://petal.build/components
Admin
Petal Components is a suite of beautiful, accessible, and high-performance HEEx and Tailwind CSS...
Tokens:220,973
Snippets:3,915
Trust Score:7.2
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Tailwind binary

Source: https://petal.build/components

Run the installation command to download the specified Tailwind version.

```bash
mix tailwind.install
```

--------------------------------

### Implement Sidebar Layout

Source: https://petal.build/components/layouts

Example of wiring up a sidebar layout in a template file.

```heex
<.flash_group flash={@flash} />
<.sidebar_layout
  current_page={@current_page}
  main_menu_items={[
    %{
      name: :dashboard,
      label: "Dashboard",
      icon: "hero-home",
      path: ~p"/"
    },
  ]}
>
  <:logo>
    LOGO GOES HERE
  </:logo>
  <:bottom_section_content>
    <%!-- User profile, auth buttons, etc. --%>
  </:bottom_section_content>

  <%= @inner_content %>
</.sidebar_layout>
```

--------------------------------

### Execute AI-driven installation

Source: https://petal.build/components

Command to trigger the AI agent to patch project files and install dependencies automatically.

```bash
install petal_components
```

--------------------------------

### Button Component Usage Example

Source: https://petal.build/components/mcp

Example of the HEEx usage syntax for the button component as returned by the MCP server.

```heex
<.button> … </.button>
```

--------------------------------

### Spinner Component Usage

Source: https://petal.build/components/loading

Examples of how to implement the spinner component with various visibility, size, and styling configurations.

```heex
<.spinner show={false} />
<.spinner show={true} size="sm" />
<.spinner size="md" class="text-primary-500" />
<.spinner size="lg" class="text-secondary-500" />
```

--------------------------------

### Basic Popover Implementation

Source: https://petal.build/components/popover

A standard popover example containing a form with input fields inside the panel.

```heex
<.popover placement="bottom-start" panel_class="w-80">
  <:trigger>
    <.icon name="hero-adjustments-horizontal" class="w-4 h-4 mr-2" /> Dimensions
  </:trigger>
  <div class="space-y-3">
    <div>
      <.h5 class="mb-1" no_margin>Dimensions</.h5>
      <.p class="text-sm text-gray-500 dark:text-gray-400" no_margin>
        Set the dimensions for the layer.
      </.p>
    </div>
    <div class="grid grid-cols-2 items-center gap-2">
      <label class="text-sm">Width</label>
      <input type="text" value="100%" class="pc-text-input" />
      <label class="text-sm">Max. width</label>
      <input type="text" value="300px" class="pc-text-input" />
      <label class="text-sm">Height</label>
      <input type="text" value="25px" class="pc-text-input" />
    </div>
  </div>
</.popover>
```

--------------------------------

### Install Petal Components MCP

Source: https://petal.build/components/mcp

Command to add the Petal Components MCP server to an AI coding assistant.

```bash
claude mcp add petal --transport http https://mcp.petal.build/mcp
```

--------------------------------

### Install Combo-box CSS

Source: https://petal.build/components/combo-box

Import the required combo-box CSS file into your project's app.css file.

```css
@import "tailwindcss/base";
@import "../../deps/petal_components/assets/default.css";
@import "../../deps/petal_framework/assets/css/combo-box.css"; /* <-- Add this line */
@import "tailwindcss/components";
@import "tailwindcss/utilities";
```

--------------------------------

### Implement Progress Bars with Sizes

Source: https://petal.build/components/progress

Demonstrates different size variants for progress bars, including an example with a label for the xl size.

```heex
<.progress size="xs" value={15} max={100} class="max-w-full" />
<.progress color="primary" size="sm" value={15} max={100} class="max-w-full" />
<.progress size="md" value={15} max={100} class="max-w-full" />
<.progress size="lg" value={15} max={100} class="max-w-full" />
<.progress color="warning" value={75} max={100} class="max-w-full" />
<.progress size="xl" value={15} max={100} class="max-w-full" label="15%" />
```

--------------------------------

### Implement Stacked Layout in app.html.heex

Source: https://petal.build/components/layouts

Example of using the stacked_layout component with defined menu items and logo slot.

```heex
<.stacked_layout
  current_page={:dashboard}
  main_menu_items={[
    %{
      name: :dashboard,
      label: "Dashboard",
      path: ~p"/",
      icon: "hero-window",
    },
    %{
      name: :sidebar,
      label: "Sidebar",
      path: ~p"/components/layouts/sidebar",
      icon: "her-cog",
    }
  ]}
  user_menu_items={[
    %{
      name: :login,
      label: "Login",
      path: ~p"/login",
      icon: "hero-key"
    }
  ]}
>
  <:logo>
    <img class="h-8" src="https://res.cloudinary.com/wickedsites/image/upload/v1635752721/petal/logo_rh2ras.png" />
  </:logo>

  <%= @inner_content %>
</.stacked_layout>
```

--------------------------------

### Basic Accordion Implementation

Source: https://petal.build/components/accordion

A standard accordion setup using the .accordion component with multiple :item slots for collapsible content.

```heex
<.accordion class="w-full max-w-xl mx-auto">

  <:item heading="Is it accessible?">

    Yes - proper button semantics, aria-expanded, and keyboard toggling out of the box.

  </:item>

  <:item heading="Can several be open at once?">

    Not by default. Pass the multiple attr to allow more than one open section.

  </:item>

  <:item heading="Does it follow the theme?">

    Borders, radius and text tiers all come from the design tokens.

  </:item>

</.accordion>
```

--------------------------------

### Implement Stepper Component

Source: https://petal.build/components/stepper

Examples of the Stepper component in different sizes (sm, md, lg) with varying active and complete states.

```heex
<.stepper
  steps={[
    %{
      name: "Account Details",
      description: "Basic information",
      complete?: true,
      active?: true,
      on_click: JS.push("navigate", value: %{target_index: 0})
    },
    %{
      name: "Preferences",
      description: "Set preferences",
      complete?: false,
      active?: false,
      on_click: JS.push("navigate", value: %{target_index: 1})
    },
    %{
      name: "Confirmation",
      description: "Review and confirm",
      complete?: false,
      active?: false,
      on_click: JS.push("navigate", value: %{target_index: 2})
    }
  ]}
  size="sm"
/>
<.stepper
  steps={[
    %{
      name: "Account Details",
      description: "Basic information",
      complete?: true,
      active?: false,
      on_click: JS.push("navigate", value: %{target_index: 0})
    },
    %{
      name: "Preferences",
      description: "Set preferences",
      complete?: true,
      active?: true,
      on_click: JS.push("navigate", value: %{target_index: 1})
    },
    %{
      name: "Confirmation",
      description: "Review and confirm",
      complete?: false,
      active?: false,
      on_click: JS.push("navigate", value: %{target_index: 2})
    }
  ]}
  size="md"
  class="mt-12"
/>
<.stepper
  steps={[
    %{
      name: "Account Details",
      description: "Basic information",
      complete?: true,
      active?: false,
      on_click: JS.push("navigate", value: %{target_index: 0})
    },
    %{
      name: "Preferences",
      description: "Set preferences",
      complete?: true,
      active?: false,
      on_click: JS.push("navigate", value: %{target_index: 1})
    },
    %{
      name: "Confirmation",
      description: "Review and confirm",
      complete?: true,
      active?: true,
      on_click: JS.push("navigate", value: %{target_index: 2})
    }
  ]}
  size="lg"
  class="mt-12"
/>
```

--------------------------------

### Create links, live patches, and live redirects

Source: https://petal.build/components/links

Demonstrates basic usage of the <.a> component for standard links, live patches, live redirects, and method-based links.

```heex
<.a to="/" class="" label="Link" />
<.a link_type="live_patch" to="/" class="" label="Link" />
<.a link_type="live_redirect" to="/" class="" label="Link" />

<!-- We use Phoenix.HTML.Link.link()  -->
<.a to="/" method="put" class="" label="Link" />
```

--------------------------------

### Basic Dropdown Implementation

Source: https://petal.build/components/dropdowns

Demonstrates a standard dropdown with various menu item types including icons, links, and Phoenix events.

```heex
<.dropdown label="Dropdown">
  <.dropdown_menu_item>
    <.icon name="hero-home" class="w-5 h-5 text-gray-500" />
    Button item with icon
  </.dropdown_menu_item>
  <.dropdown_menu_item link_type="button" label="button item" />
  <.dropdown_menu_item link_type="a" to="/" label="Link" />
  <.dropdown_menu_item link_type="a" to="/" label="Link with method" method={:put} />
  <.dropdown_menu_item link_type="live_patch" to="/" label="Live Patch" />
  <.dropdown_menu_item link_type="live_redirect" to="/" label="Live Redirect" />
  <.dropdown_menu_item phx-click="some_phoenix_click_event" label="Phoenix click event" />
</.dropdown>
```

--------------------------------

### Icon Marquee Example

Source: https://petal.build/components/marquee

Displays a horizontal scrolling list of icons.

```heex
<.marquee pause_on_hover repeat={5}>
  <.icon name="hero-academic-cap" class="w-10 h-10 text-blue-500" />
  <.icon name="hero-adjustments-horizontal" class="w-10 h-10 text-green-500" />
  <.icon name="hero-bolt" class="w-10 h-10 text-yellow-500" />
  <.icon name="hero-heart" class="w-10 h-10 text-red-500" />
  <.icon name="hero-musical-note" class="w-10 h-10 text-purple-500" />
</.marquee>
```

--------------------------------

### Implement basic pagination

Source: https://petal.build/components/pagination/10

Demonstrates various link types and path configurations for the pagination component.

```heex
<.pagination link_type="a" class="mb-5" path="/:page" current_page={1} total_pages={10} />
<.pagination link_type="live_patch" class="mb-5" path="/:page" current_page={5} total_pages={10} />
<.pagination link_type="live_redirect" class="mb-5" path="/:page" current_page={10} total_pages={10} />
<.pagination path={fn page -> Routes.user_path(Endpoint, :index, [page: page]) end} current_page={1} total_pages={10} />
```

--------------------------------

### Basic Rating Usage

Source: https://petal.build/components/rating

Examples of rendering the rating component with different values and labels.

```heex
<.rating rating={4} total={5} />
<.rating rating={2.5} total={5} />
<.rating rating={0} total={5} />
<.rating include_label rating={3.3} total={5} />
```

--------------------------------

### Render Suggestions

Source: https://petal.build/components/chat

Displays prompt-starter chips for empty chat states.

```heex
<.suggestions

  class="max-w-xl mx-auto"

  items={["What is Phoenix LiveView?", "Show me a markdown demo", "Write a haiku"]}

  on_select="suggestion"

/>
```

--------------------------------

### Prose Component Usage

Source: https://petal.build/components/typography

Example of how to wrap standard HTML content within the Prose component.

```heex
<.prose>
  <h1>Title</h1>
  <p>Here is a paragraph</p>
  <p>Here is a another paragraph</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</.prose>
```

--------------------------------

### Popover Placement Options

Source: https://petal.build/components/popover

Demonstrates different placement configurations for the popover panel.

```heex
<.popover placement="top">
  <:trigger>Top</:trigger>
  <p class="text-sm">Opens above, centered on the trigger.</p>
</.popover>
<.popover placement="right-start">
  <:trigger>Right start</:trigger>
  <p class="text-sm">Opens to the right, aligned to the trigger's top edge.</p>
</.popover>
```

--------------------------------

### Skeleton Component Variants

Source: https://petal.build/components/skeleton

Examples of different skeleton types available for use in HEEX templates.

```heex
  <.skeleton />
```

```heex
  <.skeleton kind={:image} />
```

```heex
  <.skeleton kind={:video} />
```

```heex
  <.skeleton kind={:text} />
```

```heex
  <.skeleton kind={:card} />
```

```heex
  <.skeleton kind={:widget} />
```

```heex
  <.skeleton kind={:list} />
```

```heex
  <.skeleton kind={:testimonial} />
```

--------------------------------

### Implement Icons and Keyboard Hints

Source: https://petal.build/components/input-group

Integrate icons and keyboard shortcuts into the input group for enhanced search or command fields.

```heex
  <.input_group>
    <:leading><.icon name="hero-magnifying-glass" class="h-4 w-4" /></:leading>
    <.input type="search" name="q" value="" placeholder="Search components" />
    <:trailing><kbd class="pc-kbd">⌘K</kbd></:trailing>
  </.input_group>
```

--------------------------------

### Testimonial Marquee Example

Source: https://petal.build/components/marquee

Displays a horizontal scrolling list of review cards with hover-pause functionality.

```heex
<.marquee pause_on_hover repeat={3}>
  <.review_card
    name="Anne"
    username="@anne"
    body="I've never seen anything like this before. It's amazing."
    img="https://res.cloudinary.com/wickedsites/image/upload/v1604268092/unnamed_sagz0l.jpg"
  />
  <.review_card
    name="Jill"
    username="@jill"
    body="I don't know what to say. I'm speechless. This is amazing."
    img="https://res.cloudinary.com/wickedsites/image/upload/v1636595188/dummy_data/avatar_1_lc8plf.png"
  />
  <.review_card
    name="John"
    username="@john"
    body="I'm at a loss for words. This is amazing. I love it."
    img="https://res.cloudinary.com/wickedsites/image/upload/v1636595188/dummy_data/avatar_2_jhs6ww.png"
  />
</.marquee>
```

--------------------------------

### Logo Marquee Example

Source: https://petal.build/components/marquee

Displays a horizontal scrolling list of logos using the marquee component.

```heex
<.marquee gap="5rem">
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
    alt="Google"
    class="h-10"
  />
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/4/44/Microsoft_logo.svg"
    alt="Microsoft"
    class="h-10"
  />
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg"
    alt="Apple"
    class="h-10"
  />
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg"
    alt="Netflix"
    class="h-10"
  />
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg"
    alt="IBM"
    class="h-10"
  />
</.marquee>
```

--------------------------------

### Implement vertical_menu with nested items

Source: https://petal.build/components/menus

Example usage of the vertical_menu component with nested menu items and icons.

```elixir
<div class="w-96">
  <.vertical_menu
    title="Main menu"
    menu_items={[
      %{
        title: "Main",
        menu_items: [
      %{
        name: :home,
        label: "Home",
        path: ~p"/",
        icon: "hero-home"
      },
      %{
        name: :data,
        label: "Data",
        path: ~p"/",
        icon: "hero-circle-stack",
        menu_items: [
          %{
            name: :data,
            label: "Archived",
            path: ~p"/",
            icon: "hero-archive-box"
          },
          %{
            name: :data,
            label: "Downloads",
            path: ~p"/",
            icon: "hero-arrow-down-on-square-stack"
          },
        ]
      },
      %{
        name: :tools,
        label: "Tools",
        path: ~p"/",
        icon: "hero-wrench"
      },
    ]
      },
      %{
        title: "User",
        menu_items: [
          %{
            name: :profile,
            label: "Profile",
            path: ~p"/",
            icon: "hero-cog-6-tooth"
          },
        ]
      }
    ]}
    current_page={:home}
  />
</div>
```

--------------------------------

### Use custom methods with links

Source: https://petal.build/components/links

Shows how to pass specific methods like :delete to the <.a> component.

```heex
<.a to="/logout" method={:delete} class="" label="Logout" />
```

--------------------------------

### Vertical Marquee Example

Source: https://petal.build/components/marquee

Displays content in a vertical scrolling layout with custom duration and reverse direction.

```heex
<div class="flex gap-5 my-12">
<.marquee vertical max_height="2xl" reverse duration="20s" pause_on_hover repeat={4}>
  <.review_card
    name="Anne"
    username="@anne"
    body="I've never seen anything like this before. It's amazing."
    img="https://res.cloudinary.com/wickedsites/image/upload/v1604268092/unnamed_sagz0l.jpg"
  />
  <.review_card
    name="Jill"
    username="@jill"
    body="I don't know what to say. I'm speechless. This is amazing."
    img="https://res.cloudinary.com/wickedsites/image/upload/v1636595188/dummy_data/avatar_1_lc8plf.png"
  />
  <.review_card
    name="John"
    username="@john"
    body="I'm at a loss for words. This is amazing. I love it."
    img="https://res.cloudinary.com/wickedsites/image/upload/v1636595188/dummy_data/avatar_2_jhs6ww.png"
  />
</.marquee>

<.marquee
  vertical
  class="hidden lg:flex"
  max_height="2xl"
  duration="20s"
  pause_on_hover
  repeat={4}
>
  <.review_card
    name="Anne"
    username="@anne"
    body="I've never seen anything like this before. It's amazing."
    img="https://res.cloudinary.com/wickedsites/image/upload/v1604268092/unnamed_sagz0l.jpg"
  />
  <.review_card
    name="Jill"
    username="@jill"
    body="I don't know what to say. I'm speechless. This is amazing."
    img="https://res.cloudinary.com/wickedsites/image/upload/v1636595188/dummy_data/avatar_1_lc8plf.png"
  />
  <.review_card
    name="John"
    username="@john"
    body="I'm at a loss for words. This is amazing. I love it."
    img="https://res.cloudinary.com/wickedsites/image/upload/v1636595188/dummy_data/avatar_2_jhs6ww.png"
  />
</.marquee>
</div>
```

--------------------------------

### Basic Shine Border Implementation

Source: https://petal.build/components/shine-border

Wraps content in a panel with a default shimmer effect.

```heex
  <.shine_border>
    <div class="p-8 text-center">
      <h3 class="text-lg font-semibold">Upgrade to Pro</h3>
      <p class="mt-2 text-sm text-gray-500">Everything in Free, plus the components that ship products.</p>
    </div>
  </.shine_border>
```

--------------------------------

### Alert Component Usage Examples

Source: https://petal.build/components/alerts

Demonstrates how to implement success and warning alerts with icons and optional close buttons using HEEx templates.

```heex
<div class="flex items-start max-w-sm">
  <.alert
    variant="outline"
    color="success"
    with_icon
    heading="Optional heading that is too long"
  >
    This is quite a long paragraph that takes up more than one line.
  </.alert>
</div>
<div class="flex items-start max-w-sm">
  <.alert
    variant="outline"
    color="warning"
    with_icon
    close_button_properties={["phx-click": "do_something"]}
    heading="Optional heading that is too long"
  >
    This is quite a long paragraph that takes up more than one line.
  </.alert>
</div>
```

--------------------------------

### Render Content Components

Source: https://petal.build/components/content-editor

Examples for rendering Editor.js JSON data using standard or styled components.

```heex
<.content json="{ blocks: [] }" />
```

```elixir
# Editor.js block json. E.g. {'blocks': []}
attr :json, :string, required: true
```

```heex
<.pretty_content json="{ blocks: [] }" />
```

```elixir
# Editor.js block json. E.g. {'blocks': []}
attr :json, :string, required: true

attr :prose_class, :any,
  # Default Tailwind Prose classes
  default: [
    "prose dark:prose-invert max-w-full prose-img:rounded-xl prose-pre:rounded-xl",
    "prose-img:mx-auto prose-a:text-primary-600 prose-a:dark:text-primary-300"
  ]

# This will merge with the prose_class attribute on the container
attr :class, :any, default: nil
```
Tokens:
Raw