Material Design, built for Phoenix.

A component library for Phoenix and Phoenix LiveView, in the spirit of ember-paper for Ember.js, styled entirely with Tailwind CSS, and shipped as a plain hex dependency your app already knows how to install.

Quick look

Every component, live

Click around below and try them.

Try it

Account
You have no pending invoices this month.
Tailwind-native theming
Colors are Tailwind v4 theme tokens, namespaced pp- so they never collide with daisyUI; this site ships both, side by side. Try the theme picker in the top right corner: color mode, primary accent, neutral tone, and font are all live.
CSS-only interactions
Checkboxes, radios, ratings, accordions, and the drawer's mobile toggle are all pure CSS: peer-checked: and has-[:checked]: tricks, no client JS shipped for them at all.
The paperize escape hatch
Every component accepts a paperize attribute. Turn it off and every built-in class disappears; only your own class renders, no fighting the library's CSS.
Idiomatic Phoenix forms
Form components accept a field from to_form/2 the same way this app's own core_components.ex inputs do: no new form abstraction to learn.

Ready to look around?

Buttons, forms, selection controls, navigation, and surfaces, all in one place.

View all components