Packages
Tailwind CSS and Alpine.js UI components for Phoenix LiveView. All 42 Pines elements: modal, dropdown, command palette, toast, table, date picker, tabs. Accessible, dark mode, AI-agent ready.
Current section
Files
Jump to
Current section
Files
pine_ui_phoenix
CHANGELOG.md
CHANGELOG.md
# Changelog
All notable changes to Pine UI will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [Unreleased]
### Added
- Full [Pines](https://devdojo.com/pines/docs) component parity (42 elements).
- Shipped assets: `priv/static/pine_ui.js` (LiveView hooks + Alpine state preservation across
DOM patches) and `priv/static/pine_ui.css` (`[x-cloak]` rule, marquee/retro-grid keyframes).
- Declarative `attr`/`slot` APIs on every component, with `:global` passthrough for `x-`,
`phx-`, `aria-` and `data-` attributes.
- `use PineUiPhoenix` to import the whole set, with `only:`, `except:` and `prefix:` options.
- Dark mode (`dark:`) variants throughout.
- A demo application under `dev/`, runnable with `mix dev`.
- A real test suite.
### Fixed
- **Security:** Alpine `x-data` is now built by JSON-encoding a map rather than by string
interpolation. This applies to the deprecated v0.1.x names too — they are now thin
adapters onto the new components rather than a separate, unfixed implementation. The previous `x-data={"{ tooltipText: '#{...}' }"}` form broke on apostrophes
and allowed expression injection through interpolated values.
- `DataTable.basic/1` rendered an empty `<div>` and `DataTable.expandable/1` rendered the
literal string `...`. Both are now real implementations.
- `progress_bar/1` was defined twice; the second definition was unreachable.
- ARIA attributes were emitted as literal strings (`aria-expanded="x-bind:aria-expanded='open'"`)
instead of Alpine bindings.
- Accordion panels hardcoded `id="accordion-content"`, colliding whenever two appeared on a page.
- `Jason`/`Poison` were called at render time despite being optional dependencies.
- `Phoenix.HTML` was imported without being declared as a dependency.
### Changed
- **Elixir 1.15 is now the minimum** (was 1.14). The library's own code compiles on 1.14,
but its dependency closure no longer does — `plug` 1.20 and `floki` both require
`~> 1.15` — so 1.14 could not be tested and was not a claim worth making.
- **`phoenix_live_view` is now a required dependency at `>= 0.20.4`** (was `>= 0.18.0`,
optional). The library cannot compile without `Phoenix.Component`.
- Components adopt Pines' neutral palette in place of the previous indigo accent.
- Variants moved from function suffixes to attributes: `<.button variant="danger">` replaces
`button_danger/1`. All previous names remain available and are deprecated.
- `:poison` is no longer a dependency; `:jason` is required.
### Changed (continued)
- The file uploader is rebuilt on LiveView's own `allow_upload/3` as
`PineUiPhoenix.Extras.FileUpload`. v0.1.x reimplemented progress and previews in Alpine
with `FileReader`, which never actually uploaded anything to the server. Pass
`upload={@uploads.avatar}` for the LiveView mode, or nothing for a plain file input.
- `select/1` options: the new `<.select>` takes `{label, value}` tuples, matching
`options_for_select/2`. v0.1.x took `{value, label}`. The deprecated `select/1` wrapper
swaps them for you, so existing calls are unaffected.
### Deprecated
- The 53 `PineUiPhoenix.*` facade functions from v0.1.x, and the old sub-module entry points.
They continue to work. See the **Upgrading to v0.2** guide.
### Removed
- `PineUiPhoenix.Application` (an empty supervisor) and `PineUiPhoenix.Types` (unused aliases
of `Phoenix.LiveView.Socket.assigns()`).
- The 18 internal v0.1.x component modules (~7,500 lines). They were a second implementation
carrying all the defects listed above. The deprecated public names now render through the
new components instead, so the fixes reach them. `PineUiPhoenix.Badge`,
`PineUiPhoenix.Button` and their siblings are gone; the public `PineUiPhoenix.badge/1`
style functions remain.
## [0.1.3] - 2025-05-07
### Added
- New components:
- Accordion components: `accordion_item`, `accordion_group`
- Tabs components: `tabs`, `tabs_pills`, `tabs_boxed`
- Modal components: `modal`, `modal_full_screen`, `modal_side`
- Switch components: `switch`, `switch_labeled`, `switch_card`
- Dropdown components: `dropdown`, `dropdown_with_icons`, `context_menu`
- Progress components: `progress_bar`, `progress_circle`, `progress_steps`
- Pagination components: `pagination`, `pagination_simple`, `pagination_load_more`
- Toast components: `toast_container`, `toast`, `toast_trigger`
- File upload components: `file_uploader`, `image_uploader`, `multi_file_uploader`
- Image gallery components: `image_gallery`, `image_gallery_masonry`, `image_carousel`
- Data table components: `data_table`, `data_table_expandable`
- Date picker components: `date_picker`, `date_range_picker`
- Improved documentation and component grouping in ExDoc
## [0.1.0] - 2023-03-29
### Added
- Initial release with the following components:
- Text components: typing_effect, text_animation_blow, text_animation_fade
- Tooltip component with top, left, and right variants
- Button components: primary, secondary, danger with loading states
- Badge components: basic, dot, dismissible
- Card components: basic, interactive, collapsible
- Select components: basic, grouped, searchable
- TextInput components: basic, with_icon, textarea
- Documentation and examples
- Comprehensive test suite