HyperUI

A comprehensive, production-grade Phoenix LiveView component library based on HyperUI Tailwind CSS components.

HyperUI provides a set of highly customizable, accessible, and responsive components designed to accelerate your Phoenix LiveView development. It includes everything from core application primitives to full marketing blocks and e-commerce elements.

Installation

The package can be installed by adding hyper_ui to your list of dependencies in mix.exs:

def deps do
  [
    {:hyper_ui, "~> 0.2.0"}
  ]
end

Configuration

Tailwind CSS v4

Tailwind CSS v4 uses a CSS-first configuration. You must add the library's source files directly in your assets/css/app.css (or wherever your main CSS entry point is) using the @source directive:

@import "tailwindcss";

/* Point to the dependency directory relative to your CSS file */
@source "../../../deps/hyper_ui/**/*.*ex";

Usage

You can use the components by importing HyperUI into your Web module or directly in your CoreComponents.

defmodule MyAppWeb.CoreComponents do
  use Phoenix.Component
  
  # Import all HyperUI components
  use HyperUI
end

Then, you can use the components in your HEEx templates:

<.button color="blue" variant="solid">Submit</.button>

<.badge color="green">Active</.badge>

<.alert kind="info" title="Information">
  Your settings have been updated successfully.
</.alert>

Available Components

The library is organized into the following modules, all of which are imported when you use HyperUI:

• HyperUI.Components.ApplicationUI: Core primitives (Buttons, Badges, Alerts, Tables, Modals, etc.)
• HyperUI.Components.ApplicationUI.Forms: Form elements (Inputs, Toggles, etc.)
• HyperUI.Components.Marketing: Page blocks (Heroes, FAQs, Footers, Navbars, Pricing, etc.)
• HyperUI.Components.Ecommerce: E-commerce elements (Product Cards, Carts, etc.)
• HyperUI.Components.Neobrutalism: Components with a Neobrutalist design aesthetic (prefixed with neo_, e.g., <.neo_button>).

Interactive Documentation (Storybook)

HyperUI includes a Phoenix Storybook configuration to explore and interact with components in your development environment.

To run the storybook directly from the library during development:

1. Enter the storybook directory:

   cd storybook

2. Install dependencies and setup assets:

   mix setup

3. Start the Phoenix server:

   mix phx.server

Then visit http://localhost:4000/storybook.

Development

If you're contributing to HyperUI, you can run tests for the main library from the root directory:

mix test

For detailed API documentation, visit HexDocs.