prima (adj., Latin)
First; primary. – Used in alchemical texts denoting the original, undifferentiated substance from which all things are formed and upon which the alchemical work is based.
Prima is a Phoenix LiveView component library providing unstyled, accessible UI components. It's designed as a reusable library that developers can integrate into Phoenix applications and style according to their needs.
Add prima to your list of dependencies in mix.exs:
def deps do [ {:prima, "~> 0.3.0"} ] end
Include Prima's JavaScript hooks in your application:
// assets/js/app.js import { PrimaHooks } from "prima" let liveSocket = new LiveSocket("/live", Socket, { hooks: { ...PrimaHooks }, // ... other options })
Use components in your templates:
<Prima.Dropdown.dropdown id="demo-dropdown"> <Prima.Dropdown.dropdown_trigger> Open Dropdown </Prima.Dropdown.dropdown_trigger> <Prima.Dropdown.dropdown_menu> <Prima.Dropdown.dropdown_item>Item 1</.dropdown_item> <Prima.Dropdown.dropdown_item>Item 2</.dropdown_item> </Prima.Dropdown.dropdown_menu> </Prima.Dropdown.dropdown>
This repository is structured with the library at the root and a demo application in the demo/ directory.
Install the versions pinned in .tool-versions with mise install or asdf install.
For asdf, add the plugins before installing the versions:
asdf plugin add erlang asdf plugin add elixir asdf plugin add nodejs asdf plugin add chromedriver https://github.com/mise-plugins/mise-chromedriver.git asdf install
Browser tests also need Google Chrome; the pinned ChromeDriver is selected automatically by mise or asdf. Keep Chrome and ChromeDriver on the same major, minor, and build version when updating either one.
# From root directory mise install # Or: asdf install mix setup # Install dependencies and build the library assets mix hex.build # Build hex package
# From demo/ directory cd demo mix setup # Install demo dependencies and build demo assets mix phx.server # Start development server
Visit http://localhost:4000 to see all components in action. The demo application automatically reloads when you make changes to library code.
# Full demo test suite (from root; delegates to demo/) mix test # Equivalent command from demo/ cd demo mix test # Run ExUnit and Wallaby tests
The test suite includes both unit tests and comprehensive browser-based integration tests using Wallaby to ensure all interactive behaviors work correctly.