Renders an audio player with a labeled header.

Uses native <audio controls> for maximum browser compatibility.

Example

<.audio_block id="podcast-1" src="/audio/episode.mp3" title="Episode 42" />

Attributes

• id (:string) (required) - Unique identifier for the audio block.
• src (:string) (required) - URL of the audio source.
• title (:string) - Optional title label for the audio. Defaults to nil.
• class (:string) - Additional CSS classes. Defaults to nil.

Renders a URL preview card (bookmark) with optional image, title, description, favicon, and domain display.

Example

<.bookmark_card
  id="bm-1"
  url="https://example.com/article"
  title="Great Article"
  description="A summary of the article content."
  favicon="https://example.com/favicon.ico"
  image="https://example.com/og-image.jpg"
/>

Attributes

• id (:string) (required) - Unique identifier for the bookmark card.
• url (:string) (required) - The bookmarked URL.
• title (:string) - Title of the bookmarked page. Defaults to nil.
• description (:string) - Description or excerpt. Defaults to nil.
• favicon (:string) - URL of the site favicon. Defaults to nil.
• image (:string) - URL of the preview image. Defaults to nil.
• class (:string) - Additional CSS classes. Defaults to nil.

Renders a CTA button inside editor content.

When href is provided, renders as an <a> tag. Otherwise renders as a <button>. Supports primary, outline, and ghost variants.

Example

<.button_block label="Get Started" href="/signup" variant={:primary} />
<.button_block label="Learn More" variant={:outline} />

Attributes

• id (:string) - Optional identifier for the button. Defaults to nil.
• label (:string) (required) - Button label text.
• href (:string) - URL for anchor-style button. Defaults to nil.
• variant (:atom) - Visual variant of the button. Defaults to :primary. Must be one of :primary, :outline, or :ghost.
• class (:string) - Additional CSS classes. Defaults to nil.
• Global attributes are accepted. Additional HTML attributes.

Renders a horizontal rule with a centered text label.

Uses a flex container with two lines (pseudo-elements via bg-border spans) flanking the centered text.

Example

<.divider_with_label label="Section 2" />
<.divider_with_label label="OR" />

Attributes

• label (:string) (required) - Text label displayed at the center of the divider.
• class (:string) - Additional CSS classes. Defaults to nil.

Renders a bordered container with an iframe map embed in an aspect-video aspect ratio.

Example

<.map_embed_block
  id="office-map"
  src="https://www.google.com/maps/embed?pb=..."
  title="Office Location"
/>

Attributes

• id (:string) (required) - Unique identifier for the map embed.
• src (:string) (required) - URL of the map embed (e.g. Google Maps embed).
• title (:string) - Accessible title for the map iframe. Defaults to "Map".
• class (:string) - Additional CSS classes. Defaults to nil.

Renders a LaTeX math block with a textarea for input and a preview area.

The preview area includes a data-math-preview attribute for client-side rendering via KaTeX or MathJax. Without JavaScript, the raw LaTeX source is displayed as a fallback.

Example

<.math_block id="eq-1" value="E = mc^2" />
<.math_block id="eq-2" value="\\int_0^1 x^2 dx" />

Attributes

• id (:string) (required) - Unique identifier for the math block.
• value (:string) - LaTeX source string. Defaults to "".
• class (:string) - Additional CSS classes. Defaults to nil.

Renders an iframe-based PDF viewer with a header showing the filename and a download link.

The iframe has type="application/pdf" and a minimum height of 500px for adequate viewing area.

Example

<.pdf_viewer_block id="report" src="/files/quarterly-report.pdf" />

Attributes

• id (:string) (required) - Unique identifier for the PDF viewer.
• src (:string) (required) - URL of the PDF file.
• class (:string) - Additional CSS classes. Defaults to nil.

Renders an inline progress bar with optional label and percentage display.

The bar width is set via inline style based on the value attribute (0-100).

Example

<.progress_bar_block value={75} label="Upload progress" />
<.progress_bar_block id="proj-progress" value={42} />

Attributes

• id (:string) - Optional identifier for the progress block. Defaults to nil.
• value (:integer) - Progress value between 0 and 100. Defaults to 0.
• label (:string) - Optional label text above the bar. Defaults to nil.
• class (:string) - Additional CSS classes. Defaults to nil.

Renders a rich social card with provider icon and a link to the content.

The provider determines the icon and label. Links open in a new tab with rel="noopener noreferrer" for security.

Example

<.social_embed_block id="tweet-1" url="https://twitter.com/user/status/123" provider={:twitter} />
<.social_embed_block id="yt-1" url="https://youtube.com/watch?v=abc" provider={:youtube} />

Attributes

• id (:string) (required) - Unique identifier for the social embed.
• url (:string) (required) - URL of the social post or content.
• provider (:atom) - Social media provider for icon display. Defaults to :generic. Must be one of :twitter, :youtube, :instagram, or :generic.
• class (:string) - Additional CSS classes. Defaults to nil.

Renders tabbed content sections with a tab button bar and bottom border indicator.

The active_tab defaults to the first tab ID when not provided. Each tab button dispatches a phx-click event for server-side tab switching.

Example

<.tab_block
  id="code-tabs"
  tabs={[%{id: "elixir", label: "Elixir"}, %{id: "js", label: "JavaScript"}]}
  active_tab="elixir"
>
  <.tab_block_panel id="panel-elixir" tab_id="elixir" active_tab="elixir">
    Elixir code here.
  </.tab_block_panel>
  <.tab_block_panel id="panel-js" tab_id="js" active_tab="elixir">
    JS code here.
  </.tab_block_panel>
</.tab_block>

Attributes

• id (:string) (required) - Unique identifier for the tab block.
• tabs (:list) - List of maps with :label and :id keys representing each tab. Defaults to [].
• active_tab (:string) - The ID of the currently active tab. Defaults to nil.
• class (:string) - Additional CSS classes. Defaults to nil.

Slots

• inner_block (required) - Tab panels (use tab_block_panel components).

Renders an individual tab panel that shows or hides based on matching tab_id to active_tab.

Example

<.tab_block_panel id="panel-1" tab_id="overview" active_tab="overview">
  Overview content here.
</.tab_block_panel>

Attributes

• id (:string) (required) - Unique identifier for the tab panel.
• tab_id (:string) (required) - The tab ID this panel belongs to.
• active_tab (:string) - The currently active tab ID. Defaults to nil.
• class (:string) - Additional CSS classes. Defaults to nil.

Slots

• inner_block (required) - Panel content.

Renders a collapsible list container.

Wraps toggle list items in a semantic role="list" container with data-type="toggleList" for editor integration.

Example

<.toggle_list id="my-toggles">
  <.toggle_list_item id="item-1" label="Section A" open={true}>
    Content for section A.
  </.toggle_list_item>
</.toggle_list>

Attributes

• id (:string) (required) - Unique identifier for the toggle list.
• class (:string) - Additional CSS classes. Defaults to nil.

Slots

• inner_block (required) - Toggle list items.

Renders an individual toggleable item using <details>/<summary>.

The chevron icon rotates when the item is open. Uses native HTML disclosure so it works without JavaScript.

Example

<.toggle_list_item id="faq-1" label="What is PhiaUI?" open={true}>
  PhiaUI is a component library for Phoenix LiveView.
</.toggle_list_item>

Attributes

• id (:string) (required) - Unique identifier for the toggle item.
• label (:string) (required) - Summary label text.
• open (:boolean) - Whether the item is initially expanded. Defaults to false.
• class (:string) - Additional CSS classes. Defaults to nil.

Slots

• inner_block (required) - Collapsible content.

Renders an HTML5 video player in a rounded container.

Supports poster image, native controls, and autoplay (muted when autoplay is enabled for browser compatibility).

Example

<.video_block id="demo-vid" src="/videos/demo.mp4" poster="/images/poster.jpg" />

Attributes

• id (:string) (required) - Unique identifier for the video block.
• src (:string) (required) - URL of the video source.
• poster (:string) - URL of the poster/thumbnail image. Defaults to nil.
• controls (:boolean) - Whether to show native video controls. Defaults to true.
• autoplay (:boolean) - Whether to autoplay the video. Defaults to false.
• class (:string) - Additional CSS classes. Defaults to nil.