Phoenix UI

Phoenix UI home page
  1. Getting Started
  2. Installation: Tailwind CLI

Select Filter

Navigation modals provide access to destinations in your app. Side sheets are surfaces containing supplementary content that are anchored to the left or right edge of the screen.

Navigation modals (or "sidebars") provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon.

Examples

Below you can view various implementations and example markup.

Basic

Temporary navigation modals can toggle open or closed. Closed by default, the modal opens temporarily above all other content until a section is selected.

Name Role Status Joined
Inara Mosley 		user Active 10 months ago
Agata Klein 		user Suspended 7 months ago
Stanley Mackenzie 		admin Active 10 months ago
Ruben Black 		admin Active 29 days ago
Lacey Murphy 		user Inactive 3 hrs ago

API

API documentation for the component. Learn about imports and available attributes.

Import

There are multiple ways to import components. 


    # PhoenixUI macro which imports all components
    use PhoenixUI
    # Or import component individually
    import PhoenixUI.Components.Alert

Attributes

Below is a list of attributes that can be applied to the component.

Name Type Default Description
HTML attribute any Supports all HTML attributes.
align :center | :inherit | :justify | :left | :right :inherit Set the text-align on the component.
color any framework-provided color :slate The text color to use.
element Any HTML Element :p HTML element to use.
extend_class string Adds additional classes.
margin bool true If true, the text will have margin.
phx-{any} binding Supports all Phoenix DOM element bindings.
variant :h1 | :h2 | :h3 | :h4 | :p :p The links to use.