Modules
PhoenixPaper — a Material Design component library for Phoenix, in the spirit of ember-paper, built on Tailwind CSS.
A collapsible panel (pp_accordion/1), in the spirit of MUI's
Accordion — composed with PhoenixPaper.AccordionSummary (the
clickable header), PhoenixPaper.AccordionDetails (the collapsible
content), and optionally PhoenixPaper.AccordionActions (a button row
shown only while expanded)
An optional row of right-aligned buttons at the end of an expanded
PhoenixPaper.Accordion (pp_accordion_actions/1) — shown only while
expanded, the same as PhoenixPaper.AccordionDetails. See
PhoenixPaper.Accordion's moduledoc for a full example.
The collapsible content of a PhoenixPaper.Accordion
(pp_accordion_details/1) — hidden until the accordion's checkbox/radio
is checked, via peer-checked:. See PhoenixPaper.Accordion's moduledoc
for a full example.
The clickable header of a PhoenixPaper.Accordion (pp_accordion_summary/1)
— a <label> pointing at the accordion's hidden checkbox/radio, with a
trailing expand icon that rotates via peer-checked:. See
PhoenixPaper.Accordion's moduledoc for a full example.
A Material-flavored alert banner (pp_alert/1) — a colored, icon-led
message for status feedback, in the spirit of MUI's Alert.
A Material Design app bar (pp_app_bar/1), in the spirit of MUI's
AppBar — a horizontal header bar with a leading slot (e.g.
PhoenixPaper.Drawer.pp_drawer_toggle/1 on mobile), a title (the default
slot), and trailing actions.
A Material Design autocomplete — a text field with a filtered dropdown of options.
A user's profile picture, initials, or icon (pp_avatar/1), in the
spirit of MUI's Avatar.
A full-screen dimming overlay (pp_backdrop/1), in the spirit of MUI's
Backdrop — most often used behind a full-page loading spinner, or as the
piece PhoenixPaper.Dialog composes for its own overlay.
A small count/status indicator overlapping the corner of its child
(pp_badge/1), in the spirit of MUI's Badge.
A Material Design breadcrumb trail (pp_breadcrumbs/1), in the spirit of
MUI's Breadcrumbs — a horizontal list of :items with a separator
automatically inserted between them.
A Material Design button (pp_button/1).
A Material Design button group (pp_button_group/1) — visually joins a
row of PhoenixPaper.Buttons (or PhoenixPaper.ToggleButtons) into one
segmented control by rounding only the group's outer corners and
collapsing the shared borders.
A Material Design card (pp_card/1): PhoenixPaper.Paper (the surface)
plus padding and optional title/actions slots.
A Material Design checkbox (pp_checkbox/1).
A compact element for input, attribute, or action (pp_chip/1), in the
spirit of MUI's Chip.
use PhoenixPaper.Components imports every PhoenixPaper component
(pp_button/1, pp_card/1, pp_icon/1, pp_checkbox/1, ...) at once.
A centered, width-constrained content wrapper (pp_container/1), in the
spirit of MUI's
Container.
A Material-styled modal dialog (pp_dialog/1), in the spirit of MUI's
Dialog — but built the same way Phoenix's own mix phx.new-generated
core_components.ex builds its modal/1: always present in the DOM,
shown/hidden via Phoenix.LiveView.JS commands and CSS transitions, not a
server-tracked open assign that re-renders the whole tree. If you've used
that generated modal before, this is the same mechanism with Material
chrome (PhoenixPaper.Paper for the surface, elevation, rounded corners)
and :title/:actions slots instead of one opaque body.
A thin separator line (pp_divider/1) — most often used between sections
of a PhoenixPaper.List.
A Material Design navigation drawer (pp_drawer/1) — a vertical panel,
persistent on large screens (lg: and up, pinned via sticky so it stays
in place as the page scrolls, with its own internal scroll if its content
is taller than the viewport) and toggled by a mobile drawer below that
breakpoint. Compose it with PhoenixPaper.List / PhoenixPaper.ListItem
for its contents.
Material Design elevation (dp 0-24) as Tailwind utility classes.
A Material Design Floating Action Button (pp_fab/1) — a circular,
elevated, icon-only button, or (with extended) a pill with a label.
Typically anchored to a screen corner by the caller (e.g. class="fixed bottom-6 right-6").
A 12-column CSS grid container (pp_grid/1), in the spirit of MUI's
Grid container. Pair with
PhoenixPaper.GridItem for each column-spanning child
A column-spanning child (pp_grid_item/1) of PhoenixPaper.Grid, in the
spirit of MUI's Grid item.
Shared helpers used by every PhoenixPaper component to implement the
paperize contract (see AGENTS.md).
A thin wrapper around the heroicon classes that mix phx.new already
vendors into every Phoenix 1.7+ app (assets/vendor/heroicons + the
Tailwind heroicons plugin generated by the installer).
A grid gallery of images (pp_image_list/1), in the spirit of MUI's
ImageList (the
standard variant — masonry/quilted/woven layouts aren't implemented).
Pair with PhoenixPaper.ImageListItem
A single tile (pp_image_list_item/1) inside PhoenixPaper.ImageList, in
the spirit of MUI's ImageListItem + ImageListItemBar combined — an
image with an optional title/subtitle overlay bar along the bottom edge.
A Material Design text field (pp_input/1) with a floating label — pure
CSS, no JavaScript. Three variants: outlined (bordered box), filled
(filled background with an underline accent), and standard (underline
only, no box/background — and no shape, since there's nothing to round).
A Material Design list container (pp_list/1) — a vertical stack of
PhoenixPaper.ListItems (and optionally PhoenixPaper.ListSubheader/
PhoenixPaper.Divider).
A Material Design list item (pp_list_item/1) — for inside
PhoenixPaper.List, but also usable on its own (e.g. inside a
PhoenixPaper.Card).
A small section label (pp_list_subheader/1) for grouping items inside a
PhoenixPaper.List (e.g. "Main", "Account").
A Material Design number field (pp_number_field/1) — a numeric input
with increment/decrement stepper buttons.
The base Material surface (pp_paper/1) — a background, an elevation
shadow, and rounded corners. No padding, no title/actions slots; it's the
primitive PhoenixPaper.Card is built on top of, for anything that just
needs a raised surface to sit on.
A Material progress indicator (pp_progress/1) — variant="linear"
(MUI's LinearProgress) or variant="circular" (MUI's
CircularProgress), combined into one component since they share the
same value/color contract.
A Material Design radio group (pp_radio_group/1) — a labeled set of
mutually exclusive radio buttons sharing one name.
A Material Design star rating (pp_rating/1). Interactive by default (a
row of radio inputs with a pure-CSS hover/checked fill effect, no JS);
pass readonly to render a fixed display of value filled stars instead.
The Material Design ripple effect — a circle that expands from the click/tap position and fades out.
A Material Design select field (pp_select/1) — a native <select>
styled to match PhoenixPaper.Input's outlined/filled variants.
Material's corner-radius scale as Tailwind classes, so components share
one consistent set of tokens instead of hand-picking rounded-* per
component. As with PhoenixPaper.Elevation/PhoenixPaper.Spacing, every
class is a full literal string (never interpolated) so Tailwind's static
scanner can find it in this file.
A placeholder loading shape (pp_skeleton/1), in the spirit of MUI's
Skeleton — a text line, a circular avatar outline, or a rectangular
block, with a pulsing or shimmering animation while real content loads.
A Material Design slider (pp_slider/1) — a native <input type="range">, in the spirit of MUI's Slider.
A brief toast notification (pp_snackbar/1), in the spirit of MUI's
Snackbar.
Named spacing tokens on top of Tailwind's default scale (which is already a 4px/0.25rem grid, compatible with Material's 8dp baseline grid).
A one-dimensional flex layout (pp_stack/1), in the spirit of MUI's
Stack — arranges children in
a row or column with consistent spacing between them.
A Material Design switch (pp_switch/1) — an on/off toggle, structured
like PhoenixPaper.Checkbox but rendered as a sliding track/thumb.
A single clickable tab (pp_tab/1) inside a PhoenixPaper.Tabs tablist,
paired with a PhoenixPaper.TabPanel sharing the same id/value. See
PhoenixPaper.Tabs's moduledoc for the full composition example and for
why switching is JS-command-driven rather than the CSS-only
peer-checked: trick PhoenixPaper.Accordion uses.
The content shown for one PhoenixPaper.Tab (pp_tab_panel/1) — hidden
until its matching tab is selected. See PhoenixPaper.Tabs's moduledoc
for the full composition example and why switching needs real
per-element JS targeting rather than a CSS-only trick.
A Material Design table (pp_table/1) — renders a <table>, composed
with PhoenixPaper.TableHead/PhoenixPaper.TableBody/
PhoenixPaper.TableRow/PhoenixPaper.TableCell (and optionally
PhoenixPaper.TableFooter, PhoenixPaper.TableContainer)
The body section of a PhoenixPaper.Table (pp_table_body/1) — renders a
<tbody> of PhoenixPaper.TableRows. See PhoenixPaper.Table's moduledoc
for a full example.
A cell inside a PhoenixPaper.TableRow (pp_table_cell/1) — renders a
<th> when variant="head", a <td> otherwise. See
PhoenixPaper.Table's moduledoc for a full example.
A horizontally-scrolling wrapper for PhoenixPaper.Table (pp_table_container/1)
— composes PhoenixPaper.Paper for the surface (background, elevation,
rounded corners), the same pairing MUI's own docs show
(<TableContainer component={Paper}>).
An optional footer section of a PhoenixPaper.Table (pp_table_footer/1)
— renders a <tfoot> of PhoenixPaper.TableRows, typically for totals or
summary values. See PhoenixPaper.Table's moduledoc for a full example.
The header section of a PhoenixPaper.Table (pp_table_head/1) — renders
a <thead> containing PhoenixPaper.TableRows of variant="head"
PhoenixPaper.TableCells. See PhoenixPaper.Table's moduledoc for a full
example.
A row inside PhoenixPaper.TableHead/PhoenixPaper.TableBody/
PhoenixPaper.TableFooter (pp_table_row/1) — renders a <tr> with a
hover highlight. See PhoenixPaper.Table's moduledoc for a full example.
A tablist container (pp_tabs/1), in the spirit of MUI's Tabs —
composed with PhoenixPaper.Tab (a clickable tab) and
PhoenixPaper.TabPanel (its content, usually written after the whole
pp_tabs/1 block, not nested inside it, same as MUI)
Tailwind class utilities like class merging.
A light/dark mode toggle (pp_theme_toggle/1) with a sun/moon icon in
its thumb, wired to flip data-theme="dark" on <html> (the same
attribute daisyUI and Phoenix 1.8's generated app.css already use —
see AGENTS.md, "Theming"), so it plugs straight into a dark-mode toggle
that may already exist elsewhere on the page.
A Material Design toggle button (pp_toggle_button/1) — a button with a
boolean pressed state, filled when pressed. Combine several inside a
PhoenixPaper.ButtonGroup for a segmented toggle control (e.g. text
alignment, view mode).
A short text label shown on hover/focus (pp_tooltip/1), in the spirit
of MUI's Tooltip.
A Material Design transfer list — two list boxes with buttons to move checked items between them.
Material's type scale (pp_typography/1) — variant picks both the
rendered tag and the text classes, in the spirit of MUI's
Typography.