A comprehensive library of interactive UI components for Phoenix applications built with AlpineJS and TailwindCSS.
Add Pine UI to your mix.exs:
def deps do
[
{:pine_ui_phoenix, "~> 0.1.1"}
]
endAfter running mix deps.get, make sure your project includes:
- TailwindCSS - For component styling
- AlpineJS - For component interactivity
Pine UI provides a collection of Phoenix Components that can be used in your HEEx templates. Each component is designed to be customizable and works well with Phoenix LiveView.
<div class="p-8 space-y-4">
<PineUiPhoenix.text_animation_blow text="Welcome to Pine UI" />
<PineUiPhoenix.card title="Getting Started">
<p>Pine UI makes it easy to build interactive Phoenix applications.</p>
<div class="mt-4 flex space-x-2">
<PineUiPhoenix.button_primary>
Get Started
</PineUiPhoenix.button_primary>
<PineUiPhoenix.button_secondary>
Documentation
</PineUiPhoenix.button_secondary>
</div>
</PineUiPhoenix.card>
<PineUiPhoenix.typing_effect
text_list={Poison.encode!(["Easy to use", "Highly customizable", "Interactive components"])}
class="flex justify-center"
text_class="text-xl font-medium text-indigo-600"
/>
</div>-
typing_effect/1- Creates a typing animation with multiple text items -
text_animation_blow/1- Letter-by-letter animation that scales in -
text_animation_fade/1- Letter-by-letter fade-in animation
-
tooltip/1- Interactive tooltip with different positions (top, left, right) -
button_primary/1- Primary action button with loading state -
button_secondary/1- Secondary action button with loading state -
button_danger/1- Danger action button with loading state
-
card/1- Basic card component for content organization -
card_interactive/1- Interactive card with hover effects -
card_collapsible/1- Collapsible card for expandable content
-
text_input/1- Basic text input component -
text_input_with_icon/1- Text input with icon -
textarea/1- Multiline text input component -
select/1- Basic select dropdown component -
select_grouped/1- Select dropdown with option groups -
select_searchable/1- Searchable select dropdown with filtering
-
badge/1- Simple badge component with various colors -
badge_dot/1- Badge with dot indicator -
badge_dismissible/1- Badge that can be dismissed/removed
<PineUiPhoenix.typing_effect
text_list={Poison.encode!(["First message", "Second message"])}
class="flex justify-center py-8"
text_class="text-2xl font-black text-blue-600"
/>
<PineUiPhoenix.text_animation_blow text="Scale In Animation" />
<PineUiPhoenix.text_animation_fade text="Fade In Animation" /><PineUiPhoenix.button_primary phx_click="save">
Save Changes
</PineUiPhoenix.button_primary>
<PineUiPhoenix.button_secondary loading={@loading}>
Loading Example
</PineUiPhoenix.button_secondary>
<PineUiPhoenix.button_danger phx_click="delete" phx_value_id={@item.id}>
Delete
</PineUiPhoenix.button_danger><PineUiPhoenix.card title="Basic Card" subtitle="Card description">
<p>Content goes here</p>
</PineUiPhoenix.card>
<PineUiPhoenix.card_interactive title="Interactive Card">
<p>This card has hover effects</p>
</PineUiPhoenix.card_interactive>
<PineUiPhoenix.card_collapsible title="Collapsible Card" open={true}>
<p>This content can be collapsed</p>
</PineUiPhoenix.card_collapsible><PineUiPhoenix.text_input
id="email"
label="Email Address"
type="email"
placeholder="you@example.com"
/>
<PineUiPhoenix.text_input_with_icon
id="search"
placeholder="Search..."
icon={~H"<svg class='h-5 w-5 text-gray-400' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'><path fill-rule='evenodd' d='M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z' clip-rule='evenodd'/></svg>"}
/>
<PineUiPhoenix.textarea
id="description"
label="Description"
rows={6}
placeholder="Enter details..."
/><PineUiPhoenix.select
id="country"
label="Country"
options={[{"us", "United States"}, {"ca", "Canada"}, {"mx", "Mexico"}]}
selected="us"
/>
<PineUiPhoenix.select_grouped
id="continent"
label="Country"
option_groups={[
{"North America", [{"us", "United States"}, {"ca", "Canada"}]},
{"Europe", [{"fr", "France"}, {"de", "Germany"}]}
]}
/>
<PineUiPhoenix.select_searchable
id="country"
label="Country"
options={[{"us", "United States"}, {"ca", "Canada"}, {"mx", "Mexico"}]}
placeholder="Search countries..."
/><PineUiPhoenix.badge variant="success">
Completed
</PineUiPhoenix.badge>
<PineUiPhoenix.badge_dot variant="warning">
Pending
</PineUiPhoenix.badge_dot>
<PineUiPhoenix.badge_dismissible variant="info">
New Feature
</PineUiPhoenix.badge_dismissible>Future components and enhancements:
- Alert component variants
- Avatar with status indicators
- Toggle/switch component
- Tabs component
- Dropdown menu
- Table component with sorting and pagination
- Accordion component
- Progress bar
- Modal dialog
- Date picker
This project is licensed under the MIT License - see the LICENSE file for details.
