Getting Started

Installation

PhoenixPaper ships as a plain hex package (a component library, not a full Phoenix app). Three steps, and every component on this site is available in yours.

1. Add the dependency

In your app's mix.exs:

defp deps do
  [
    {:phoenix_paper, "~> 0.1.0"}
  ]
end

2. Import the components

Next to your app's existing core_components import, in lib/my_app_web.ex:

defp html_helpers do
  quote do
    use PhoenixPaper.Components
    # ...
  end
end

3. Wire up the Tailwind theme

After the tailwindcss import, in assets/css/app.css:

@import "tailwindcss";
@import "../../deps/phoenix_paper/priv/static/phoenix_paper.css";
@source "../../deps/phoenix_paper/lib";

The @source line matters: without it Tailwind never scans PhoenixPaper's source files, and every class its components emit gets purged from the build.

The paperize contract

Every PhoenixPaper component takes a boolean paperize attribute, true by default.

paperize: true (default)

Renders with PhoenixPaper's Material Design classes: color, elevation, shape, typography. Your own class attribute still merges on top, last conflicting utility wins.

paperize: false

Drops every built-in class. Only your own class and any DOM structure needed for the component to function (like a checkbox's hidden input) survive: a clean slate to skin yourself.

Theming and dark mode

Every color is a Tailwind v4 theme token, namespaced pp- so it never collides with daisyUI's own primary/secondary/base-100 tokens in the same app.

Dark mode keys off the data-theme="dark" attribute (the same one daisyUI and Phoenix 1.8's generated app.css already use), so PhoenixPaper flips with your app's existing toggle. This site's own light/dark switch, in the top right corner, is exactly that toggle.
A second bundled palette (teal / amber) is opt-in via data-pp-theme="teal" on any ancestor element.
For a fully custom palette, don't fork the CSS file: override the --color-pp-* variables from your own stylesheet after importing phoenix_paper.css.

What's on the roadmap

This showcase covers nearly every component PhoenixPaper ships today. One classic Material building block isn't implemented yet:

Browse the components