PyraUI – Phoenix LiveView UI Library

A modular, reusable UI library for Phoenix LiveView applications, enabling developers to rapidly build interactive, responsive, and consistent interfaces.

Features

• ✅ LiveView-first: Components work natively in .heex templates
• ✅ Composable & Modular: Each component is independent and reusable
• ✅ Minimal JavaScript: Reactive behavior handled by Phoenix assigns
• ✅ Theme-ready: Light/dark mode support (coming soon)
• ✅ Developer-friendly: Semantic naming, minimal boilerplate

Installation

Add to your mix.exs:

def deps do
  [
    {:pyraui, path: "../pyraui"}  # or {:pyraui, git: "..."}
  ]
end

Then import in your PyrauiWeb module or use use PyrauiWeb, :html in your templates.

Components

Base Elements

• Button: Primary, secondary, ghost, danger, success variants with loading states
• Input: Text inputs with validation and helper text
• Textarea: Multi-line text inputs
• Select: Dropdown selects
• Checkbox: Checkbox inputs with labels
• Radio: Radio button inputs
• Label: Form labels

Layout Components

• Card: Content containers with padding and shadows

Feedback Components

• Alert: Info, success, warning, error notifications

Usage Examples

Button

<.button>Click me</.button>
<.button variant="primary" size="lg">Large Button</.button>
<.button disabled={true}>Disabled</.button>
<.button loading={true}>Loading...</.button>

Input

<.input type="text" label="Name" field={@form[:name]} />
<.input type="email" label="Email" field={@form[:email]} error="Invalid email" />

Alert

<.alert variant="success">Operation successful!</.alert>
<.alert variant="error">Something went wrong</.alert>
<.alert variant="info" dismissible={true}>Information message</.alert>

Card

<.card>
  <h2>Card Title</h2>
  <p>Card content</p>
</.card>

Development

This project also serves as a playground/demo application:

1. Clone the repository
2. Install dependencies: mix deps.get
3. Start the server: mix phx.server
4. Visit http://localhost:4000 to see the component playground

Roadmap

• More layout components (Grid, Stack, Spacer)
• Modal/Dialog component
• Tooltip component
• Progress bars and spinners
• Navigation components (Tabs, Accordion, Dropdown)
• Data display components (Table, List, Badge, Avatar)
• Dark mode theme support
• JavaScript hooks for advanced interactions

License

MIT