Built-in Components

Surface provides a set of built-in components that you can use in any project, regardless of the CSS/JS solution you might choose.


Built-in components are usually under the Surface.Components namespace and can be aliased as any other component. For instance:

defmodule MyLivePatch do
  use Surface.Component
  alias Surface.Components.LivePatch

  def render(assigns) do
    <LivePatch to="#">
      <i class="fa fa-link is-info"/>
      My link

Available components

Note: Most of the following components just wrappers around existing Phoenix built-in helpers.


  • Link - Generates a hyperlink.
  • LivePatch - Generates a link that will patch the current LiveView.
  • LiveRedirect - Generates a link that will redirect to a new LiveView.


  • Form - Defines a form that lets the user submit information.

  • Field - Defines a form field.

  • Label - Defines a label.

  • Input Controls - A set of common input controls based on the <input> element.

  • TextArea - An input field that let the user enter a multi-line text.


  • #Markdown - A simple macro component that converts markdown into HTML at compile-time.
  • #Raw - A macro component that does not translate any of its contents.