# PhoenixPaper
[](https://hex.pm/packages/phoenix_paper)
[](https://hexdocs.pm/phoenix_paper)
[](https://github.com/z7ealth/phoenix_paper/blob/master/LICENSE)
A Material Design component library for Phoenix, in the spirit of
[ember-paper](https://github.com/miguelcobain/ember-paper), styled with
Tailwind CSS. Most individual components follow the API and behavior of
[MUI](https://mui.com/material-ui/) (Material-UI for React), adapted to
Phoenix's server-rendered, stateless-function-component model.
See [`AGENTS.md`](AGENTS.md) for the framework's ground rules: the
`paperize` escape hatch every component supports, theming, elevation/spacing
helpers, and the icon strategy (reusing the heroicons every `mix phx.new`
app already vendors, no extra dependency).
## Try it live
No app, no asset pipeline needed:
```
elixir dev.exs
```
This boots a real Phoenix + LiveView server on with
a full catalog of every component: a navigation drawer on the left, and
for each component a live example, its options, and the HEEx snippet that
produced it.
## Installation
Add `phoenix_paper` to your `mix.exs` deps:
```elixir
def deps do
[
{:phoenix_paper, "~> 0.2.0"}
]
end
```
Then, in `lib/my_app_web.ex`, import the components next to your existing
`core_components`:
```elixir
defp html_helpers do
quote do
use PhoenixPaper.Components
# ...
end
end
```
And wire up the Tailwind theme in `assets/css/app.css`:
```css
@import "tailwindcss";
@import "../../deps/phoenix_paper/priv/static/phoenix_paper.css";
@source "../../deps/phoenix_paper/lib";
```
## Usage
```heex
<.pp_app_bar position="sticky">
<:leading><.pp_drawer_toggle for="app-drawer" />
My App
<.pp_drawer id="app-drawer">
<:header>My App
<.pp_list>
<.pp_list_subheader>Main
<.pp_list_item href="/" active={@current_path == "/"}>
<:leading><.pp_icon name="hero-home" />
Home
<.pp_divider />
<.pp_list_subheader>Account
<.pp_list_item href="/settings" active={@current_path == "/settings"}>
<:leading><.pp_icon name="hero-cog-6-tooth" />
Settings
<.pp_container max_width="lg">
<.pp_grid>
<.pp_grid_item span={12} md={4}>Sidebar
<.pp_grid_item span={12} md={8}>Content
<.pp_stack direction="row" spacing={:sm}>
<.pp_button>Save
<.pp_button variant="outlined">Cancel
<.pp_image_list cols={3}>
<.pp_image_list_item src="/images/1.jpg" title="Breakfast" />
<.pp_image_list_item src="/images/2.jpg" title="Burger" subtitle="Restaurant" />
<.pp_button color="primary">Save
<.pp_button color="primary" ripple={false}>No ripple
<.pp_button href={~p"/issues"} variant="text">Issues
<%!-- href/navigate/patch render an , so a "button" that navigates
never nests
