https://github.com/plausible/prima
Headless UI component library for Phoenix Liveview
https://github.com/plausible/prima
elixir liveview phoenix phoenix-liveview
Last synced: 4 months ago
JSON representation
Headless UI component library for Phoenix Liveview
- Host: GitHub
- URL: https://github.com/plausible/prima
- Owner: plausible
- License: mit
- Created: 2025-09-15T14:47:43.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2026-02-11T14:57:30.000Z (4 months ago)
- Last Synced: 2026-02-11T22:42:04.216Z (4 months ago)
- Topics: elixir, liveview, phoenix, phoenix-liveview
- Language: Elixir
- Homepage: https://prima-lingering-feather-539.fly.dev/
- Size: 1.62 MB
- Stars: 7
- Watchers: 0
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Prima
[](https://hex.pm/packages/prima)
> **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.
## Installation
Add `prima` to your list of dependencies in `mix.exs`:
```elixir
def deps do
[
{:prima, "~> 0.1.0"}
]
end
```
Include Prima's JavaScript hooks in your application:
```javascript
// assets/js/app.js
import { PrimaHooks } from "prima"
let liveSocket = new LiveSocket("/live", Socket, {
hooks: { ...PrimaHooks },
// ... other options
})
```
Use components in your templates:
```heex
Open Dropdown
Item 1
Item 2
```
## Development
This repository is structured with the library at the root and a demo application in the `demo/` directory.
### Library Development
```bash
# From root directory
mix deps.get # Get library dependencies
mix compile # Compile library
mix assets.build # Build library JavaScript bundle
mix hex.build # Build hex package
```
### Running the Demo Application
```bash
# From demo/ directory
cd demo
mix setup # Full setup (deps, assets setup, assets build)
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.
### Testing
```bash
# Library tests (from root)
mix test
# Demo/integration tests (from demo/)
cd demo
mix test # Run all tests (includes 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.