Renders a styled blockquote with variant visual treatments.

Variants:

• :default — left border accent with subtle background
• :border — thick left border, no background
• :modern — large decorative quotation mark
• :pull — centered pull-quote with large italic text

Example

<.block_quote_styled variant={:modern} citation="Alan Kay">
  The best way to predict the future is to invent it.
</.block_quote_styled>

Attributes

• variant (:atom) - Defaults to :default. Must be one of :default, :border, :modern, or :pull.
• citation (:string) - Defaults to nil.
• class (:string) - Defaults to nil.

Slots

• inner_block (required)

Renders a colored callout block with an optional icon.

Variants map to semantic color schemes:

• :info — blue tones
• :warning — amber tones
• :tip — green tones
• :error — red tones
• :note — muted/neutral tones

Example

<.callout_block id="note-1" variant={:warning} icon="alert-triangle">
  This action cannot be undone.
</.callout_block>

Attributes

• id (:string) (required)
• variant (:atom) - Defaults to :info. Must be one of :info, :warning, :tip, :error, or :note.
• icon (:string) - Defaults to nil.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a collapsible disclosure section using native HTML <details>/<summary>.

The browser handles open/close without JavaScript.

Example

<.collapsible_section id="faq-1" summary="What is PhiaUI?" open={true}>
  PhiaUI is an Elixir component library for Phoenix LiveView.
</.collapsible_section>

Attributes

• id (:string) (required)
• summary (:string) - Defaults to "Details".
• open (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.

Slots

• inner_block (required)

Renders a CSS grid multi-column layout for side-by-side content blocks.

Use the :column slot (repeatable) to provide individual column content. The number of visual columns is controlled by the :columns attribute.

Example

<.columns_layout id="two-cols" columns={2}>
  <:column>Left content</:column>
  <:column>Right content</:column>
</.columns_layout>

Attributes

• id (:string) (required)
• columns (:integer) - Defaults to 2.
• gap (:string) - Defaults to "1rem".
• class (:string) - Defaults to nil.

Slots

• column

Renders a lightweight <details>/<summary> block for inline disclosures.

Similar to collapsible_section/1 but with a simpler, borderless style suitable for embedding within prose or editor content.

Example

<.details_block id="note-1" summary="Click to expand">
  Hidden content revealed on click.
</.details_block>

Attributes

• id (:string) (required)
• summary (:string) (required)
• open (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.

Slots

• inner_block (required)

Renders a decorative horizontal rule with variant visual styles.

Variants:

• :solid — standard solid line
• :dashed — dashed line
• :dotted — dotted line
• :ornament — centered diamond ornament
• :gradient — gradient line fading from edges
• :fade — line that fades from center to transparent

Example

<.horizontal_rule_styled variant={:gradient} />
<.horizontal_rule_styled variant={:ornament} />

Attributes

• variant (:atom) - Defaults to :solid. Must be one of :solid, :dashed, :dotted, :ornament, :gradient, or :fade.
• class (:string) - Defaults to nil.

Renders a visual page break indicator with a dashed line and centered label.

Intended for print-oriented documents. In @media print, this element triggers a CSS page break.

Example

<.page_break />

Attributes

• class (:string) - Defaults to nil.

Renders a section break/divider with different visual styles.

Variants:

• :line — solid thin rule
• :space — blank vertical space (no visible element)
• :ornament — centered decorative ornament (three dots)
• :dashed — dashed horizontal rule
• :dotted — dotted horizontal rule

Example

<.section_break variant={:ornament} />
<.section_break variant={:dashed} />

Attributes

• variant (:atom) - Defaults to :line. Must be one of :line, :space, :ornament, :dashed, or :dotted.
• class (:string) - Defaults to nil.

Renders a task list with interactive checkboxes.

Each item in the :items list should be a map with :text (string) and :checked (boolean) keys.

Example

<.task_list id="tasks" items={[
  %{text: "Write tests", checked: true},
  %{text: "Update docs", checked: false}
]} />

Attributes

• id (:string) (required)
• items (:list) - Defaults to [].
• class (:string) - Defaults to nil.