PyraUI – Phoenix LiveView Component System

PyraUI is a premium, production-ready component system for Phoenix LiveView. It combines meticulously crafted HEEx components, Tailwind-powered styling, and interactive LiveView demos so teams can ship polished UIs without reinventing basic patterns.

✨ Highlights

100+ LiveView-first components spanning form controls, data viz, overlays, navigation, and layout primitives
Zero JS build pipeline – most interactivity is delivered via LiveView assigns and hook helpers
World-class docs & playground – /docs/* pages showcase every component with multiple variants
Drop-in theming – consistent spacing, color tokens, and glassmorphism-inspired effects out of the box
Hex-ready – available from Hex with API docs on hexdocs.pm/pyraui

📦 Installation

Add PyraUI to your Phoenix project from Hex:

def deps do
  [
    {:pyraui, "~> 0.1.0"}
  ]
end

Fetch deps:

mix deps.get

Wire PyraUI helpers into your web layer (usually lib/my_app_web.ex):

defmodule MyAppWeb do
  use PyrauiWeb, :html

  # ...existing definitions
end

You now have every component available inside your HEEx templates:

<.button variant={:primary} size={:lg}>
  Launch Experience
</.button>

<.card class="max-w-md">
  <.badge variant={:solid} icon="sparkles">New</.badge>
  <h3 class="mt-4 text-xl font-semibold">Glass Panels</h3>
  <p class="mt-2 text-sm text-slate-500">
    Drag-resizable panels with frosted-glass surfaces and motion accents.
  </p>
</.card>

<.alert variant={:celebrate} badge="Ship it!" icon="party-popper">
  Your rollout finished with 0 regressions.
  <:actions>
    <.button variant={:ghost}>Share</.button>
  </:actions>
</.alert>

📚 Documentation & Playground

Resource	Description
Component Docs	hexdocs.pm/pyraui – API reference generated via ExDoc
Interactive Gallery	Run the demo (`mix phx.server`) and visit `http://localhost:4000/docs` to explore every component live
Guides & Recipes	Coming soon – will cover theming, component composition, and deployment best practices

Popular entry points in the playground:

/docs/alert – richly-styled toast & alert variations with gradients and actions
/docs/theme-switch – theme toggles with glass, gradient, and pill styles
/docs/table – dense, outlined, and elevated tables with badges & metrics
/docs/live-chat – real-time conversation UI with typing indicators & quick replies

🧩 Component Catalog (Snapshot)

Category	Components
Forms & Inputs	`button`, `input`, `textarea`, `select`, `checkbox`, `radio`, `toggle`, `slider`, `rating`, `tag_input`, `multi_select`, `password_strength_meter`, `date_picker`
Feedback & Overlays	`alert`, `toast`, `modal`, `drawer`, `tooltip` (soon), `progress`, `badge`, `badge_card`
Navigation & Layout	`navbar`, `tabs`, `accordion`, `breadcrumbs`, `drawer`, `dock`, `stepper`, `wizard`, `card`, `skeleton`, `grid`, `masonry_grid`, `resizable_panels`, `filter_panel`
Data Visualization	`chart` (line, bar, pie, stacked), `animated_chart`, `gauge`, `heatmap`, `map`, `timeline`, `countdown`
Collaboration & Social	`live_chat`, `live_feed`, `avatar`, `avatar_group`, `connections_widget`, `user_profile_card`
Productivity	`kanban`, `gantt`, `sortable_list`, `signature_pad`, `file_upload`, `live_data_table`

Every component ships with:

API (attr/slot) documentation
Multiple curated examples in the LiveView docs
Tailwind-based styling with extensible class overrides

⚡️ Quick Start (Demo App)

Clone the repo and explore the full playground locally:

git clone https://github.com/AbrhamWube/ashui.git pyraui
cd pyraui
mix deps.get
mix phx.server

Navigate to http://localhost:4000 for the landing page and http://localhost:4000/docs for the interactive component explorer. You can tweak assigns live and see the UI respond instantly thanks to LiveView streams.

🗺 Roadmap

Dark mode & tokenized theme support
Rich markdown guides published to HexDocs
Motion presets & micro-interaction utilities
Additional chart renderers (sparkline, radar, area)
CLI for scaffolding new components

Follow updates and contribute ideas via GitHub issues.

📄 License

PyraUI is released under the Apache 2.0 License.