Learn how to use Phoenix’s auto-generated core components for building reusable UI elements.

Core components

• Core components are reusable UI building blocks (e.g., button, icon, back button) auto-generated by Phoenix in every new project, found in the core_components.ex file

Usage

• If a component is in the same module as your template, use it as .component_name (dot syntax)
• To use a component from another module (like core components), either reference it with its full module path (e.g., ShopWeb.CoreComponents.button) or, thanks to Phoenix’s auto-import system, just use the dot syntax in HEEx and it will work

Slots (children)

• Many core components support slots—sections of content passed from parent to child, similar to children in React
• For example, the <.button> component expects an inner_block (slot/child)

Auto-import magic

• All core components are globally available in HEEx templates because ShopWeb.CoreComponents is imported in the Phoenix HTML macro
• If you remove this import, the components won’t work until you add them back

Examples

• Use <.button>Click me</.button> for buttons
• Use <.back navigate={~p"/products"}>Back to product listing</.back> for a back-to-listing button (where ~p uses the verified route sigil)

Why read core_components.ex?

• It’s full of useful, real-world patterns for function components, slots, and composition—a must-read for advanced Phoenix UI work

Summary

Phoenix makes it easy to use and compose reusable UI components (like buttons, icons, “back” links) throughout your app with zero boilerplate, and all the best examples are in the auto-generated core_components.ex file.