# \#ui-components

**URL:** https://forum.elixirforum.com/tag/ui-components/3081.md

[Latest](https://forum.elixirforum.com/latest.md) · [Categories](https://forum.elixirforum.com/categories.md) · [Tags](https://forum.elixirforum.com/tags.md)

---

## [Shach UI - Heex / Html / CSS with no javascript](https://forum.elixirforum.com/t/shach-ui-heex-html-css-with-no-javascript/76579)

<div class="topic-metadata">

**Author:** [@pcharbon](https://forum.elixirforum.com/u/pcharbon)\
**Replies:** 0\
**Last updated:** [September 5, 2026, 7:45pm UTC](https://forum.elixirforum.com/t/shach-ui-heex-html-css-with-no-javascript/76579 "2026-09-05T19:45:10Z")

</div>

ShadcnUI is a transport-neutral library of Phoenix function components built with semantic HEEX, native HTML behavior, and package-owned shadcn-style CSS. It provides 41 components without installing routes, controllers,…

---

## [Flop.Phoenix - UI components for pagination, filter forms and sortable tables](https://forum.elixirforum.com/t/flop-phoenix-ui-components-for-pagination-filter-forms-and-sortable-tables/51751)

<div class="topic-metadata">

**Author:** [@woylie](https://forum.elixirforum.com/u/woylie)\
**Replies:** 13\
**Last updated:** [August 10, 2026, 6:50pm UTC](https://forum.elixirforum.com/t/flop-phoenix-ui-components-for-pagination-filter-forms-and-sortable-tables/51751 "2026-08-10T18:50:04Z")

</div>

Phoenix components for pagination, sortable tables and filter forms with Flop and (optionally) Ecto. pagination cursor pagination sortable tables filter forms https://github.com/woylie/flop\_phoenix

---

## [Essence UI - Accessible, headless UI component library for Phoenix LiveView](https://forum.elixirforum.com/t/essence-ui-accessible-headless-ui-component-library-for-phoenix-liveview/76171)

<div class="topic-metadata">

**Author:** [@ilyabayel](https://forum.elixirforum.com/u/ilyabayel)\
**Replies:** 2\
**Last updated:** [July 30, 2026, 6:44am UTC](https://forum.elixirforum.com/t/essence-ui-accessible-headless-ui-component-library-for-phoenix-liveview/76171 "2026-07-30T06:44:13Z")

</div>

Hi everyone! I’d like to introduce Essence UI, a component library for Phoenix LiveView heavily inspired by Radix UI and built around a simple idea: Your component library should handle accessibility, behavior, and lay…

---

## [PUI - Phoenix LiveView UI component toolkit](https://forum.elixirforum.com/t/pui-phoenix-liveview-ui-component-toolkit/74891)

<div class="topic-metadata">

**Author:** [@sucipto](https://forum.elixirforum.com/u/sucipto)\
**Replies:** 1\
**Last updated:** [April 5, 2026, 12:54pm UTC](https://forum.elixirforum.com/t/pui-phoenix-liveview-ui-component-toolkit/74891 "2026-04-05T12:54:03Z")

</div>

Hi everyone! I’ve been working on a UI component library for Phoenix LiveView called PUI, and just published the first alpha. Sharing it here to get some early feedback from the community! How it started It began as a…

---

## [LiveCapture - zero-boilerplate storybook for LiveView components by Waffle creator](https://forum.elixirforum.com/t/livecapture-zero-boilerplate-storybook-for-liveview-components-by-waffle-creator/74028)

<div class="topic-metadata">

**Author:** [@achempion](https://forum.elixirforum.com/u/achempion)\
**Replies:** 12\
**Last updated:** [February 24, 2026, 2:12pm UTC](https://forum.elixirforum.com/t/livecapture-zero-boilerplate-storybook-for-liveview-components-by-waffle-creator/74028 "2026-02-24T14:12:55Z")

</div>

Hey, Elixir Forum. I’m excited to introduce LiveCapture, a storybook-like library for Phoenix LiveView components. I like having stories for my components, but I’ve always felt some friction when creating and maintainin…

---

## [Custom components behave differently from core components](https://forum.elixirforum.com/t/custom-components-behave-differently-from-core-components/73624)

<div class="topic-metadata">

**Author:** [@DestroyedSoul](https://forum.elixirforum.com/u/DestroyedSoul)\
**Replies:** 3\
**Last updated:** [December 12, 2025, 10:57am UTC](https://forum.elixirforum.com/t/custom-components-behave-differently-from-core-components/73624 "2025-12-12T10:57:33Z")

</div>

Hello, In my project I need custom core components, i.e. input fields etc that are styled a bit differently. I know I can provide class for the core input component, but then it only affects the text field itself not it…

---

## [Moon LiveView - component library](https://forum.elixirforum.com/t/moon-liveview-component-library/73186)

<div class="topic-metadata">

**Author:** [@Antrater](https://forum.elixirforum.com/u/Antrater)\
**Replies:** 2\
**Last updated:** [November 6, 2025, 10:50am UTC](https://forum.elixirforum.com/t/moon-liveview-component-library/73186 "2025-11-06T10:50:53Z")

</div>

Hi there! At Moon Design System, we have been working hard for the past six months on the next generation of our LiveView component library. Now it’s in a stable, ready-to-use state. Why is this library a good candidate…

---

## [Does anyone use Temple instead of Heex in their Live View projects?](https://forum.elixirforum.com/t/does-anyone-use-temple-instead-of-heex-in-their-live-view-projects/63171)

<div class="topic-metadata">

**Author:** [@KP123](https://forum.elixirforum.com/u/KP123)\
**Replies:** 15\
**Last updated:** [April 9, 2025, 5:30am UTC](https://forum.elixirforum.com/t/does-anyone-use-temple-instead-of-heex-in-their-live-view-projects/63171 "2025-04-09T05:30:41Z")

</div>

Question is pretty self explanatory. Temple is a view template library that feels like a more natural way to build markup in Elixir

---

## [Podcast: Thinking Elixir 227 - Oban Web Goes Open Source?](https://forum.elixirforum.com/t/podcast-thinking-elixir-227-oban-web-goes-open-source/67260)

<div class="topic-metadata">

**Author:** [@brainlid](https://forum.elixirforum.com/u/brainlid)\
**Replies:** 0\
**Last updated:** [November 5, 2024, 1:17pm UTC](https://forum.elixirforum.com/t/podcast-thinking-elixir-227-oban-web-goes-open-source/67260 "2024-11-05T13:17:32Z")

</div>

Episode 227 of Thinking Elixir. News includes Oban Web going open source, making it more accessible for startups, a new community resource featuring over 80 Phoenix LiveView components, interesting insights from a fronte…

---

## [Adobe Spectrum 2 web components with LiveView](https://forum.elixirforum.com/t/adobe-spectrum-2-web-components-with-liveview/60395)

<div class="topic-metadata">

**Author:** [@adw632](https://forum.elixirforum.com/u/adw632)\
**Replies:** 49\
**Last updated:** [September 24, 2024, 1:47am UTC](https://forum.elixirforum.com/t/adobe-spectrum-2-web-components-with-liveview/60395 "2024-09-24T01:47:44Z")

</div>

I was just looking at the new Adobe Spectrum 2 web components which were released a couple of days ago with an article also on Tech Crunch. I have had an initial look and I doubt one will find a more tested and document…

---

## [headless - Headless (unstyled) UI components for Phoenix (with Alpine)](https://forum.elixirforum.com/t/headless-headless-unstyled-ui-components-for-phoenix-with-alpine/63350)

<div class="topic-metadata">

**Author:** [@teamon](https://forum.elixirforum.com/u/teamon)\
**Replies:** 5\
**Last updated:** [May 27, 2024, 12:08pm UTC](https://forum.elixirforum.com/t/headless-headless-unstyled-ui-components-for-phoenix-with-alpine/63350 "2024-05-27T12:08:25Z")

</div>

After spending some time recently researching various ways of building modern UIs I came to one sad conclusion: if one wants to build a modern interactive application in Phoenix (+ LiveView) there are not many choices of…

---

## [Sprout UI - unstyled and accessible components for Phoenix Framework](https://forum.elixirforum.com/t/sprout-ui-unstyled-and-accessible-components-for-phoenix-framework/52360)

<div class="topic-metadata">

**Author:** [@TunkShif](https://forum.elixirforum.com/u/TunkShif)\
**Replies:** 1\
**Last updated:** [May 9, 2024, 7:02am UTC](https://forum.elixirforum.com/t/sprout-ui-unstyled-and-accessible-components-for-phoenix-framework/52360 "2024-05-09T07:02:14Z")

</div>

Sprout UI provides a collection of common UI components. All of these components are completely unstyled, and they are built following the WAI-ARIA guide to be accessible. Currently, it is not ready for a stable releas…

---

## [Modified back component in core\_components.ex](https://forum.elixirforum.com/t/modified-back-component-in-core-components-ex/60340)

<div class="topic-metadata">

**Author:** [@7rans](https://forum.elixirforum.com/u/7rans)\
**Replies:** 0\
**Last updated:** [December 13, 2023, 3:43pm UTC](https://forum.elixirforum.com/t/modified-back-component-in-core-components-ex/60340 "2023-12-13T15:43:16Z")

</div>

Hi, just want to share a small adjustment I made to the back component in the core\_components.ex file. I made @navigate optional with default nil, so if not given then it uses onclick="history.back();" instead. @doc ""…

---

## [Is CoreComponents a prelude of an official Phoenix components library?](https://forum.elixirforum.com/t/is-corecomponents-a-prelude-of-an-official-phoenix-components-library/55916)

<div class="topic-metadata">

**Author:** [@ca1989](https://forum.elixirforum.com/u/ca1989)\
**Replies:** 8\
**Last updated:** [May 18, 2023, 7:50am UTC](https://forum.elixirforum.com/t/is-corecomponents-a-prelude-of-an-official-phoenix-components-library/55916 "2023-05-18T07:50:22Z")

</div>

Hi all, just out of curiosity: Is the CoreComponents module a prelude of an official Phoenix components library? Or are they just a great example of defining function components to be reused throughout our application…

---

## [PrimerLive - a collection of LiveView components that implements GitHub's Primer Design System](https://forum.elixirforum.com/t/primerlive-a-collection-of-liveview-components-that-implements-githubs-primer-design-system/52089)

<div class="topic-metadata">

**Author:** [@ArthurClemens](https://forum.elixirforum.com/u/ArthurClemens)\
**Replies:** 8\
**Last updated:** [March 15, 2023, 10:57am UTC](https://forum.elixirforum.com/t/primerlive-a-collection-of-liveview-components-that-implements-githubs-primer-design-system/52089 "2023-03-15T10:57:14Z")

</div>

The last couple of months I’ve been working on a LiveView UI library based on @storybook/cli - Storybook (the LiveView 0.18 update caused a bit of a rewrite, but made the code a lot easier to work with). With around 40 …

---

## [Phoenix Blog Post: Making a CheckboxGroup Input](https://forum.elixirforum.com/t/phoenix-blog-post-making-a-checkboxgroup-input/53893)

<div class="topic-metadata">

**Author:** [@brainlid](https://forum.elixirforum.com/u/brainlid)\
**Replies:** 3\
**Last updated:** [February 17, 2023, 11:43pm UTC](https://forum.elixirforum.com/t/phoenix-blog-post-making-a-checkboxgroup-input/53893 "2023-02-17T23:43:13Z")

</div>

Phoenix 1.7.0 brings a lot of new things when we run mix phx.gen my\_app. These new and cool ways of doing things aren’t automatically brought to existing projects because they come from the generators. Of the many new th…

---

## [Podcast: ThinkingElixir 117 - PhxLiveStorybook](https://forum.elixirforum.com/t/podcast-thinkingelixir-117-phxlivestorybook/50395)

<div class="topic-metadata">

**Author:** [@brainlid](https://forum.elixirforum.com/u/brainlid)\
**Replies:** 0\
**Last updated:** [September 20, 2022, 12:05pm UTC](https://forum.elixirforum.com/t/podcast-thinkingelixir-117-phxlivestorybook/50395 "2022-09-20T12:05:34Z")

</div>

Episode 117 of Thinking Elixir. A UI Storybook for Phoenix LiveView components? Christian Blavier joins to share what his team created and made OpenSource. The project was even mentioned during Chris McCord’s keynote as …

---

## [Elixir Blog Post: Passing Unknown Attributes into Your Component](https://forum.elixirforum.com/t/elixir-blog-post-passing-unknown-attributes-into-your-component/45061)

<div class="topic-metadata">

**Author:** [@brainlid](https://forum.elixirforum.com/u/brainlid)\
**Replies:** 1\
**Last updated:** [January 7, 2022, 7:56pm UTC](https://forum.elixirforum.com/t/elixir-blog-post-passing-unknown-attributes-into-your-component/45061 "2022-01-07T19:56:59Z")

</div>

On your LiveView page, you are using a custom component. You want to be able to pass HTML attributes into the component, but the component doesn’t know anything about the attributes being passed! You need a way to pass a…
