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

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

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

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

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

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

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

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

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

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

### Combo Box configuration examples

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

Various configuration options for the Combo Box component including creation, disabled state, max items, and custom placeholders.

```heex
<.combo_box
  create
  label="Pick your favourite fruit"
  options={["Apple", "Banana", "Orange", "Pineapple", "Strawberry"]}
  field={@form[:fruit]}
/>
```

```heex
<.combo_box
  disabled
  label="Pick your favourite fruit"
  options={["Apple", "Banana", "Orange", "Pineapple", "Strawberry"]}
  field={@form[:fruit]}
/>
```

```heex
<.combo_box
  label="Pick your favourite fruit"
  max_items={2}
  options={["Apple", "Banana", "Orange", "Pineapple", "Strawberry"]}
  field={@form[:fruit]}
/>
```

```heex
<.combo_box
  placeholder="AI will take our jobs :("
  label="Pick your favourite fruit"
  options={["Apple", "Banana", "Orange", "Pineapple", "Strawberry"]}
  field={@form[:fruit]}
/>
```

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

### Basic Carousel Implementation

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

A standard carousel setup using default fade transitions and overlay navigation.

```heex

  <.carousel id="basic-carousel">
    <:slide image="https://images.unsplash.com/photo-1517694712202-14dd9538aa97" />
    <:slide image="https://images.unsplash.com/photo-1498050108023-c5249f4df085" />
    <:slide image="https://images.unsplash.com/photo-1461749280684-dccba630e2f6" />
  </.carousel>
  
```

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

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

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

### Install Color Scheme JavaScript

Source: https://petal.build/components/color-scheme-switch

Place the JavaScript component inside the <head> tag to ensure the correct color scheme is applied immediately, preventing a flash of unstyled content.

```html
<head>
  ...

  <.color_scheme_switch_js />
</head>
```

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

### Render local time in HEEx

Source: https://petal.build/components/local-time

Examples of using the local_time component with different presets, locales, and custom formats.

```heex
DateTime.utc_now() |> Timex.format!("{RFC1123}")

<.local_time for={DateTime.utc_now()} />
<.local_time for={DateTime.utc_now()} preset="DATETIME_FULL" />
<.local_time for={DateTime.utc_now()} locale="fr" />
<.local_time for={DateTime.utc_now()} format="yyyy mm dd" />
<.local_time for={DateTime.utc_now() |> Timex.shift(days: 40)} format="relative" />
```

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

### Implement Chat Conversation Component

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

A full-featured chat conversation example including tool calls, markdown rendering, and message actions.

```heex
<.conversation id="showcase-chat-flagship" class="w-full max-w-xl mx-auto">

  <.marker variant="separator">Today</.marker>

  <.chat_message role="user">How do I install petal_components?</.chat_message>

  <.tool_call name="search_docs" status={:complete} label="Searched the docs">

    <div class="flex items-center gap-3 text-sm">

      <.icon name="hero-book-open" class="w-8 h-8 text-primary-500" />

      <div>

        <div class="font-medium text-gray-900 dark:text-gray-100">Installation guide</div>

        <div class="text-xs text-gray-500 dark:text-gray-400">hexdocs.pm/petal_components</div>

      </div>

    </div>

  </.tool_call>

  <.chat_message role="assistant">

    <.markdown

      id="showcase-chat-flagship-md"

      content={"Add the dep and pull it in:\n\n```elixir\ndef deps do\n  [{:petal_components, \"~> 4.5\"}]\nend\n```\n\nThen `use PetalComponents` in your web module and every component is a plain HEEx tag."}

    />

    <:actions>

      <.message_actions visible="always">

        <.copy_button

          id="showcase-chat-flagship-copy"

          text={" {:petal_components, \"~> 4.5\"}"}

          icon

        />

        <.action_button icon="hero-hand-thumb-up" label="Good response" phx-click="noop" />

        <.action_button icon="hero-hand-thumb-down" label="Bad response" phx-click="noop" />

        <.action_button icon="hero-arrow-path" label="Regenerate" phx-click="noop" />

      </.message_actions>

    </:actions>

  </.chat_message>

  <:footer>

    <.suggestions

      class="mb-2"

      items={["What makes this different from React AI kits?", "Show me a tool call"]}

      on_select="noop"

    />

    <.prompt_input

      id="showcase-chat-flagship-composer"

      placeholder="Ask about petal_components..."

    />

  </:footer>

</.conversation>
```

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

### Multi-lined table with avatars and badges

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

Example implementation of a table component featuring user avatars, sub-labels, and status badges.

```heex
<.table>
  <.tr>
    <.th>Name</.th>
    <.th>Title</.th>
    <.th>Phone</.th>
    <.th>Status</.th>
    <.th></.th>
  </.tr>

  <.tr>
    <.td>
      <.user_inner_td
        avatar_assigns={%{src: "https://res.cloudinary.com/wickedsites/image/upload/v1636595188/dummy_data/avatar_2_jhs6ww.png"}}
        label="John Smith"
        sub_label="john.smith@example.com"
      />
    </.td>
    <.td>Engineer</.td>
    <.td class="whitespace-nowrap">+1 0432 677 943</.td>
    <.td>
      <.badge color="success" label="Active" />
    </.td>
    <.td>
      <.a to="/" label="Edit" class="text-primary-600 dark:text-primary-400" />
    </.td>
  </.tr>

  <.tr>
    <.td>
      <.user_inner_td
        avatar_assigns={%{src: "https://res.cloudinary.com/wickedsites/image/upload/v1636595188/dummy_data/avatar_1_lc8plf.png"}}
        label="Beth Springs"
        sub_label="beth.springs@example.com"
      />
    </.td>
    <.td>Developer</.td>
    <.td class="whitespace-nowrap">+1 0465 899 443</.td>
    <.td>
      <.badge color="warning" label="Pending" />
    </.td>
    <.td>
      <.a to="/" label="Edit" class="text-primary-600 dark:text-primary-400" />
    </.td>
  </.tr>

  <.tr>
    <.td>
      <.user_inner_td
        avatar_assigns={%{src: "https://res.cloudinary.com/wickedsites/image/upload/v1636595189/dummy_data/avatar_14_rkiyfa.png"}}
        label="Peter Knowles"
        sub_label="peter.knowles@example.com"
      />
    </.td>
    <.td>Programmer</.td>
    <.td class="whitespace-nowrap">+1 0472 344 565</.td>
    <.td>
      <.badge color="gray" label="Cancelled" />
    </.td>
    <.td>
      <.a to="/" label="Edit" class="text-primary-600 dark:text-primary-400" />
    </.td>
  </.tr>

  <.tr>
    <.td>
      <.user_inner_td
        avatar_assigns={%{src: "https://res.cloudinary.com/wickedsites/image/upload/v1604268092/unnamed_sagz0l.jpg"}}
        label="Sarah Hill"
        sub_label="sarah.hill@example.com"
      />
    </.td>
    <.td>Marketer</.td>
    <.td class="whitespace-nowrap">+1 0429 996 220</.td>
    <.td>
      <.badge color="danger" label="Deleted" />
    </.td>

    <.td>
      <.a to="/" label="Edit" class="text-primary-600 dark:text-primary-400" />
    </.td>
  </.tr>
</.table>
```

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

### Implement Content Editor in LiveView

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

Example of integrating the content field into a Phoenix form and handling the submission in a LiveView module.

```heex
<.form for={@form} phx-submit="submit">
  <.content_field
    field={@form[:content]}
    placeholder="Start typing..."
    label="Content Field" />

  <.button>Render!</.button>
</.form>

<.pretty_content
  json={@json}
  class="py-2 px-4 rounded-md border dark:border-gray-600 dark:bg-gray-800"
/>
```

```elixir
defmodule PetalProWeb.ContentEditorLive do
  use PetalProWeb, :live_view

  import PetalProWeb.ContentEditor

  def mount(_params, _session, socket) do
    changeset = %Ecto.Changeset{data: %{}}
    form = to_form(changeset, as: :example)

    {:ok,
     assign(socket,
       form: form,
       json: nil,
     )}
  end

  @impl true
  def handle_event("submit", %{"example" => %{"content" => json}}, socket) do
    {:noreply, assign(socket, :json, json)}
  end
end
```

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

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

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

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

/>
```

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

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

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

### LiveView wiring for data tables

Source: https://petal.build/components/data-table?order_by%5B%5D=id&order_by%5B%5D=inserted_at&order_directions%5B%5D=asc&order_directions%5B%5D=desc&page=1&page_size=20

Implement mount, handle_params, and handle_event callbacks to manage data fetching and URL state updates.

```elixir
defmodule MyAppWeb.WidgetsLive do
  use MyAppWeb, :live_view

  alias PetalProWeb.DataTable

  @data_table_opts [
    default_limit: 10,
    default_order: %{
      order_by: [:inserted_at],
      order_directions: [:desc]
    }
  ]

  @impl true
  def mount(_params, _session, socket) do
    {:ok, socket}
  end

  @impl true
  def handle_params(params, _url, socket) do
    {items, meta} = DataTable.search(MyApp.Widgets.Widget, params, @data_table_opts)
    {:noreply, assign(socket, items: items, meta: meta)}
  end

  @impl true
  def handle_event("update_filters", %{"filters" => filter_params}, socket) do
    query_params = DataTable.build_filter_params(socket.assigns.meta, filter_params)
    {:noreply, push_patch(socket, to: ~p"/widgets?#{query_params}")}
  end
end
```

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

### Implement a Basic Navigation Menu

Source: https://petal.build/components/navigation-menu

Uses the navigation_menu component with item slots for flyout triggers and direct links.

```heex
  <.navigation_menu id="nav-basic">
    <:item label="Products" width="md">
      <.navigation_menu_link
        to="#"
        icon="hero-chart-bar"
        title="Analytics"
        description="Understand where your traffic comes from"
      />
      <.navigation_menu_link
        to="#"
        icon="hero-cursor-arrow-rays"
        title="Engagement"
        description="Speak directly to your customers"
      />
      <.navigation_menu_link
        to="#"
        icon="hero-shield-check"
        title="Security"
        description="Keep your customer data safe"
      />
    </:item>
    <:item label="Pricing" to="#" />
  </.navigation_menu>
```

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

### Implement Meteors Component

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

Example usage of the meteors component within a container, including a heading and call-to-action button.

```heex
  <div class="relative overflow-hidden rounded-xl bg-gray-950 px-8 py-24">
    <.meteors count={30} />
    <div class="relative mx-auto flex max-w-xl flex-col items-center text-center">
      <h2 class="text-3xl font-bold text-white">Build your next SaaS with Petal</h2>
      <p class="mt-4 text-gray-300">
        Phoenix, LiveView and Tailwind, wired together so you can get straight to shipping
        the actual product.
      </p>
      <.button color="primary" label="Get started" class="mt-8" />
    </div>
  </div>
```

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

### Implement URL Inputs

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

Renders a URL input field with optional help text or as a standalone input.

```heex
<.field field={@form[:field_name]} type="url" />

<!-- With help text -->
<.field field={@form[:field_name]} type="url" help_text="Here is some help text" />

<!-- Just in the input -->
<.input field={@form[:field_name]} type="url" />
```

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

### Runtime Error: Invalid Slot

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

Example of the runtime error encountered when using unsupported slots in Petal Table.

```elixir
lists in Phoenix.HTML and templates may only contain integers representing bytes, binaries or other lists, got invalid entry:
  %{__slot__: :action, inner_block: #Function<5.60914602/2 in PetalProWeb.PostLive.Index.render/1>}
```

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

### Schema setup with Flop

Source: https://petal.build/components/data-table?order_by%5B%5D=id&order_by%5B%5D=inserted_at&order_directions%5B%5D=asc&order_directions%5B%5D=desc&page=1&page_size=20

Add the @derive Flop.Schema attribute to your Ecto schema to define which fields are sortable and filterable.

```elixir
defmodule MyApp.Widgets.Widget do
  use Ecto.Schema

  @derive {
    Flop.Schema,
    filterable: [:title, :views],
    sortable: [:id, :title, :views, :inserted_at]
  }

  schema "widgets" do
    field :title, :string
    field :views, :integer
    timestamps()
  end
end
```

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

### Implement a basic manual table

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

Constructs a table structure manually using .tr, .th, and .td components.

```heex
<.table>
  <.tr>
    <.th>Name</.th>
    <.th>Title</.th>
    <.th>Email</.th>
  </.tr>

  <.tr>
    <.td>
      John Smith
    </.td>
    <.td>Engineer</.td>
    <.td>john.smith@example.com</.td>
  </.tr>

  <.tr>
    <.td>
      Beth Springs
    </.td>
    <.td>Developer</.td>
    <.td>beth.springs@example.com</.td>
  </.tr>

  <.tr>
    <.td>
      Peter Knowles
    </.td>
    <.td>Programmer</.td>
    <.td>Peter.knowles@example.com</.td>
  </.tr>

  <.tr>
    <.td>
      Sarah Hill
    </.td>
    <.td>Marketer</.td>
    <.td>sarah.hill@example.com</.td>
  </.tr>
</.table>
```

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

### Implement a Non-Looping Carousel

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

Disables the looping feature so navigation buttons become inactive at the start and end boundaries.

```heex
  <.carousel
    id="non-looping"
    transition_type="slide"
    indicator={true}
    button_style="sides"
    rounded="xl"
    loop={false}
  >
    <:slide
      title="Step One"
      description="Navigation disabled when at first slide"
      image="https://images.unsplash.com/photo-1531545514256-b1400bc00f31"
    />
    <:slide
      title="Step Two"
      description="Both navigation buttons are active here"
      image="https://images.unsplash.com/photo-1531403009284-440f080d1e12"
    />
    <:slide
      title="Step Three"
      description="Navigation disabled when at last slide"
      image="https://images.unsplash.com/photo-1552664730-d307ca884978"
    />
  </.carousel>
```

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

### Required NPM Dependencies

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

Install these packages in your project's package.json to support the JavaScript hooks used by Pro components.

```javascript
{
  "dependencies": {
    "@floating-ui/dom": "^1.6.5",
    "tippy.js": "^6.3.7",
    "tom-select": "^2.3.1",
    "luxon": "^3.4.4",
  },
}
```

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

### Implement Switch Inputs

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

Displays switch components in various sizes and with optional help text.

```heex
    <.field
  type="switch"
  field={@form[:xs]}
  size="xs"
/>
<.field
  type="switch"
  field={@form[:sm]}
  size="sm"
/>
<.field
  type="switch"
  field={@form[:md]}
  size="md"
/>
<.field
  type="switch"
  field={@form[:lg]}
  size="lg"
/>
<.field
  type="switch"
  field={@form[:xl]}
  size="xl"
/>

<!-- With help text -->
<.field field={@form[:field_name]} type="switch" help_text="Here is some help text" />

<!-- Just in the input -->
<.input field={@form[:field_name]} type="switch" />
```

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

### Implement Text Inputs

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

Renders a standard text input field supporting placeholders and help text.

```heex
<.field field={@form[:field_name]} />

<!-- With a placeholder  -->
<.field field={@form[:field_name]} placeholder="eg. John" />

<!-- With help text -->
<.field field={@form[:field_name]} help_text="Here is some help text" />

<!-- Just the input  -->
<.input field={@form[:field_name]} placeholder="eg. John" />
```

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

### List of available date and time presets

Source: https://petal.build/components/local-time

A reference list of supported preset strings and their corresponding output formats.

```text
DATE_SHORT => 10/14/1983
DATE_MED => Oct 14, 1983
DATE_MED_WITH_WEEKDAY => Fri, Oct 14, 1983
DATE_FULL => October 14, 1983
DATE_HUGE => Friday, October 14, 1983
TIME_SIMPLE => 1:30 PM
TIME_WITH_SECONDS => 1:30:23 PM
TIME_WITH_SHORT_OFFSET => 1:30:23 PM EDT
TIME_WITH_LONG_OFFSET => 1:30:23 PM Eastern Daylight Time
TIME_24_SIMPLE => 13:30
TIME_24_WITH_SECONDS => 13:30:23
TIME_24_WITH_SHORT_OFFSET => 13:30:23 EDT
TIME_24_WITH_LONG_OFFSET => 13:30:23 Eastern Daylight Time
DATETIME_SHORT => 10/14/1983, 1:30 PM
DATETIME_MED => Oct 14, 1983, 1:30 PM
DATETIME_FULL => October 14, 1983 at 1:30 PM EDT
DATETIME_HUGE => Friday, October 14, 1983 at 1:30 PM Eastern Daylight Time
DATETIME_SHORT_WITH_SECONDS => 10/14/1983, 1:30:23 PM
DATETIME_MED_WITH_SECONDS => Oct 14, 1983, 1:30:23 PM
DATETIME_FULL_WITH_SECONDS => October 14, 1983 at 1:30:23 PM EDT
DATETIME_HUGE_WITH_SECONDS => Friday, October 14, 1983 at 1:30:23 PM Eastern Daylight Time
```

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

### Implement Select Input

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

Select dropdown component supporting prompts, help text, and multiple selections.

```heex
<.field
  field={@form[:field_name]}
  type="select"
  options={[{"Option 1", "1"}, {"Option 2", "2"}, {"Option 3", "3"}]}
/>

<!-- With a prompt -->
<.field
  field={@form[:field_name]}
  type="select"
  options={[{"Option 1", "1"}, {"Option 2", "2"}, {"Option 3", "3"}]}
  prompt="Select an option"
/>

<!-- With help text -->
<.field
  field={@form[:field_name]}
  type="select"
  options={[{"Option 1", "1"}, {"Option 2", "2"}, {"Option 3", "3"}]}
  help_text="Here is some help text"
/>

<!-- With multiple -->
<.field
  field={@form[:field_name]}
  type="select"
  options={[{"Option 1", "1"}, {"Option 2", "2"}, {"Option 3", "3"}]}
  multiple={true}
/>

<!-- Just in the input -->
<.input
  field={@form[:field_name]}
  type="select"
  options={[{"Option 1", "1"}, {"Option 2", "2"}, {"Option 3", "3"}]}
/>
```

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

### Implement Time Inputs

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

Renders a time input field with optional help text or as a standalone input.

```heex
<.field field={@form[:field_name]} type="time" />

<!-- With help text -->
<.field field={@form[:field_name]} type="time" help_text="Here is some help text" />

<!-- Just in the input -->
<.input field={@form[:field_name]} type="time" />
```

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

### Pagination Component Usage

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

Examples of how to implement the pagination component in HEEX templates using different link types and path configurations.

```APIDOC
## <.pagination>

### Description
Displays a pagination control to navigate between pages.

### Attributes
- **path** (string) - Optional - The URL path pattern for pages (default: "/:page").
- **class** (string) - Optional - CSS class for the parent div.
- **link_type** (string) - Optional - The type of link to generate: "a", "live_patch", or "live_redirect" (default: "a").
- **total_pages** (integer) - Optional - The total number of pages.
- **current_page** (integer) - Optional - The currently active page.
- **sibling_count** (integer) - Optional - Number of sibling pages to show (default: 1).
- **boundary_count** (integer) - Optional - Number of boundary pages to show (default: 1).
- **show_boundary_chevrons** (boolean) - Optional - Whether to show boundary chevrons (default: false).

### Example
<.pagination link_type="live_patch" path="/components/pagination/:page" current_page={@pagination_page} total_pages={10} />
```

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

### Implement Textarea Inputs

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

Renders a textarea component with optional help text or as a standalone input.

```heex
<.field field={@form[:field_name]} type="textarea" />

<!-- With help text -->
<.field field={@form[:field_name]} type="textarea" help_text="Here is some help text" />

<!-- Just the input  -->
<.input field={@form[:field_name]} type="textarea" />
```

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

### Basic Number Ticker

Source: https://petal.build/components/number-ticker

Displays a simple number ticker that counts from a start value to the target value upon entering the viewport.

```heex

  <.number_ticker id="basic-number-ticker-example" value={5200} class="text-4xl font-bold" />
  
```

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

### Import colors configuration

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

Import your custom colors CSS file.

```css
@import "./colors.css";
```