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.

Usage

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
    ~F"""
    <LivePatch to="#">
      <i class="fa fa-link is-info"/>
      My link
    </LivePatch>
    """
  end
end

Available components

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

Navigation

  • 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.

Other

  • #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.