# Pine UI 🌲
[](https://hex.pm/packages/pine_ui_phoenix)
[](https://hexdocs.pm/pine_ui_phoenix)
[](https://github.com/jamesnjovu/pine_ui_phoenix/blob/main/LICENSE)
**A Tailwind CSS + Alpine.js component library for Phoenix LiveView.** All 42
[Pines UI](https://devdojo.com/pines/docs/introduction) elements as 49 Phoenix function
components — modal, slide-over, dropdown menu, command palette, toast, table, date picker,
tabs, accordion, select, file upload and more. Accessible, dark-mode ready, and usable by AI
coding agents out of the box.
Pines is DevDojo's Alpine.js + Tailwind CSS component library, distributed as HTML you copy
and paste. This package turns it into real Phoenix components with declarative `attr`/`slot`
APIs, compile-time validation, dark mode, and the LiveView plumbing Alpine needs to survive
DOM patching.
```heex
<.card title="Getting started">
Every Pines element, as a Phoenix component.
<:footer>
<.button phx-click={JS.dispatch("pine:open", to: "#docs")}>Read the docs
<.slide_over id="docs" title="Documentation">…
```
## Installation
```elixir
def deps do
[{:pine_ui_phoenix, "~> 0.2.0"}]
end
```
Requires Elixir 1.15+ and `phoenix_live_view >= 0.20.4` — which covers 0.20.x, 1.0, 1.1
and 1.2.
**Three further steps are required.** Skipping them is the difference between working
components and components that render unstyled or flash their contents on load:
1. Point Tailwind at the package, or every class it uses is purged from your production
build.
```js
// Tailwind v3 — tailwind.config.js
content: [..., "../deps/pine_ui_phoenix/lib/**/*.ex"]
```
```css
/* Tailwind v4 — app.css */
@source "../../deps/pine_ui_phoenix/lib";
```
2. Import the stylesheet, which carries the `[x-cloak]` rule and the marquee keyframes.
```css
@import "../../deps/pine_ui_phoenix/priv/static/pine_ui.css";
```
3. Install Alpine and wire up `pineDom()`, so Alpine state survives LiveView patches.
```js
import { pineDom, PineHooks } from "../../deps/pine_ui_phoenix/priv/static/pine_ui.js"
const liveSocket = new LiveSocket("/live", Socket, {
params: { _csrf_token: csrfToken },
hooks: { ...PineHooks },
dom: pineDom()
})
```
Full details, including which Alpine plugins each component needs, are in the
[installation guide](https://github.com/jamesnjovu/pine_ui_phoenix/blob/main/guides/installation.md).
## Usage
```elixir
defp html_helpers do
quote do
use Phoenix.Component
use PineUiPhoenix
# ...
end
end
```
A stock Phoenix app already generates its own `<.button>`, `<.table>` and `<.modal>` in
`CoreComponents`, so resolve the clash however suits you:
```elixir
use PineUiPhoenix, except: [:button, :table, :modal]
use PineUiPhoenix, only: [:command, :marquee, :rating]
use PineUiPhoenix, prefix: :pine # <.pine_button>
```
## Components
All 42 Pines elements, across both the "Tailwind and Alpine" and "Tailwind Only" groups.
| | |
|---|---|
| **Layout** | `card` · `table` · `blockquote` |
| **Forms** | `button` · `text_input` · `textarea` · `checkbox` · `radio_group` · `select` · `select_menu` · `combobox` · `tags_input` · `switch` · `range_slider` · `rating` · `date_picker` · `copy_to_clipboard` |
| **Feedback** | `alert` · `badge` · `banner` · `progress` · `progress_circle` · `progress_steps` · `toast_group` · `toast_trigger` |
| **Navigation** | `accordion` · `tabs` · `breadcrumbs` · `pagination` · `navigation_menu` · `menubar` |
| **Overlays** | `modal` · `full_screen_modal` · `slide_over` · `dropdown_menu` · `context_menu` · `popover` · `hover_card` · `tooltip` · `command` |
| **Media** | `image_gallery` · `carousel` · `video` · `monaco_editor` |
| **Animation** | `marquee` · `retro_grid` · `typing_effect` · `text_animation` |
Fourteen of them need no JavaScript at all.
## What this port changes
It is a port, not a transcription. Where the copy-paste original made sense as HTML but not
as a component, it was rebuilt:
- **The calendar grid is computed in Elixir.** Pines builds it in Alpine; here `Date` handles
leap years and month lengths, and the days are real `