diff --git a/sources/lib/components/station_ui/html/accordion.ex b/sources/lib/components/station_ui/html/accordion.ex
new file mode 100644
index 0000000..8a2f888
--- /dev/null
+++ b/sources/lib/components/station_ui/html/accordion.ex
@@ -0,0 +1,139 @@
+defmodule StationUI.HTML.Accordion do
+  use Phoenix.Component
+
+  import StationUI.HTML.Icons, only: [icon: 1]
+  alias Phoenix.LiveView.JS
+
+  @moduledoc """
+  The accordion component renders a list of items with child content that can be expanded or collapsed.
+
+  ## Example
+
+  <.accordion_set>
+    <:header>
+      Title something 1
+    </:header>
+    <:content>
+      Content something 1
+    </:content>
+  </.accordion_set>
+
+  Suggested size classes
+
+  The Default size for accordions is "md" but the size can be change by passing in these additional classes
+  using `header_size_class="..."` and `content_size_class="..."` as follows
+
+  header_size_class:
+
+  sm: "p-1 text-base sm:text-lg gap-x-0.5"
+  md: "p-1 text-base sm:text-lg md:text-xl md:py-1 md:pr-1 md:pl-1.5 md:gap-x-1"
+  lg: "p-1 text-base sm:text-lg md:text-xl lg:text-2xl md:py-1 md:pr-1 md:pl-1.5 lg:pl-2 md:gap-x-1 lg:gap-x-1.5"
+  xl: "p-1 text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl md:pt-1 md:pb-0 md:pr-1 md:pl-1.5 lg:pl-4 sm:gap-x-3 md:gap-x-4 lg:gap-x-5"
+
+  content_size_class:
+
+  sm: "text-base"
+  md: "grid transition-grid-rows text-base md:text-lg"
+  lg: "md:text-lg lg:text-xl"
+  xl: "md:text-lg lg:text-xl xl:text-2xl"
+  """
+
+  def accordion(assigns) do
+    ~H"""
+    <.accordion_set>
+      <:header>
+        Title something 1
+      </:header>
+      <:content>
+        Content something 1
+      </:content>
+    </.accordion_set>
+    """
+  end
+
+  slot :header, required: true do
+    attr :button_id, :string
+  end
+
+  slot :content, required: true
+  attr :header_size_class, :string, default: "text-base sm:text-lg md:text-xl"
+  attr :content_size_class, :string, default: "text-base md:text-lg"
+  attr :rest, :global
+
+  def accordion_set(assigns) do
+    assigns =
+      assigns
+      |> assign(:header, List.wrap(assigns.header))
+      |> assign(:content, List.wrap(assigns.content))
+      |> assign(:random_id, :rand.uniform(9999))
+      |> assign(:items, Enum.with_index(Enum.zip(List.wrap(assigns.header), List.wrap(assigns.content))))
+
+    ~H"""
+    <div class="grid gap-2">
+      <div :for={{{header, content}, index} <- @items} class="relative grid gap-1">
+        <% # Accordion Trigger %>
+        <button
+          id={Map.get(header, :button_id)}
+          class={[
+            "group flex w-full min-w-min cursor-pointer items-center whitespace-nowrap bg-transparent font-semibold outline-none transition hover:bg-slate-50 focus-visible:ring-4 focus-visible:ring-purple-600 focus-visible:rounded-lg active:bg-slate-50 disabled:bg-slate-50 disabled:text-slate-300",
+            "pl-3 pr-2 py-1 gap-x-2 md:pl-4 md:pr-3 md:gap-x-4",
+            @header_size_class
+          ]}
+          type="button"
+          id={"accordion-trigger-#{@random_id}-#{index}"}
+          aria-controls={"accordion-#{@random_id}-#{index}"}
+          aria-expanded="false"
+          phx-click={
+            JS.toggle_attribute({"aria-expanded", "true", "false"})
+            |> then(fn js ->
+              Enum.reduce(Enum.to_list(0..(length(@items) - 1)) -- [index], js, fn item_index, js ->
+                js
+                |> JS.set_attribute({"aria-expanded", "false"}, to: "#accordion-trigger-#{@random_id}-#{item_index}")
+                |> JS.hide(to: "#accordion-#{@random_id}-#{item_index}", transition: "fade-out-scale")
+                |> JS.remove_class("rotate-180", to: "#accordion-chevron-#{@random_id}-#{item_index}")
+              end)
+            end)
+            |> JS.focus(to: "#accordion-#{@random_id}-#{index}")
+            |> JS.toggle(to: "#accordion-#{@random_id}-#{index}", in: "fade-in-scale", out: "fade-out-scale", display: "grid")
+            |> JS.toggle_class("rotate-180", to: "#accordion-chevron-#{@random_id}-#{index}")
+          }
+        >
+          <span class="flex h-10 w-10 items-center justify-center text-violet-600 group-disabled:text-slate-300 md:h-12 md:w-12">
+            <.icon name="hero-folder-solid" aria-hidden="true" class="h-8 w-8 md:h-10 md:w-10" />
+          </span>
+
+          <span class="text-xl lg:text-2xl"><%= render_slot(header) %></span>
+
+          <span
+            aria-hidden="true"
+            class="flex justify-center items-center ml-auto [&_path]:transition-transform h-6 w-6 sm:h-[34px] sm:w-[34px] md:h-10 md:w-10"
+          >
+            <svg
+              id={"accordion-chevron-#{@random_id}-#{index}"}
+              xmlns="http://www.w3.org/2000/svg"
+              width="38"
+              height="38"
+              viewBox="0 0 38 38"
+              fill="none"
+              class="h-4 w-4 rotate-0 fill-slate-800 transition-transform duration-300 sm:h-5 sm:w-5 md:h-6 md:w-6"
+            >
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M27.9435 24.1436C27.2015 24.8855 25.9985 24.8855 25.2565 24.1436L19 17.8871L12.7435 24.1436C12.0015 24.8855 10.7985 24.8855 10.0565 24.1436C9.3145 23.4016 9.3145 22.1985 10.0565 21.4565L17.6565 13.8565C18.3985 13.1145 19.6015 13.1145 20.3435 13.8565L27.9435 21.4565C28.6855 22.1985 28.6855 23.4016 27.9435 24.1436Z"
+              />
+            </svg>
+          </span>
+        </button>
+
+        <% #  Accordion Content %>
+        <div id={"accordion-#{@random_id}-#{index}"} class={["grid px-3 pt-1 hidden transition-grid-rows md:px-4", @content_size_class]} role="region">
+          <div class="overflow-hidden">
+            <%= render_slot(content) %>
+          </div>
+        </div>
+      </div>
+    </div>
+    """
+  end
+end
diff --git a/sources/lib/components/station_ui/html/avatars.ex b/sources/lib/components/station_ui/html/avatars.ex
new file mode 100644
index 0000000..e2e366f
--- /dev/null
+++ b/sources/lib/components/station_ui/html/avatars.ex
@@ -0,0 +1,239 @@
+defmodule StationUI.HTML.Avatars do
+  use Phoenix.Component
+
+  import StationUI.HTML.StatusBadges, only: [status_badge: 1]
+
+  @moduledoc """
+  The avatar component renders initials, an SVG, or an image thumbnail to represent a user.
+  Avatars can be displayed as single items or combined into a horizontal stack.
+
+  Sets up an avatar stack.
+
+  ## Stack Example
+
+    <.avatar_stack overflow_link={~p"/avatars/link"} display_max={2}>
+      <:avatar>
+        <.avatar .../>
+      </:avatar>
+      <:avatar>
+        <.avatar .../>
+      </:avatar>
+      <:avatar>
+        <.avatar .../>
+      </:avatar>
+      <:avatar>
+        <.avatar .../>
+      </:avatar>
+    <.avatar_stack>
+
+  """
+  @stack_base_classes [
+    "flex items-start [&_div]:flex [&_div]:flex-row-reverse",
+    "[&>a]:z-20 [&>a]:hover:z-40 [&_div_a_figure]:z-10",
+    "[&_div_a]:hover:z-30 [&_a:focus-visible]:z-50 [&_a]:active:z-50 [&_a:hover_figure]:ml-0 [&_a:focus-visible_figure]:ml-0"
+  ]
+
+  def stack_base_classes, do: @stack_base_classes
+
+  attr(:class, :any, default: "[&_div]:ml-1.5 [&_div_figure]:-ml-3.5")
+  attr(:display_max, :integer, default: 3)
+  attr(:total_count, :integer, default: nil)
+  attr(:overflow_link, :string, required: true)
+
+  slot(:avatar)
+
+  def avatar_stack(assigns) do
+    assigns =
+      assigns
+      |> assign(:total_count, assigns.total_count || length(assigns.avatar))
+
+    ~H"""
+    <div class={[stack_base_classes() | List.wrap(@class)]}>
+      <.avatar_link :if={@total_count > @display_max} to={@overflow_link} variant="initials" class="h-[42px] w-[42px] border-[--sui-brand-primary-border]">
+        <:initials count={true}>+<%= @total_count - @display_max %></:initials>
+      </.avatar_link>
+
+      <div>
+        <%= for {avatar, i} <- Enum.with_index(@avatar), i < @display_max do %>
+          <%= render_slot(avatar) %>
+        <% end %>
+      </div>
+    </div>
+    """
+  end
+
+  @doc """
+  An avatar that links somewhere.
+
+  ## Example
+
+      <.avatar_link to={~p"/some/link"} variant="placeholder" />
+
+  """
+  @link_base_classes "rounded-full outline-none transition hover:ring-2 hover:ring-[--sui-brand-primary-muted] focus-visible:ring-[--sui-brand-primary-focus] focus-visible:ring-offset-4 active:ring-[--sui-brand-primary]"
+
+  def link_base_classes, do: @link_base_classes
+
+  attr(:status, :string, values: ~w[active inactive deactivated pending])
+  attr(:variant, :string, values: ~w[image initials placeholder])
+  attr(:index, :integer)
+  attr(:name, :string, default: nil)
+  attr(:image_src, :string, default: nil)
+  attr(:to, :string, required: true)
+  attr(:link_class, :any, default: "focus-visible:ring-2 active:ring-1")
+  attr(:class, :any, default: nil)
+
+  # These are all passed through.
+  slot :initials do
+    attr(:count, :boolean)
+  end
+
+  slot(:placeholder)
+
+  def avatar_link(assigns) do
+    assigns =
+      case assigns do
+        %{class: nil} = assigns -> Map.drop(assigns, [:class])
+        assigns -> assigns
+      end
+
+    ~H"""
+    <a href={@to} class={[link_base_classes() | List.wrap(@link_class)]}>
+      <.avatar {Map.drop(assigns, [:link_class])} />
+    </a>
+    """
+  end
+
+  @doc """
+  A single avatar
+
+  ## Examples
+
+  Avatar with initials, a border, and an active status icon:
+
+      <.avatar variant="initials" status="active" class="h-[42px] w-[42px] border-[--sui-brand-primary]" />
+
+  Avatar with placeholder image with a pending status icon:
+
+      <.avatar variant="placeholder" status="pending" />
+
+  Suggested classes for various sizes:
+    - xs -> "h-6 w-6 [&_svg]:w-3 text-xs"
+    - sm -> "h-8 w-8 [&_svg]:w-4 text-sm"
+    - md -> "h-[42px] w-[42px] [&_svg]:w-[21px]" (default)
+    - lg -> "h-[52px] w-[52px] [&_svg]:w-[26px] text-lg"
+    - xl -> "h-16 w-16 [&_svg]:w-8 text-lg"
+
+  """
+  @figure_base_classes "relative flex items-center justify-center border rounded-full bg-slate-50 transition-all duration-200 font-sans font-medium uppercase text-[--sui-brand-primary]"
+
+  def figure_base_classes, do: @figure_base_classes
+
+  attr(:status, :string, values: ~w[active inactive deactivated pending])
+  attr(:variant, :string, values: ~w[image initials placeholder])
+  attr(:index, :integer)
+  attr(:name, :string, default: nil)
+  attr(:image_src, :string, default: "")
+  attr(:class, :any, default: "h-[42px] w-[42px] [&_svg]:w-[21px] border-transparent")
+
+  slot :initials do
+    attr(:count, :boolean)
+  end
+
+  # We may have to deal with applying styles to placeholders?
+  slot(:placeholder)
+
+  def avatar(%{variant: "image"} = assigns) do
+    ~H"""
+    <figure class={[figure_base_classes() | List.wrap(@class)]}>
+      <img class="h-full w-full rounded-full object-cover" src={@image_src} alt={@name || ""} />
+      <.avatar_status_badge :if={assigns[:status]} status={@status} />
+    </figure>
+    """
+  end
+
+  def avatar(%{variant: "initials"} = assigns) do
+    ~H"""
+    <figure class={[figure_base_classes(), @class]}>
+      <figcaption>
+        <span aria-hidden="true">
+          <%= render_slot(@initials) || initials_from_name(@name || "") %>
+        </span>
+        <span :for={initials <- @initials} :if={initials[:count]} class="sr-only">
+          <%= render_slot(@initials) %>
+        </span>
+        <span :if={@name} class="sr-only"><%= @name %></span>
+      </figcaption>
+      <.avatar_status_badge :if={assigns[:status]} status={@status} />
+    </figure>
+    """
+  end
+
+  def avatar(%{variant: "placeholder"} = assigns) do
+    ~H"""
+    <figure class={[figure_base_classes(), @class]}>
+      <%= render_slot(@placeholder) || default_avatar_placeholder_icon(assigns) %>
+      <.avatar_status_badge :if={assigns[:status]} status={@status} />
+    </figure>
+    """
+  end
+
+  defp initials_from_name(name) do
+    String.split(name) |> Enum.map_join(&String.first/1)
+  end
+
+  @doc """
+  The default placeholder icon for a placeholder variant of an avatar.
+  """
+  attr(:name, :string, default: nil)
+
+  def default_avatar_placeholder_icon(assigns) do
+    ~H"""
+    <svg
+      class="h-auto self-end"
+      role="img"
+      width="32"
+      height="52"
+      viewBox="0 0 32 52"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label={@name || "Avatar Image"}
+    >
+      <title :if={@name}><%= @name %></title>
+      <circle class="fill-gray-300" cx="16" cy="16" r="16" />
+      <path class="fill-gray-400" opacity="0.6" d="M16 0C7.16344 0 0 7.16344 0 16C4 16 6 14 8 12C11.2 20 30 20 32 16C32 7.16344 24.8366 0 16 0Z" />
+      <path
+        class="fill-gray-300"
+        d="M0.00195312 47.7202C0.151367 39.0127 7.25684 32 16 32C24.7432 32 31.8486 39.0127 31.998 47.7202C27.292 50.4421 21.8271 52 16 52C10.1729 52 4.70801 50.4421 0.00195312 47.7202Z"
+      />
+      <path
+        class="fill-gray-400"
+        opacity="0.4"
+        d="M27.9998 37.4164C25.0679 34.0949 20.7785 32 15.9998 32C14.206 32 12.4811 32.2952 10.8711 32.8397C16.3681 38.3114 24.5807 38.1707 27.9998 37.4164Z"
+        fill="#A5B4FC"
+      />
+    </svg>
+    """
+  end
+
+  @doc """
+  An avatar-specific status icon.
+  """
+  attr(:status, :string, required: true, values: ~w[active inactive deactivated pending])
+  attr(:class, :any, default: nil, doc: "additional or overriding classes")
+
+  def avatar_status_badge(assigns) do
+    ~H"""
+    <.status_badge
+      :if={@status}
+      status={@status}
+      class={[
+        "absolute -right-px -bottom-px z-10 transition-opacity duration-200",
+        "after:absolute after:inset-0",
+        "after:h-full after:w-full after:rounded-full",
+        "w-3 [&>span]:w-0.5"
+      ]}
+    />
+    """
+  end
+end
diff --git a/sources/lib/components/station_ui/html/banners.ex b/sources/lib/components/station_ui/html/banners.ex
new file mode 100644
index 0000000..4192d63
--- /dev/null
+++ b/sources/lib/components/station_ui/html/banners.ex
@@ -0,0 +1,72 @@
+defmodule StationUI.HTML.Banners do
+  use Phoenix.Component
+
+  import StationUI.HTML.Icons, only: [icon: 1]
+  import StationUI.HTML.Buttons
+
+  alias Phoenix.LiveView.JS
+
+  @base_classes "max-w-[800px] text-[--sui-brand-primary-text] w-full rounded-lg border py-2.5 pl-3"
+  defp base_classes, do: @base_classes
+
+  @doc """
+  The banner component renders an enclosed title, description, and close button.
+  The title content goes into the main inner_block slot.
+  The optional secondary (lower) content goes into the secondary slot.
+
+  ## Examples
+
+  Default banner with left icon, title, and secondary text:
+
+    <.banner id="icon-title-and-secondary">
+      <.icon name="hero-information-circle-solid" class="text-[--sui-brand-primary] shrink-0" />
+      <h2 class="font-medium text-xl pl-2">Default Banner with Icon and Secondary</h2>
+      <:secondary>
+        Secondary text.
+      </:secondary>
+    </.banner>
+
+  Banner of default size but without border:
+
+    <.banner id="no-border" class="border-transparent [&_span]:h-6 [&_span]:w-6 text-base">
+      ...
+    </.banner>
+
+  Suggested classes for various text sizes and the default border styling:
+
+    - xs -> "border-[--sui-brand-primary-border] [&_span]:h-3.5 [&_span]:w-3.5 text-xs"
+    - sm -> "border-[--sui-brand-primary-border] [&_span]:h-4.5 [&_span]:w-4.5 text-sm"
+    - md -> "border-[--sui-brand-primary-border] [&_span]:h-6 [&_span]:w-6 text-base" (the default)
+    - lg -> "border-[--sui-brand-primary-border] [&_span]:h-9 [&_span]:w-9 text-xl"
+    - xl -> "border-[--sui-brand-primary-border] [&_span]:h-12 [&_span]:w-12 text-3xl"
+  """
+
+  slot :inner_block, required: true
+  slot :secondary
+
+  attr :id, :string, required: true
+  attr :class, :any, default: "border-[--sui-brand-primary-border] [&_span]:h-6 [&_span]:w-6 text-base"
+  attr :on_cancel, JS, default: %JS{}
+
+  def banner(assigns) do
+    ~H"""
+    <div id={@id} class={[base_classes(), @class]} role="status">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <%= render_slot(@inner_block) %>
+        </div>
+        <.button class="sui-secondary min-h-11 border-0 bg-white" aria-label="Dismiss" phx-click={hide_banner(@on_cancel, @id)}>
+          <.icon name="hero-x-mark" />
+        </.button>
+      </div>
+      <p class="pb-2 empty:hidden"><%= render_slot(@secondary) %></p>
+    </div>
+    """
+  end
+
+  defp hide_banner(js, id) do
+    js
+    |> JS.hide(to: "##{id}")
+    |> JS.pop_focus()
+  end
+end
diff --git a/sources/lib/components/station_ui/html/buttons.ex b/sources/lib/components/station_ui/html/buttons.ex
new file mode 100644
index 0000000..44bd6f5
--- /dev/null
+++ b/sources/lib/components/station_ui/html/buttons.ex
@@ -0,0 +1,84 @@
+defmodule StationUI.HTML.Buttons do
+  use Phoenix.Component
+
+  @moduledoc """
+  The button component renders a <button> element with options for text-only, icon-only, or a combination of both.
+
+  Use the default slot to pass in text or large icons for buttons.
+
+  Buttons classes remain the same regardless of the button theme, but the value of variables applied to those classes will be scoped using
+  a specifier or modifier class:
+
+    - sui-primary
+    - sui-secondary
+    - sui-tertiary
+    - sui-primary-destructive
+    - sui-secondary-destructive
+
+  These classes are not utiltiy classes, as they are not actually applying or changing
+  any CSS properties. The classes serve merely to scope the variables based on the theme of the button.
+
+    ## Example
+
+  <.button>
+    Button text
+    <.icon name="hero-chevron-down" class="w-4 h-4 lg:w-5 lg:h-5" />
+  </.button>
+
+  Suggested size classes:
+    xl: text-3xl lg:text-4xl
+    lg: text-2xl lg:text-3xl
+    sm: text-sm lg:text-base
+  """
+  attr(:class, :string, default: "sui-primary")
+  attr(:rest, :global, include: ~w(disabled form formaction formmethod))
+
+  slot(:inner_block)
+
+  def button(assigns) do
+    ~H"""
+    <button class={[@class, base_classes()]} {@rest}>
+      <%= render_slot(@inner_block) %>
+    </button>
+    """
+  end
+
+  defp base_classes do
+    ~w"
+      [:where(&)]:rounded-lg
+      [:where(&)]:text-base
+
+      py-[7px]
+      bg-[--sui-bg-btn]
+      border-[--sui-border-btn]
+      text-[--sui-text-btn]
+      inline-flex
+      items-center
+      justify-center
+      gap-x-1.5
+      whitespace-nowrap
+      border
+      px-4
+      font-bold
+
+      hover:bg-[--sui-bg-btn-hover]
+      hover:border-[--sui-border-btn-hover]
+      hover:text-[--sui-text-btn-hover]
+
+      focus-visible:outline-none
+      focus-visible:ring-2
+      focus-visible:ring-purple-500
+      focus-visible:ring-offset-4
+
+      active:bg-[--sui-bg-btn-active]
+      active:border-[--sui-border-btn-active]
+      active:text-[--sui-text-btn-active]
+
+      disabled:bg-[--sui-bg-btn-disabled]
+      disabled:border-[--sui-border-btn-disabled]
+      disabled:text-[--sui-text-btn-disabled]
+
+      lg:gap-x-2
+   "
+  end
+end
diff --git a/sources/lib/components/station_ui/html/cards.ex b/sources/lib/components/station_ui/html/cards.ex
new file mode 100644
index 0000000..273b511
--- /dev/null
+++ b/sources/lib/components/station_ui/html/cards.ex
@@ -0,0 +1,180 @@
+defmodule StationUI.HTML.Cards do
+  use Phoenix.Component
+
+  @moduledoc """
+  The cards component renders a self-contained area of content which can contain:
+  - Title
+  - Image
+  - Description
+  - Date
+  - Read More link
+
+  The card can utilize either a vertical or horizontal layout.
+
+  ## Examples
+
+  ### Vertical Card
+
+  <.card>
+    <:header>
+      <img
+        class="w-full"
+        src="https://images.pexels.com/photos/3635870/pexels-photo-3635870.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
+        alt="A whale leaps out of the water"
+      />
+    </:header>
+    <:content>
+      <div class="flex flex-wrap items-center justify-between gap-0.5">
+        <!-- Allow the heading and date to wrap if the heading overflows the card -->
+        <h2 class="text-base @[350px]:text-lg/[27px] @[425px]:text-2xl/[36px] @[625px]:text-3xl/[45px] font-semibold text-slate-800">
+          The Whales Are Here!
+        </h2>
+        <h3 class="text-xs @[350px]:text-sm font-semibold text-gray-500">Nov 12, 2022</h3>
+      </div>
+      <p class="text-xs/[18px] @[350px]:text-sm/[21px] @[425px]:text-base @[625px]:text-lg/[27px] @[850px]:text-xl/[30px] font-medium text-slate-800">
+        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis fugiat, aliquam assumenda repellat rerum nostrum.
+      </p>
+      <!-- Call to action -->
+      <a
+        href="#"
+        class="text-sm/[21px] @[350px]:text-base @[625px]:text-2xl/[36px] px-2 py-2 justify-self-center font-bold text-skin-link hover:text-skin-link-hover active:text-skin-link-active focus-visible:ring-skin-link focus-visible:ring-2 focus-visible:outline-none"
+      >
+        Read More
+      </a>
+    </:content>
+  </.card>
+
+  ### Horizontal Card
+
+  <.card_horizontal>
+    <:header>
+      <img
+        class="h-full w-[260px] object-cover"
+        src="https://images.pexels.com/photos/3635870/pexels-photo-3635870.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
+        alt="A whale leaps out of the water"
+      />
+    </:header>
+    <:content>
+      <div class="w-full">
+        <h2 class="text-base @[350px]:text-xl/[30px] @[425px]:text-3xl/[45px] @[625px]:text-5xl/[72px] @[850px]:text-7xl/[108px] font-semibold text-slate-800">
+          Headline
+        </h2>
+        <p class="text-xs/[18px] @[350px]:text-sm/[21px] @[425px]:text-base @[625px]:text-lg/[27px] @[850px]:text-xl/[30px] font-medium text-slate-800">
+          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis fugiat, aliquam assumenda repellat rerum nostrum.
+        </p>
+      </div>
+
+      <div
+        aria-hidden
+        class="py-2 pr-2 @[425px]:py-4 @[425px]:pr-4 @[625px]:py-6 @[625px]:pr-6 @[850px]:py-8 @[850px]:pr-8py-1 grid auto-rows-max place-content-center text-slate-800"
+      >
+        <.button class="w-10 h-10 rounded-full border-0 sui-secondary">
+          <.icon name="hero-face-smile-solid" class="w-5 h-5 shrink-0" />
+        </.button>
+        <.button class="w-10 h-10 rounded-full border-0 sui-secondary">
+          <.icon name="hero-face-smile-solid" class="w-5 h-5 shrink-0" />
+        </.button>
+        <.button class="w-10 h-10 rounded-full border-0 sui-secondary">
+          <.icon name="hero-face-smile-solid" class="w-5 h-5 shrink-0" />
+        </.button>
+      </div>
+    </:content>
+  </.card_horizontal>
+  """
+
+  @base_classes "@container min-w-[200px] w-full h-full"
+  defp base_classes, do: @base_classes
+
+  @base_inner_classes "overflow-hidden drop-shadow-md @[425px]:drop-shadow-lg @[625px]:drop-shadow-xl @[850px]:drop-shadow-2xl rounded-xl w-auto h-full"
+  defp base_inner_classes, do: @base_inner_classes
+
+  @base_content_classes "grid gap-0.5 @[350px]:gap-1 @[425px]:gap-2 p-2 @[425px]:px-4 @[625px]:px-6 @[625px]:py-3 @[850px]:px-8 @[850px]:py-4"
+  defp base_content_classes, do: @base_content_classes
+
+  attr :class, :any, default: ""
+
+  slot :header
+
+  slot :content, required: true do
+    attr :class, :string
+  end
+
+  def card(assigns) do
+    ~H"""
+    <div class={[base_classes() | List.wrap(@class)]}>
+      <div class={base_inner_classes()}>
+        <header :for={header <- @header}>
+          <%= render_slot(header) %>
+        </header>
+        <.content_card slot={@content} />
+      </div>
+    </div>
+    """
+  end
+
+  attr :slot, :any, required: true
+
+  defp content_card(assigns) do
+    class =
+      case assigns.slot do
+        [%{class: class} | _] -> class
+        _ -> "bg-white"
+      end
+
+    assigns = assign(assigns, :class, class)
+
+    ~H"""
+    <div class={[base_content_classes() | List.wrap(@class)]}>
+      <%= render_slot(@slot) %>
+    </div>
+    """
+  end
+
+  @base_horizontal_classes "@container min-w-[200px] w-full h-full"
+  defp base_horizontal_classes, do: @base_horizontal_classes
+
+  @base_horizontal_inner_classes "overflow-hidden drop-shadow-md @[425px]:drop-shadow-lg @[625px]:drop-shadow-xl @[850px]:drop-shadow-2xl rounded-xl w-full flex"
+  defp base_horizontal_inner_classes, do: @base_horizontal_inner_classes
+
+  @base_horizontal_content_classes "flex w-full gap-1 py-2 pl-2 @[425px]:py-4 @[425px]:pl-4 @[625px]:py-6 @[625px]:pl-6 @[850px]:py-8 @[850px]:pl-8"
+  defp base_horizontal_content_classes, do: @base_horizontal_content_classes
+
+  attr :class, :any, default: ""
+  slot :inner_block, required: true
+  slot :header
+
+  slot :content do
+    attr :class, :string
+  end
+
+  def card_horizontal(assigns) do
+    ~H"""
+    <div class={[base_horizontal_classes() | List.wrap(@class)]}>
+      <div class={base_horizontal_inner_classes()}>
+        <header :for={header <- @header}>
+          <%= render_slot(header) %>
+        </header>
+        <.content_card_horizontal slot={@content} />
+      </div>
+    </div>
+    """
+  end
+
+  attr :slot, :any, required: true
+
+  defp content_card_horizontal(assigns) do
+    class =
+      case assigns.slot do
+        [%{class: class} | _] -> class
+        _ -> "bg-white"
+      end
+
+    assigns = assign(assigns, :class, class)
+
+    ~H"""
+    <div class={[base_horizontal_content_classes() | List.wrap(@class)]}>
+      <%= render_slot(@slot) %>
+    </div>
+    """
+  end
+end
diff --git a/sources/lib/components/station_ui/html/footer.ex b/sources/lib/components/station_ui/html/footer.ex
new file mode 100644
index 0000000..5d2d9e1
--- /dev/null
+++ b/sources/lib/components/station_ui/html/footer.ex
@@ -0,0 +1,224 @@
+defmodule StationUI.HTML.Footer do
+  use Phoenix.Component
+
+  @moduledoc """
+  The Footer component includes "simple" (default), and "columns" variant.
+  The default variant will list any footer_link slotted in horizontally, while
+  the columns variant will loop over a grouped list of links under a heading.
+
+  ## Default Footer example
+    <.footer logo_src={~p"/images/my_logo.png"} logo_alt_text="[Organization name] logo">
+      <:footer_link>
+        <.link patch={~p"/"}>
+          Home
+        </.link>
+      </:footer_link>
+      <:footer_link>
+        <.link href="https://www.foo.com/blog">
+          Blog
+        </.link>
+      </:footer_link>
+    </.footer>
+
+  ## columns variant
+    <.footer variant="columns" logo_src={~p"/images/my_logo.png"}>
+      <:column heading="One">
+        <.column_items>
+          <:footer_link>
+            <.link patch={~p"/"}>
+              Home
+            </.link>
+          </:footer_link>
+          <:footer_link >
+            <.link href="https://www.foo.com/blog">
+              Blog
+            </.link>
+          </:footer_link>
+        </.column_items>
+      </:column>
+      <:column heading="Two">
+        <.column_items>
+          <:footer_link>
+            <.link patch={~p"/"}>
+              Home
+            </.link>
+          </:footer_link>
+          <:footer_link>
+            <.link href="https://www.foo.com/blog">
+              Blog
+            </.link>
+          </:footer_link>
+        </.column_items>
+      </:column>
+    <./footer>
+
+  ## Both variants accept social links and icons
+    <.footer>
+      <:social_icon url="https://www.instagram.com" title="Instagram">
+        <svg>
+          ...
+        </svg>
+      </:social_icon>
+      <:social_icon url="https://www.facebook.com" title="Facebook" class="text-[#1877F2]">
+        <svg>
+          ...
+        </svg>
+      </:social_icon>
+    </.footer>
+  """
+
+  slot :inner_block
+
+  slot :footer_link do
+    attr :class, :string
+  end
+
+  slot :column do
+    attr :heading, :string, required: true
+  end
+
+  slot :social_icon do
+    attr :url, :string, required: true
+    attr :title, :string, required: true
+    attr :class, :string
+  end
+
+  attr :variant, :string, default: "simple", values: ~w[simple columns]
+  attr :logo_src, :string, default: nil
+  attr :logo_alt_text, :string, default: ""
+  attr :legal_text, :string, default: "© #{DateTime.utc_now().year} Your Company, Inc. All rights reserved."
+
+  def footer(%{variant: "simple"} = assigns) do
+    ~H"""
+    <footer class="bg-[--sui-brand-secondary-bg] p-16">
+      <div class="flex flex-wrap gap-y-10">
+        <%= if @logo_src  do %>
+          <div class="flex grow flex-col justify-center">
+            <div class="max-w-[242px] max-h-[72px] pr-4">
+              <img src={@logo_src} alt={@logo_alt_text} />
+            </div>
+          </div>
+        <% end %>
+        <%= if !Enum.empty?(@footer_link) do %>
+          <ul class="flex flex-wrap items-center gap-x-12 gap-y-6">
+            <%= for footer_link <- @footer_link do %>
+              <li class={[footer_link_base_classes(), "#{Map.get(footer_link, :class, "text-slate-600")}"]}>
+                <%= render_slot(footer_link) %>
+              </li>
+            <% end %>
+          </ul>
+        <% end %>
+      </div>
+      <hr class="border-[--sui-brand-primary-border] my-10 border-t-2" />
+      <%= render_slot(@inner_block) %>
+      <div class="flex flex-wrap items-center gap-x-4 gap-y-10">
+        <div class={["grow", Enum.empty?(@social_icon) && "text-center"]}>
+          <span class="text-[--sui-brand-secondary-text] text-3xl">
+            <%= @legal_text %>
+          </span>
+        </div>
+        <%= if !Enum.empty?(@social_icon) do %>
+          <ul class="flex flex-wrap items-center gap-x-14 gap-y-6">
+            <%= for social_icon <- @social_icon do %>
+              <li class={[social_icons_base_classes(), "#{Map.get(social_icon, :class, "text-[--sui-brand-primary-icon]")}"]}>
+                <.link href={social_icon[:url]} aria-label={social_icon[:title]} target="_blank">
+                  <%= render_slot(social_icon) %>
+                </.link>
+              </li>
+            <% end %>
+          </ul>
+        <% end %>
+      </div>
+    </footer>
+    """
+  end
+
+  def footer(%{variant: "columns"} = assigns) do
+    ~H"""
+    <footer class="bg-[--sui-brand-secondary-bg] p-16">
+      <div class="flex flex-wrap gap-y-10">
+        <%= if @logo_src  do %>
+          <div class="flex grow flex-col items-start">
+            <div class="max-w-[242px] max-h-[72px] pr-4">
+              <img src={@logo_src} alt={@logo_alt_text} />
+            </div>
+          </div>
+        <% end %>
+        <div class="flex flex-wrap gap-10">
+          <%= for column <- @column do %>
+            <div class="px-3">
+              <h6 class="mb-[30px] text-[--sui-brand-secondary-text-muted] text-4xl font-bold">
+                <%= column[:heading] %>
+              </h6>
+              <%= render_slot(column) %>
+            </div>
+          <% end %>
+        </div>
+      </div>
+      <hr class="border-[--sui-brand-primary-border] my-10 border-t-2" />
+      <%= render_slot(@inner_block) %>
+      <div class="flex flex-wrap items-center gap-x-4 gap-y-10">
+        <div class={["grow", Enum.empty?(@social_icon) && "text-center"]}>
+          <span class="text-[--sui-brand-secondary-text] text-3xl">
+            <%= @legal_text %>
+          </span>
+        </div>
+        <%= if !Enum.empty?(@social_icon) do %>
+          <ul class="flex flex-wrap items-center gap-x-14 gap-y-6">
+            <%= for social_icon <- @social_icon do %>
+              <li class={[social_icons_base_classes(), "#{Map.get(social_icon, :class, "text-[--sui-brand-primary-icon]")}"]}>
+                <.link href={social_icon[:url]} aria-label={social_icon[:title]} target="_blank">
+                  <%= render_slot(social_icon) %>
+                </.link>
+              </li>
+            <% end %>
+          </ul>
+        <% end %>
+      </div>
+    </footer>
+    """
+  end
+
+  slot :footer_link do
+    attr :class, :string
+  end
+
+  def column_items(assigns) do
+    ~H"""
+    <ul class="space-y-10">
+      <%= for footer_link <- @footer_link do %>
+        <li class={[footer_link_base_classes(), "#{Map.get(footer_link, :class, "text-slate-600")}", "px-2.5"]}>
+          <%= render_slot(footer_link) %>
+        </li>
+      <% end %>
+    </ul>
+    """
+  end
+
+  defp footer_link_base_classes do
+    ~w"
+      font-bold
+      text-4xl
+      [&_a]:rounded-lg
+      [&_a:hover]:underline
+      [&_a:hover]:underline-offset-8
+      [&_a:focus-visible]:outline-none
+      [&_a:focus-visible]:ring-4
+      [&_a:focus-visible]:ring-purple-500
+      [&_a:focus-visible]:ring-offset-4
+      [&_a:focus-visible]:ring-offset-[--sui-brand-secondary-bg]
+    "
+  end
+
+  defp social_icons_base_classes do
+    ~w"
+      [&_a]:block
+      [&_a]:rounded-lg
+      [&_a:focus-visible]:outline-none
+      [&_a:focus-visible]:ring-4
+      [&_a:focus-visible]:ring-purple-500
+      [&_a:focus-visible]:ring-offset-4
+      [&_a:focus-visible]:ring-offset-[--sui-brand-secondary-bg]
+    "
+  end
+end
diff --git a/sources/lib/components/station_ui/html/forms.ex b/sources/lib/components/station_ui/html/forms.ex
new file mode 100644
index 0000000..07e0e46
--- /dev/null
+++ b/sources/lib/components/station_ui/html/forms.ex
@@ -0,0 +1,100 @@
+defmodule StationUI.HTML.Forms do
+  @moduledoc """
+  This module exists to provide the same API as the Phoenix Core Components so as to support
+  generators that target the Core Components (`mix phx.gen.live`, `mix phx.gen.auth`, etc...)
+  """
+  use Phoenix.Component
+  alias StationUI.HTML.Inputs
+
+  attr :id, :any, default: nil
+  attr :name, :any
+  attr :label, :string, default: nil
+  attr :value, :any
+
+  attr :type, :string,
+    default: "text",
+    values: ~w(checkbox color date datetime-local email file hidden month number password
+               range radio search select tel text textarea time url week)
+
+  attr :field, Phoenix.HTML.FormField, doc: "a form field struct retrieved from the form, for example: @form[:email]"
+
+  attr :errors, :list, default: []
+  attr :checked, :boolean, doc: "the checked flag for checkbox inputs"
+  attr :prompt, :string, default: nil, doc: "the prompt for select inputs"
+  attr :options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2"
+  attr :multiple, :boolean, default: false, doc: "the multiple flag for select inputs"
+
+  attr :rest, :global, include: ~w(accept autocomplete capture cols disabled form list max maxlength min minlength
+                multiple pattern placeholder readonly required rows size step)
+
+  slot :inner_block
+
+  def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
+    assigns
+    |> assign(field: nil, id: assigns.id || field.id)
+    |> assign(:errors, Enum.map(field.errors, &translate_error(&1)))
+    |> assign_new(:name, fn -> if assigns.multiple, do: field.name <> "[]", else: field.name end)
+    |> assign_new(:value, fn -> field.value end)
+    |> input()
+  end
+
+  def input(%{type: "checkbox"} = assigns) do
+    ~H"""
+    <Inputs.checkbox {Map.drop(assigns, [:field, :label, :multiple, :options, :prompt, :type])}>
+      <:label :if={@label}><%= @label %></:label>
+    </Inputs.checkbox>
+    """
+  end
+
+  def input(%{type: "select"} = assigns) do
+    ~H"""
+    <Inputs.simple_select {Map.drop(assigns, [:checked, :field, :label, :type])}>
+      <:label :if={@label}><%= @label %></:label>
+    </Inputs.simple_select>
+    """
+  end
+
+  def input(%{type: "textarea"} = assigns) do
+    ~H"""
+    <Inputs.textarea {Map.drop(assigns, [:checked, :field, :label, :multiple, :options, :prompt, :type])}>
+      <:label :if={@label}><%= @label %></:label>
+    </Inputs.textarea>
+    """
+  end
+
+  def input(assigns) do
+    ~H"""
+    <Inputs.generic_input {Map.drop(assigns, [:checked, :field, :label, :multiple, :options, :prompt])}>
+      <:label :if={@label}><%= @label %></:label>
+    </Inputs.generic_input>
+    """
+  end
+
+  @doc """
+  Translates an error message using gettext.
+  """
+  def translate_error({msg, opts}) do
+    # When using gettext, we typically pass the strings we want
+    # to translate as a static argument:
+    #
+    #     # Translate the number of files with plural rules
+    #     dngettext("errors", "1 file", "%{count} files", count)
+    #
+    # However the error messages in our forms and APIs are generated
+    # dynamically, so we need to translate them by calling Gettext
+    # with our gettext backend as first argument. Translations are
+    # available in the errors.po file (as we use the "errors" domain).
+    if count = opts[:count] do
+      Gettext.dngettext(StationUI.Gettext, "errors", msg, msg, count, opts)
+    else
+      Gettext.dgettext(StationUI.Gettext, "errors", msg, opts)
+    end
+  end
+
+  @doc """
+  Translates the errors for a field from a keyword list of errors.
+  """
+  def translate_errors(errors, field) when is_list(errors) do
+    for {^field, {msg, opts}} <- errors, do: translate_error({msg, opts})
+  end
+end
diff --git a/sources/lib/components/station_ui/html/icons.ex b/sources/lib/components/station_ui/html/icons.ex
new file mode 100644
index 0000000..4c54de5
--- /dev/null
+++ b/sources/lib/components/station_ui/html/icons.ex
@@ -0,0 +1,28 @@
+defmodule StationUI.HTML.Icons do
+  use Phoenix.Component
+
+  @doc """
+  Renders a [Heroicon](https://heroicons.com).
+
+  Heroicons come in three styles – outline, solid, and mini.
+  By default, the outline style is used, but solid and mini may
+  be applied by using the `-solid` and `-mini` suffix.
+
+  You can customize the size and colors of the icons by setting
+  width, height, and background color classes.
+
+  ## Examples
+
+      <.icon name="hero-x-mark-solid" />
+      <.icon name="hero-arrow-path" class="ml-1 w-3 h-3 animate-spin" />
+  """
+  attr(:name, :string, required: true)
+  attr(:class, :any, default: nil)
+  attr(:rest, :global)
+
+  def icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} {@rest} aria-hidden="true" />
+    """
+  end
+end
diff --git a/sources/lib/components/station_ui/html/inputs.ex b/sources/lib/components/station_ui/html/inputs.ex
new file mode 100644
index 0000000..bd01f1e
--- /dev/null
+++ b/sources/lib/components/station_ui/html/inputs.ex
@@ -0,0 +1,1026 @@
+defmodule StationUI.HTML.Inputs do
+  use Phoenix.Component
+
+  import StationUI.HTML.Icons, only: [icon: 1]
+
+  alias Phoenix.HTML.Form
+  alias Phoenix.LiveView.JS
+
+  @custom_css_props """
+    [--slider-range:calc(var(--max)-var(--min))]
+    [--slider-ratio:calc((var(--value)-var(--min))/var(--slider-range))]
+    [--slider-x:calc(0.5*var(--slider-thumb-width)+var(--slider-ratio)*(100%-var(--slider-thumb-width)))]
+    [--slider-thumb-border-width:2px]
+    [--slider-thumb-focus-ring-width:2px]
+    [--slider-track-radius:5px]
+  """
+
+  @range_input_styles """
+    appearance-none
+    cursor-pointer
+    disabled:cursor-default
+    outline-none
+  """
+
+  @firefox_progress """
+    [&::-moz-range-progress]:bg-[--sui-form-bg-slider-progress]
+    [&::-moz-range-progress]:disabled:bg-[--sui-form-bg-slider-progress-disabled]
+    [&::-moz-range-progress]:h-[var(--slider-track-height)]
+    [&::-moz-range-progress]:rounded-[var(--slider-track-radius)]
+  """
+
+  @firefox_track """
+    [&::-moz-range-track]:bg-[-sui-form-bg-slider-track]
+    [&::-moz-range-track]:shadow-[inset_0_0_0_1px_var(--sui-form-border-slider-track)]
+    [&::-moz-range-track]:disabled:shadow-[inset_0_0_0_1px_var(--sui-form-border-slider-track-disabled)]
+    [&::-moz-range-track]:h-[var(--slider-track-height)]
+    [&::-moz-range-track]:rounded-[var(--slider-track-radius)]
+  """
+
+  @firefox_thumb """
+    [&::-moz-range-thumb]:bg-[--sui-form-bg-slider-thumb]
+    [&::-moz-range-thumb]:[border-width:var(--slider-thumb-border-width)]
+    [&::-moz-range-thumb]:border-solid
+    [&::-moz-range-thumb]:border-[--sui-form-border-slider-thumb]
+    [&::-moz-range-thumb]:active:bg-[--sui-form-bg-slider-thumb-active]
+    [&::-moz-range-thumb]:active:border-[--sui-form-border-slider-thumb-active]
+    [&::-moz-range-thumb]:box-border
+    [&::-moz-range-thumb]:disabled:bg-[--sui-form-bg-slider-thumb-disabled]
+    [&::-moz-range-thumb]:disabled:border-[--sui-form-border-slider-thumb-disabled]
+    [&::-moz-range-thumb]:focus-visible:outline
+    [&::-moz-range-thumb]:focus-visible:[outline-width:var(--slider-thumb-focus-ring-width)]
+    [&::-moz-range-thumb]:focus-visible:outline-offset-2
+    [&::-moz-range-thumb]:focus-visible:outline-purple-500
+    [&::-moz-range-thumb]:hover:bg-[--sui-form-bg-slider-thumb-hover]
+    [&::-moz-range-thumb]:hover:border-[--sui-form-border-slider-thumb-hover]
+    [&::-moz-range-thumb]:rounded-full
+    [&::-moz-range-thumb]:h-[var(--slider-thumb-height)]
+    [&::-moz-range-thumb]:w-[var(--slider-thumb-width)]
+  """
+
+  @webkit_track """
+    [&::-webkit-slider-runnable-track]:appearance-none
+    [&::-webkit-slider-runnable-track]:[background:linear-gradient(var(--sui-form-bg-slider-progress),var(--sui-form-bg-slider-progress))_0/var(--slider-x)_100%_no-repeat,var(--sui-form-bg-slider-track)]
+    [&::-webkit-slider-runnable-track]:disabled:[background:linear-gradient(var(--sui-form-bg-slider-progress-disabled),var(--sui-form-bg-slider-progress-disabled))_0/var(--slider-x)_100%_no-repeat,var(--sui-form-bg-slider-track)]
+    [&::-webkit-slider-runnable-track]:disabled:bg-[--sui-form-bg-slider-track-disabled]
+    [&::-webkit-slider-runnable-track]:h-[var(--slider-track-height)]
+    [&::-webkit-slider-runnable-track]:rounded-[var(--slider-track-radius)]
+    [&::-webkit-slider-runnable-track]:shadow-[inset_0_0_0_1px_var(--sui-form-border-slider-track)]
+    [&::-webkit-slider-runnable-track]:disabled:shadow-[inset_0_0_0_1px_var(--sui-form-border-slider-track-disabled)]
+  """
+
+  @webkit_thumb """
+    [&::-webkit-slider-thumb]:appearance-none
+    [&::-webkit-slider-thumb]:bg-[--sui-form-bg-slider-thumb]
+    [&::-webkit-slider-thumb]:[border-width:var(--slider-thumb-border-width)]
+    [&::-webkit-slider-thumb]:border-solid
+    [&::-webkit-slider-thumb]:border-[--sui-form-border-slider-thumb]
+    [&::-webkit-slider-thumb]:active:bg-[--sui-form-bg-slider-thumb-active]
+    [&::-webkit-slider-thumb]:active:border-[--sui-form-border-slider-thumb-active]
+    [&::-webkit-slider-thumb]:disabled:bg-[--sui-form-bg-slider-thumb-disabled]
+    [&::-webkit-slider-thumb]:disabled:border-[--sui-form-border-slider-thumb-disabled]
+    [&::-webkit-slider-thumb]:focus-visible:outline
+    [&::-webkit-slider-thumb]:focus-visible:[outline-width:var(--slider-thumb-focus-ring-width)]
+    [&::-webkit-slider-thumb]:focus-visible:outline-offset-2
+    [&::-webkit-slider-thumb]:focus-visible:outline-purple-500
+    [&::-webkit-slider-thumb]:hover:bg-[--sui-form-bg-slider-thumb-hover]
+    [&::-webkit-slider-thumb]:hover:border-[--sui-form-border-slider-thumb-hover]
+    [&::-webkit-slider-thumb]:rounded-full
+    [&::-webkit-slider-thumb]:[transform:translateY(calc(-50%+var(--slider-thumb-border-width)))]
+    [&::-webkit-slider-thumb]:h-[var(--slider-thumb-height)]
+    [&::-webkit-slider-thumb]:w-[var(--slider-thumb-width)]
+  """
+
+  @slider_input_base [
+    @custom_css_props,
+    @range_input_styles,
+    @firefox_progress,
+    @firefox_track,
+    @firefox_thumb,
+    @webkit_track,
+    @webkit_thumb
+  ]
+  defp slider_input_base, do: @slider_input_base
+
+  @caption_default_classes "mt-1.5 text-sm"
+  defp caption_default_classes, do: @caption_default_classes
+
+  @error_default_classes "mt-0.5 first-of-type:mt-1.5 text-sm"
+
+  @input_base_classes ~w"
+    min-w-[150px]
+    w-full
+    max-w-full
+    rounded
+    bg-white
+    font-medium
+    outline-none
+    transition
+    placeholder:text-zinc-300
+    focus:border-transparent
+    focus:ring-indigo-600
+    disabled:bg-slate-50
+    disabled:text-gray-500
+  "
+  defp input_base_classes, do: @input_base_classes
+
+  @input_default_classes "text-lg p-2.5 placeholder:text-base focus:ring-2"
+
+  @interaction_label_default_classes "gap-x-2.5 text-lg"
+  defp interaction_label_default_classes, do: @interaction_label_default_classes
+
+  @label_default_classes "mb-1.5 text-sm"
+  defp label_default_classes, do: @label_default_classes
+
+  @select_option_default_classes "px-4 py-3.5"
+  defp select_option_default_classes, do: @select_option_default_classes
+
+  @doc """
+  A checkbox input component.
+
+  Suggested classes for various sizes:
+    - XS
+      - class="h-[22px] w-[22px]"
+      - error_class="mt-0 first-of-type:mt-1 text-xs"
+      - <:label class="gap-x-1.5 text-sm">
+      - <:caption class="mt-1 text-xs">
+    - SM
+      - class="h-[26px] w-[26px]"
+      - error_class="mt-0 first-of-type:mt-1 text-xs"
+      - <:label class="gap-x-2 text-base">
+      - <:caption class="mt-1 text-xs">
+    - MD (default)
+      - class="h-8 w-8"
+      - error_class="mt-0.5 first-of-type:mt-1.5 text-sm"
+      - <:label class="gap-x-2.5 text-lg">
+      - <:caption class="mt-1.5 text-sm">
+    - LG
+      - class="h-10 w-10"
+      - error_class="mt-0.5 first-of-type:mt-2 text-base"
+      - <:label class="gap-x-3 text-xl">
+      - <:caption class="mt-2 text-base">
+    - XL
+      - class="h-[46px] w-[46px] focus:!ring-4 focus-visible:!ring-offset-4 data-[errors=true]:!border-4"
+      - error_class="mt-0.5 first-of-type:mt-2.5 text-lg"
+      - <:label class="gap-x-3.5 text-2xl">
+      - <:caption class="mt-2.5 text-lg">
+
+  """
+
+  attr :class, :string, default: "h-8 w-8"
+  attr :checked, :boolean
+  attr :disabled, :boolean, default: false
+  attr :error_class, :string, default: @error_default_classes
+  attr :errors, :list, default: []
+  attr :id, :string, required: true
+  attr :name, :string, required: true
+  attr :value, :any
+
+  attr :rest, :global, include: ~w[disabled form required]
+
+  slot :caption do
+    attr :class, :string, doc: @caption_default_classes
+  end
+
+  slot :label do
+    attr :class, :string, doc: @interaction_label_default_classes
+  end
+
+  def checkbox(assigns) do
+    assigns =
+      assign_new(assigns, :checked, fn ->
+        Form.normalize_value("checkbox", assigns[:value])
+      end)
+
+    ~H"""
+    <.input_wrapper disabled={@disabled} error_class={@error_class} errors={@errors} name={@name}>
+      <label :for={label <- @label} class={[label[:class] || interaction_label_default_classes(), "relative flex items-center font-medium"]}>
+        <input type="hidden" name={@name} value="false" disabled={@disabled} />
+        <input
+          type="checkbox"
+          id={@id}
+          name={@name}
+          disabled={@disabled}
+          value="true"
+          checked={@checked}
+          class={[
+            @class,
+            @errors == [] && "border border-gray-400",
+            @errors != [] && "border-2 phx-no-feedback:border-gray-400 border-rose-500",
+            "rounded border-2 bg-white text-indigo-600 outline-none checked:border-4 checked:border-indigo-600 checked:bg-indigo-600 focus:ring-2 focus:ring-transparent focus-visible:ring-purple-500 focus-visible:ring-offset-2 disabled:bg-slate-50"
+          ]}
+          data-errors={to_string(@errors != [])}
+          {@rest}
+        />
+        <span class="cursor-pointer before:absolute before:inset-0"><%= render_slot(label) %></span>
+      </label>
+
+      <:caption :for={caption <- @caption} class={caption[:class]}>
+        <%= render_slot(caption) %>
+      </:caption>
+    </.input_wrapper>
+    """
+  end
+
+  @doc """
+  A radio input component.
+
+  Suggested classes for various sizes:
+    - XS
+      - class="h-[22px] w-[22px] p-[2px]"
+      - error_class="mt-0 first-of-type:mt-1 text-xs"
+      - <:label class="gap-x-1.5 text-sm">
+      - <:caption class="mt-1 text-xs">
+    - SM
+      - class="h-[26px] w-[26px] p-[3px]"
+      - error_class="mt-0 first-of-type:mt-1 text-xs"
+      - <:label class="gap-x-2 text-base">
+      - <:caption class="mt-1 text-xs">
+    - MD (default)
+      - class="h-8 w-8 p-[3px]"
+      - error_class="mt-0.5 first-of-type:mt-1.5 text-sm"
+      - <:label class="gap-x-2.5 text-lg">
+      - <:caption class="mt-1.5 text-sm">
+    - LG
+      - class="h-10 w-10 p-1"
+      - error_class="mt-0.5 first-of-type:mt-2 text-base"
+      - <:label class="gap-x-3 text-xl">
+      - <:caption class="mt-2 text-base">
+    - XL
+      - class="h-[46px] w-[46px] p-1 focus:!ring-4 focus-visible:!ring-offset-4 data-[errors=true]:!border-4"
+      - error_class="mt-0.5 first-of-type:mt-2.5 text-lg"
+      - <:label class="gap-x-3.5 text-2xl">
+      - <:caption class="mt-2.5 text-lg">
+
+  """
+
+  attr :class, :string, default: "h-8 w-8 p-[3px]"
+  attr :checked, :boolean
+  attr :disabled, :boolean, default: false
+  attr :error_class, :string, default: @error_default_classes
+  attr :errors, :list, default: []
+  attr :id, :string, required: true
+  attr :name, :string, required: true
+  attr :value, :any
+
+  attr :rest, :global, include: ~w[disabled form required]
+
+  slot :caption do
+    attr :class, :string, doc: @caption_default_classes
+  end
+
+  slot :label do
+    attr :class, :string, doc: @interaction_label_default_classes
+  end
+
+  def radio(assigns) do
+    assigns = assign_new(assigns, :value, fn -> "on" end)
+
+    ~H"""
+    <.input_wrapper disabled={@disabled} error_class={@error_class} errors={@errors} name={@name}>
+      <label :for={label <- @label} class={[label[:class] || interaction_label_default_classes(), "relative flex items-center font-medium"]}>
+        <input
+          type="radio"
+          id={@id}
+          name={@name}
+          disabled={@disabled}
+          value={@value}
+          checked={@checked}
+          class={[
+            @class,
+            @errors == [] && "border border-gray-400",
+            @errors != [] && "border-2 phx-no-feedback:border-gray-400 border-rose-500",
+            "border-2 bg-white text-indigo-600 outline-none checked:border-4 checked:border-indigo-600 checked:bg-indigo-600 checked:bg-none checked:bg-clip-content hover:checked:border-current focus:ring-2 focus:ring-transparent focus:checked:border-current focus-visible:ring-offset-2 focus-visible:ring-purple-500 disabled:bg-slate-50"
+          ]}
+          data-errors={to_string(@errors != [])}
+          {@rest}
+        />
+        <span class="cursor-pointer before:absolute before:inset-0"><%= render_slot(label) %></span>
+      </label>
+
+      <:caption :for={caption <- @caption} class={caption[:class]}>
+        <%= render_slot(caption) %>
+      </:caption>
+    </.input_wrapper>
+    """
+  end
+
+  @doc """
+  A simple select input component using an HTML Select element.
+
+  Suggested classes for various sizes:
+    - XS
+      - chevron_class="right-2 h-4 w-4"
+      - class="text-sm p-2 pr-[30px] focus:ring-2"
+      - error_class="mt-0 first-of-type:mt-1 text-xs"
+      - <:caption class="mt-1 text-xs">
+      - <:label class="mb-1 text-xs">
+    - SM
+      - chevron_class="right-2 h-4.5 w-4.5"
+      - class="text-base p-2 pr-8 focus:ring-2"
+      - error_class="mt-0 first-of-type:mt-1 text-xs"
+      - <:caption class="mt-1 text-xs">
+      - <:label class="mb-1 text-sm">
+    - MD (default)
+      - chevron_class="right-3 h-4.5 w-4.5"
+      - class="text-lg p-2.5 pr-[34px] focus:ring-2"
+      - error_class="mt-0.5 first-of-type:mt-1.5 text-sm"
+      - <:caption class="mt-1.5 text-sm">
+      - <:label class="mb-1.5 text-sm">
+    - LG
+      - chevron_class="right-3 h-6 w-6"
+      - class="text-xl p-3 pr-11 focus:ring-2"
+      - error_class="mt-0.5 first-of-type:mt-2 text-base"
+      - <:caption class="mt-2 text-base">
+      - <:label class="mb-2 text-base">
+    - XL
+      - chevron_class="right-3.5 h-7 w-7"
+      - class="text-2xl px-3.5 py-3 pr-[52px] focus:ring-4 data-[errors=true]:!border-4"
+      - error_class="mt-0.5 first-of-type:mt-2.5 text-lg"
+      - <:caption class="mt-2.5 text-lg">
+      - <:label class="mb-2.5 text-lg">
+
+  """
+
+  attr :chevron_class, :string, default: "right-3 h-4.5 w-4.5"
+  attr :class, :string, default: "text-lg p-2.5 pr-[34px] focus:ring-2"
+  attr :disabled, :boolean, default: false
+  attr :error_class, :string, default: @error_default_classes
+  attr :errors, :list, default: []
+  attr :id, :string, required: true
+  attr :multiple, :boolean, default: false
+  attr :name, :string, required: true
+  attr :options, :list, required: true, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2"
+  attr :prompt, :string, default: nil
+  attr :value, :any, required: true
+
+  attr :rest, :global, include: ~w[autocomplete form required size]
+
+  slot :caption do
+    attr :class, :string, doc: @caption_default_classes
+  end
+
+  slot :label do
+    attr :class, :string, doc: @label_default_classes
+  end
+
+  def simple_select(assigns) do
+    ~H"""
+    <.input_wrapper disabled={@disabled} error_class={@error_class} errors={@errors} name={@name}>
+      <.label :for={label <- @label} class={label[:class] || label_default_classes()} for={@id}>
+        <%= render_slot(label) %>
+      </.label>
+
+      <div class="relative">
+        <select
+          id={@id}
+          name={@name}
+          class={[
+            @class,
+            @errors == [] && "border border-gray-400",
+            @errors != [] && "border-2 phx-no-feedback:border-gray-400 border-rose-500",
+            "peer min-w-[150px] w-full max-w-full appearance-none overflow-hidden whitespace-nowrap rounded border bg-white bg-none font-medium outline-none transition focus:border-transparent focus:ring-indigo-600 disabled:bg-slate-50 disabled:text-gray-500"
+          ]}
+          multiple={@multiple}
+          disabled={@disabled}
+          data-errors={to_string(@errors != [])}
+          {@rest}
+        >
+          <option :if={@prompt} value=""><%= @prompt %></option>
+          <%= Form.options_for_select(@options, @value) %>
+        </select>
+
+        <.icon
+          name="hero-chevron-down"
+          class={[
+            @chevron_class,
+            "pointer-events-none absolute inset-y-0 my-auto peer-disabled:text-gray-500"
+          ]}
+        />
+      </div>
+
+      <:caption :for={caption <- @caption} class={caption[:class]}>
+        <%= render_slot(caption) %>
+      </:caption>
+    </.input_wrapper>
+    """
+  end
+
+  @doc """
+  A single select input component using a `combobox` text input and a `listbox` of select options.
+
+  Suggested classes for various sizes:
+    - XS
+      - chevron_class="right-2 h-4 w-4"
+      - class="text-sm p-2 pr-[30px] focus:ring-2"
+      - error_class="mt-0 first-of-type:mt-1 text-xs"
+      - option_list_class="text-xs"
+      - <:caption class="mt-1 text-xs">
+      - <:label class="mb-1 text-xs">
+      - <:option class="px-3 py-2">
+    - SM
+      - chevron_class="right-2 h-4.5 w-4.5"
+      - class="text-base p-2 pr-8 focus:ring-2"
+      - error_class="mt-0.5 first-of-type:mt-1 text-xs"
+      - option_list_class="text-base"
+      - <:label class="mb-1 text-sm">
+      - <:caption class="mt-1 text-xs">
+      - <:option class="px-3 py-2">
+    - MD (default)
+      - chevron_class="right-3 h-4.5 w-4.5"
+      - class="text-lg p-2.5 pr-[34px] focus:ring-2"
+      - error_class="mt-0.5 first-of-type:mt-1.5 text-sm"
+      - option_list_class="text-lg"
+      - <:label class="mb-1.5 text-sm">
+      - <:caption class="mt-1.5 text-sm">
+      - <:option class="px-4 py-3.5">
+    - LG
+      - chevron_class="right-3 h-6 w-6"
+      - class="text-xl p-3 pr-11 focus:ring-2"
+      - error_class="mt-0.5 first-of-type:mt-2 text-base"
+      - option_list_class="text-xl"
+      - <:label class="mb-2 text-base">
+      - <:caption class="mt-2 text-base">
+      - <:option class="px-5 py-4">
+    - XL
+      - chevron_class="right-3.5 h-7 w-7"
+      - class="text-2xl px-3.5 py-3 pr-[52px] focus:ring-4 data-[errors=true]:!border-4"
+      - error_class="mt-0.5 first-of-type:mt-2.5 text-lg"
+      - option_list_class="text-2xl"
+      - <:label class="mb-2.5 text-lg">
+      - <:caption class="mt-2.5 text-lg">
+      - <:option class="px-8 py-5">
+
+  """
+
+  attr :chevron_class, :string, default: "right-3 h-4.5 w-4.5"
+  attr :class, :string, default: "text-lg p-2.5 pr-[34px] focus:ring-2"
+  attr :disabled, :boolean, default: false
+  attr :error_class, :string, default: @error_default_classes
+  attr :errors, :list, default: []
+  attr :id, :string, required: true
+  attr :name, :string, required: true
+  attr :option_list_class, :string, default: "text-lg"
+  attr :option_list_id, :string, required: true
+  attr :value, :any, required: true
+  attr :wrapper_id, :string
+
+  attr :rest, :global, include: ~w[
+    autocapitalize
+    autocomplete
+    autocorrect
+    dirname
+    form
+    list
+    maxlength
+    minlength
+    pattern
+    placeholder
+    readonly
+    required
+    size
+    spellcheck
+  ]
+
+  slot :caption do
+    attr :class, :string, doc: @caption_default_classes
+  end
+
+  slot :label do
+    attr :class, :string, doc: @label_default_classes
+    attr :id, :string, required: true
+  end
+
+  slot :option, required: true do
+    attr :class, :string, doc: @select_option_default_classes
+    attr :disabled, :boolean
+    attr :value, :string, required: true
+  end
+
+  def single_select(assigns) do
+    assigns = assign_new(assigns, :wrapper_id, fn -> "#{assigns.id}-wrapper" end)
+
+    ~H"""
+    <.input_wrapper
+      disabled={@disabled}
+      error_class={@error_class}
+      errors={@errors}
+      name={@name}
+      id={@wrapper_id}
+      data-state="closed"
+      data-close-select={
+        JS.add_class("hidden", to: "##{@wrapper_id}[data-state=open] ##{@option_list_id}")
+        |> JS.set_attribute({"aria-expanded", "false"}, to: "##{@wrapper_id}[data-state=open] ##{@id}")
+        |> JS.set_attribute({"aria-hidden", "true"}, to: "##{@wrapper_id}[data-state=open] ##{@option_list_id}")
+        |> JS.set_attribute({"data-state", "closed"}, to: "##{@wrapper_id}")
+      }
+      data-toggle-select={
+        JS.add_class("hidden", to: "##{@wrapper_id}[data-state=open] ##{@option_list_id}")
+        |> JS.remove_class("hidden", to: "##{@wrapper_id}[data-state=closed] ##{@option_list_id}")
+        |> JS.toggle_attribute({"aria-expanded", "true", "false"}, to: "##{@id}")
+        |> JS.set_attribute({"aria-hidden", "true"}, to: "##{@wrapper_id}[data-state=open] ##{@option_list_id}")
+        |> JS.remove_attribute("aria-hidden", to: "##{@wrapper_id}[data-state=closed] ##{@option_list_id}")
+        |> JS.toggle_attribute({"data-state", "open", "closed"}, to: "##{@wrapper_id}")
+        |> JS.focus_first(to: "##{@wrapper_id}[data-state=open] ##{@option_list_id}")
+      }
+      phx-click-away={JS.exec("data-close-select")}
+    >
+      <%= for label <- @label do %>
+        <.label id={label[:id]} class={[label[:class] || label_default_classes(), "font-semibold"]} for={@id}>
+          <%= render_slot(label) %>
+        </.label>
+
+        <div class="relative" phx-click={if !@disabled, do: JS.exec("data-toggle-select", to: "##{@wrapper_id}")}>
+          <input
+            readonly
+            name={@name}
+            value={@value}
+            aria-haspopup="listbox"
+            aria-expanded="false"
+            role="combobox"
+            aria-controls={@option_list_id}
+            class={[
+              @class,
+              @errors == [] && "border border-gray-400",
+              @errors != [] && "border-2 phx-no-feedback:border-gray-400 border-rose-500",
+              "min-w-[150px] w-full max-w-full appearance-none cursor-default overflow-hidden whitespace-nowrap rounded bg-white font-medium outline-none transition placeholder:text-zinc-300 focus:border-transparent focus:ring-indigo-600 disabled:bg-slate-50 disabled:text-zinc-300"
+            ]}
+            id={@id}
+            disabled={@disabled}
+            data-errors={to_string(@errors != [])}
+            {@rest}
+          />
+
+          <.icon
+            name="hero-chevron-down"
+            class={[
+              @chevron_class,
+              "pointer-events-none absolute inset-y-0 my-auto peer-disabled:text-gray-500"
+            ]}
+            role="presentation"
+          />
+        </div>
+
+        <.focus_wrap
+          class="relative z-10 pt-0.5"
+          id={"#{@option_list_id}-wrapper"}
+          phx-key="escape"
+          phx-window-keydown={JS.exec("data-close-select", to: "##{@wrapper_id}")}
+        >
+          <ul
+            id={@option_list_id}
+            aria-hidden="true"
+            aria-labelledby={label[:id]}
+            role="listbox"
+            class={[
+              @option_list_class,
+              "hidden absolute inset-x-0 font-sans overflow-hidden rounded-b-lg bg-white font-medium text-slate-800 shadow-lg focus-within:overflow-visible space-y-0.5"
+            ]}
+          >
+            <li :for={option <- @option} role="option">
+              <button
+                type="button"
+                class={[
+                  option[:class] || select_option_default_classes(),
+                  "flex w-full rounded px-3 py-2 outline-none hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-indigo-600 disabled:bg-slate-50 disabled:text-zinc-300"
+                ]}
+                disabled={option[:disabled]}
+                phx-click={
+                  JS.set_attribute({"value", option[:value]}, to: "##{@id}")
+                  |> JS.exec("data-close-select", to: "##{@wrapper_id}")
+                }
+              >
+                <%= option[:value] %>
+              </button>
+            </li>
+          </ul>
+        </.focus_wrap>
+      <% end %>
+
+      <:caption :for={caption <- @caption} class={caption[:class]}>
+        <%= render_slot(caption) %>
+      </:caption>
+    </.input_wrapper>
+    """
+  end
+
+  @doc """
+  A slider range input component.
+
+  Suggested classes for various sizes:
+    - XS
+      - class="[--slider-thumb-height:22px] [--slider-thumb-width:30px] [--slider-track-height:6px]"
+      - error_class="mt-0 first-of-type:mt-1 text-xs"
+      - <:label class="gap-x-1.5 text-sm">
+      - <:caption class="mt-1 text-xs">
+    - SM
+      - class="[--slider-thumb-height:28px] [--slider-thumb-width:38px] [--slider-track-height:8px]"
+      - error_class="mt-0 first-of-type:mt-1 text-xs"
+      - <:label class="gap-x-2 text-base">
+      - <:caption class="mt-1 text-xs">
+    - MD (default)
+      - class="[--slider-thumb-height:36px] [--slider-thumb-width:48px] [--slider-track-height:10px]"
+      - error_class="mt-0.5 first-of-type:mt-1.5 text-sm"
+      - <:label class="gap-x-2.5 text-lg">
+      - <:caption class="mt-1.5 text-sm">
+    - LG
+      - class="[--slider-thumb-height:42px] [--slider-thumb-width:56px] [--slider-track-height:12px]"
+      - error_class="mt-0.5 first-of-type:mt-2 text-base"
+      - <:label class="gap-x-3 text-xl">
+      - <:caption class="mt-2 text-base">
+    - XL
+      - class="[--slider-thumb-height:50px] [--slider-thumb-width:68px] [--slider-track-height:14px] [--slider-thumb-focus-ring-width:4px]"
+      - error_class="mt-0.5 first-of-type:mt-2.5 text-lg"
+      - <:label class="gap-x-3.5 text-2xl">
+      - <:caption class="mt-2.5 text-lg">
+
+  """
+
+  attr :class, :string, default: "[--slider-thumb-height:36px] [--slider-thumb-width:48px] [--slider-track-height:10px]"
+  attr :disabled, :boolean, default: false
+  attr :error_class, :string, default: @error_default_classes
+  attr :errors, :list, default: []
+  attr :id, :string, required: true
+  attr :name, :string, required: true
+  attr :value, :any
+
+  attr :rest, :global, include: ~w[
+    form
+    disabled
+    list
+    max
+    min
+    orient
+    step
+  ]
+
+  slot :caption do
+    attr :class, :string, doc: @caption_default_classes
+  end
+
+  slot :label do
+    attr :class, :string, doc: @interaction_label_default_classes
+  end
+
+  def slider(assigns) do
+    ~H"""
+    <.input_wrapper disabled={@disabled} error_class={@error_class} errors={@errors} name={@name}>
+      <label
+        :for={label <- @label}
+        class={[
+          label[:class] || interaction_label_default_classes(),
+          "relative flex flex-wrap gap-4 items-center font-medium hover:cursor-pointer"
+        ]}
+      >
+        <input
+          type="range"
+          id={@id}
+          name={@name}
+          disabled={@disabled}
+          class={[
+            @class,
+            slider_input_base()
+          ]}
+          value={@value}
+          data-errors={to_string(@errors != [])}
+          {@rest}
+        />
+        <%= render_slot(label) %>
+      </label>
+
+      <:caption :for={caption <- @caption} class={caption[:class]}>
+        <%= render_slot(caption) %>
+      </:caption>
+    </.input_wrapper>
+    """
+  end
+
+  @doc """
+  A textarea input component.
+
+  Suggested classes for various sizes:
+    - XS
+      - class="text-sm p-2 placeholder:text-xs focus:ring-2"
+      - error_class="mt-0 first-of-type:mt-1 text-xs"
+      - <:label class="mb-1 text-xs">
+      - <:caption class="mt-1 text-xs">
+    - SM
+      - class="text-base p-2 placeholder:text-sm focus:ring-2"
+      - error_class="mt-0 first-of-type:mt-1 text-xs"
+      - <:label class="mb-1 text-sm">
+      - <:caption class="mt-1 text-xs">
+    - MD (default)
+      - class="text-lg p-2.5 placeholder:text-base focus:ring-2"
+      - error_class="mt-0.5 first-of-type:mt-1.5 text-sm"
+      - <:label class="mb-1.5 text-sm">
+      - <:caption class="mt-1.5 text-sm">
+    - LG
+      - class="text-xl p-3 placeholder:text-lg focus:ring-2"
+      - error_class="mt-0.5 first-of-type:mt-2 text-base"
+      - <:label class="mb-2 text-base">
+      - <:caption class="mt-2 text-base">
+    - XL
+      - class="text-2xl px-3.5 py-3 placeholder:text-2xl focus:ring-4 data-[errors=true]:!border-4"
+      - error_class="mt-0.5 first-of-type:mt-2.5 text-lg"
+      - <:label class="mb-2.5 text-lg">
+      - <:caption class="mt-2.5 text-lg">
+
+  """
+
+  attr :class, :string, default: @input_default_classes
+  attr :disabled, :boolean, default: false
+  attr :error_class, :string, default: @error_default_classes
+  attr :errors, :list, default: []
+  attr :id, :string, required: true
+  attr :name, :string, required: true
+  attr :value, :string, required: true
+
+  attr :rest, :global, include: ~w[
+    autocapitalize
+    autocomplete
+    autocorrect
+    cols
+    dirname
+    disabled
+    form
+    maxlength
+    minlength
+    placeholder
+    readonly
+    required
+    rows
+    spellcheck
+    wrap
+  ]
+
+  slot :caption do
+    attr :class, :string, doc: @caption_default_classes
+  end
+
+  slot :label do
+    attr :class, :string, doc: @label_default_classes
+  end
+
+  def textarea(assigns) do
+    ~H"""
+    <.input_wrapper disabled={@disabled} error_class={@error_class} errors={@errors} name={@name}>
+      <.label :for={label <- @label} class={label[:class] || label_default_classes()} for={@id}>
+        <%= render_slot(label) %>
+      </.label>
+
+      <textarea
+        id={@id}
+        name={@name}
+        disabled={@disabled}
+        class={[
+          @class,
+          @errors == [] && "border border-gray-400",
+          @errors != [] && "border-2 phx-no-feedback:border-gray-400 border-rose-500",
+          input_base_classes()
+        ]}
+        data-errors={to_string(@errors != [])}
+        {@rest}
+      ><%= Form.normalize_value("textarea", @value) %></textarea>
+
+      <:caption :for={caption <- @caption} class={caption[:class]}>
+        <%= render_slot(caption) %>
+      </:caption>
+    </.input_wrapper>
+    """
+  end
+
+  @doc """
+  A text input component.
+
+  Suggested classes for various sizes:
+    - XS
+      - class="text-sm p-2 placeholder:text-xs focus:ring-2"
+      - error_class="mt-0 first-of-type:mt-1 text-xs"
+      - <:label class="mb-1 text-xs">
+      - <:caption class="mt-1 text-xs">
+    - SM
+      - class="text-base p-2 placeholder:text-sm focus:ring-2"
+      - error_class="mt-0 first-of-type:mt-1 text-xs"
+      - <:label class="mb-1 text-sm">
+      - <:caption class="mt-1 text-xs">
+    - MD (default)
+      - class="text-lg p-2.5 placeholder:text-base focus:ring-2"
+      - error_class="mt-0.5 first-of-type:mt-1.5 text-sm"
+      - <:label class="mb-1.5 text-sm">
+      - <:caption class="mt-1.5 text-sm">
+    - LG
+      - class="text-xl p-3 placeholder:text-lg focus:ring-2"
+      - error_class="mt-0.5 first-of-type:mt-2 text-base"
+      - <:label class="mb-2 text-base">
+      - <:caption class="mt-2 text-base">
+    - XL
+      - class="text-2xl px-3.5 py-3 placeholder:text-2xl focus:ring-4 data-[errors=true]:!border-4"
+      - error_class="mt-0.5 first-of-type:mt-2.5 text-lg"
+      - <:label class="mb-2.5 text-lg">
+      - <:caption class="mt-2.5 text-lg">
+
+  """
+
+  attr :class, :string, default: @input_default_classes
+  attr :disabled, :boolean, default: false
+  attr :error_class, :string, default: @error_default_classes
+  attr :errors, :list, default: []
+  attr :id, :string, required: true
+  attr :name, :string, required: true
+  attr :value, :string, required: true
+
+  attr :rest, :global, include: ~w[
+    autocapitalize
+    autocomplete
+    autocorrect
+    dirname
+    disabled
+    form
+    list
+    maxlength
+    minlength
+    pattern
+    placeholder
+    readonly
+    required
+    size
+    spellcheck
+  ]
+
+  slot :caption do
+    attr :class, :string, doc: @caption_default_classes
+  end
+
+  slot :label do
+    attr :class, :string, doc: @label_default_classes
+  end
+
+  slot :prefix
+  slot :suffix
+
+  def textfield(assigns) do
+    assigns
+    |> assign(:type, "text")
+    |> generic_input()
+  end
+
+  attr :class, :string, default: @input_default_classes
+  attr :disabled, :boolean, default: false
+  attr :error_class, :string, default: @error_default_classes
+  attr :errors, :list, default: []
+  attr :id, :string, required: true
+  attr :name, :string, required: true
+  attr :value, :any, required: true
+
+  attr :type, :string, required: true, values: ~w[
+    color
+    date
+    datetime-local
+    email
+    file
+    hidden
+    month
+    number
+    password
+    range
+    search
+    tel
+    text
+    time
+    url
+    week
+  ]
+
+  attr :rest, :global, include: ~w[
+    accept
+    autocapitalize
+    autocomplete
+    autocorrect
+    capture
+    dirname
+    disabled
+    form
+    list
+    max
+    maxlength
+    min
+    minlength
+    multiple
+    pattern
+    placeholder
+    readonly
+    required
+    size
+    spellcheck
+    step
+  ]
+
+  slot :caption do
+    attr :class, :string, doc: @caption_default_classes
+  end
+
+  slot :label do
+    attr :class, :string, doc: @label_default_classes
+  end
+
+  slot :prefix
+  slot :suffix
+
+  def generic_input(assigns) do
+    ~H"""
+    <.input_wrapper disabled={@disabled} error_class={@error_class} errors={@errors} name={@name}>
+      <.label :for={label <- @label} class={label[:class] || label_default_classes()} for={@id}>
+        <%= render_slot(label) %>
+      </.label>
+
+      <div class="relative">
+        <%= render_slot(@prefix) %>
+
+        <input
+          id={@id}
+          type={@type}
+          name={@name}
+          value={Form.normalize_value(@type, @value)}
+          disabled={@disabled}
+          class={[
+            @class,
+            @errors == [] && "border border-gray-400",
+            @errors != [] && "border-2 phx-no-feedback:border-gray-400 border-rose-500",
+            input_base_classes()
+          ]}
+          data-errors={to_string(@errors != [])}
+          {@rest}
+        />
+
+        <%= render_slot(@suffix) %>
+      </div>
+
+      <:caption :for={caption <- @caption} class={caption[:class]}>
+        <%= render_slot(caption) %>
+      </:caption>
+    </.input_wrapper>
+    """
+  end
+
+  attr :class, :any, default: @label_default_classes
+  attr :for, :string, default: nil
+  attr :id, :string, default: nil
+
+  slot :inner_block, required: true
+
+  def label(assigns) do
+    ~H"""
+    <label for={@for} id={@id} class={[@class || label_default_classes(), "font-semibold"]}>
+      <%= render_slot(@inner_block) %>
+    </label>
+    """
+  end
+
+  attr :class, :string, default: @error_default_classes
+
+  slot :inner_block, required: true
+
+  def error(assigns) do
+    ~H"""
+    <p class={[@class, "font-sans text-[--sui-form-text-error] font-medium phx-no-feedback:hidden"]}>
+      <%= render_slot(@inner_block) %>
+    </p>
+    """
+  end
+
+  attr :disabled, :boolean, default: false
+  attr :error_class, :string, default: @error_default_classes
+  attr :errors, :list, default: []
+  attr :name, :string, required: true
+
+  attr :rest, :global
+
+  slot :caption do
+    attr :class, :string, doc: @caption_default_classes
+  end
+
+  slot :inner_block, required: true
+
+  defp input_wrapper(assigns) do
+    ~H"""
+    <div
+      phx-feedback-for={@name}
+      class={[
+        "font-sans flex flex-col",
+        if(@disabled, do: "text-[--sui-form-text-disabled]", else: "text-[--sui-form-text]")
+      ]}
+      {@rest}
+    >
+      <%= render_slot(@inner_block) %>
+
+      <p :for={caption <- @caption} class={[caption[:class] || caption_default_classes(), "font-sans font-medium"]}>
+        <%= render_slot(caption) %>
+      </p>
+
+      <.error :for={msg <- @errors} class={@error_class}>
+        <%= msg %>
+      </.error>
+    </div>
+    """
+  end
+end
diff --git a/sources/lib/components/station_ui/html/legacy_core_components.ex b/sources/lib/components/station_ui/html/legacy_core_components.ex
new file mode 100644
index 0000000..ba0c897
--- /dev/null
+++ b/sources/lib/components/station_ui/html/legacy_core_components.ex
@@ -0,0 +1,300 @@
+defmodule StationUI.HTML.LegacyCoreComponents do
+  @moduledoc """
+  These functions are copied directly from CoreComponents and should be reviewed/replaced
+  """
+  use Phoenix.Component
+
+  import StationUI.HTML.Icons, only: [icon: 1]
+
+  alias Phoenix.LiveView.JS
+
+  @doc """
+  Renders flash notices.
+
+  ## Examples
+
+      <.flash kind={:info} flash={@flash} />
+      <.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>
+  """
+  attr :id, :string, doc: "the optional id of flash container"
+  attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
+  attr :title, :string, default: nil
+  attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
+  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"
+
+  slot :inner_block, doc: "the optional inner block that renders the flash message"
+
+  def flash(assigns) do
+    assigns = assign_new(assigns, :id, fn -> "flash-#{assigns.kind}" end)
+
+    ~H"""
+    <div
+      :if={msg = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)}
+      id={@id}
+      phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
+      role="alert"
+      class={[
+        "fixed top-2 right-2 mr-2 w-80 sm:w-96 z-50 rounded-lg p-3 ring-1",
+        @kind == :info && "bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900",
+        @kind == :error && "bg-rose-50 text-rose-900 shadow-md ring-rose-500 fill-rose-900"
+      ]}
+      {@rest}
+    >
+      <p :if={@title} class="flex items-center gap-1.5 text-sm font-semibold leading-6">
+        <.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-4 w-4" />
+        <.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" />
+        <%= @title %>
+      </p>
+      <p class="mt-2 text-sm leading-5"><%= msg %></p>
+      <button type="button" class="group absolute top-1 right-1 p-2" aria-label="close">
+        <.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
+      </button>
+    </div>
+    """
+  end
+
+  @doc """
+  Shows the flash group with standard titles and content.
+
+  ## Examples
+
+      <.flash_group flash={@flash} />
+  """
+  attr :flash, :map, required: true, doc: "the map of flash messages"
+  attr :id, :string, default: "flash-group", doc: "the optional id of flash container"
+
+  def flash_group(assigns) do
+    ~H"""
+    <div id={@id}>
+      <.flash kind={:info} title="Success!" flash={@flash} />
+      <.flash kind={:error} title="Error!" flash={@flash} />
+      <.flash
+        id="client-error"
+        kind={:error}
+        title="We can't find the internet"
+        phx-disconnected={show(".phx-client-error #client-error")}
+        phx-connected={hide("#client-error")}
+        hidden
+      >
+        <%= "Attempting to reconnect" %>
+        <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
+      </.flash>
+
+      <.flash
+        id="server-error"
+        kind={:error}
+        title="Something went wrong!"
+        phx-disconnected={show(".phx-server-error #server-error")}
+        phx-connected={hide("#server-error")}
+        hidden
+      >
+        <%= "Hang in there while we get back on track" %>
+        <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
+      </.flash>
+    </div>
+    """
+  end
+
+  def hide(js \\ %JS{}, selector) do
+    JS.hide(js,
+      to: selector,
+      time: 200,
+      transition:
+        {"transition-all transform ease-in duration-200", "opacity-100 translate-y-0 sm:scale-100",
+         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
+    )
+  end
+
+  def show(js \\ %JS{}, selector) do
+    JS.show(js,
+      to: selector,
+      transition:
+        {"transition-all transform ease-out duration-300", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+         "opacity-100 translate-y-0 sm:scale-100"}
+    )
+  end
+
+  @doc """
+  Renders a simple form.
+
+  ## Examples
+
+      <.simple_form for={@form} phx-change="validate" phx-submit="save">
+        <.input field={@form[:email]} label="Email"/>
+        <.input field={@form[:username]} label="Username" />
+        <:actions>
+          <.button>Save</.button>
+        </:actions>
+      </.simple_form>
+  """
+  attr :for, :any, required: true, doc: "the datastructure for the form"
+  attr :as, :any, default: nil, doc: "the server side parameter to collect all input under"
+
+  attr :rest, :global,
+    include: ~w(autocomplete name rel action enctype method novalidate target multipart),
+    doc: "the arbitrary HTML attributes to apply to the form tag"
+
+  slot :inner_block, required: true
+  slot :actions, doc: "the slot for form actions, such as a submit button"
+
+  def simple_form(assigns) do
+    ~H"""
+    <.form :let={f} for={@for} as={@as} {@rest}>
+      <div class="mt-10 space-y-8 bg-white">
+        <%= render_slot(@inner_block, f) %>
+        <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
+          <%= render_slot(action, f) %>
+        </div>
+      </div>
+    </.form>
+    """
+  end
+
+  @doc """
+  Renders a header with title.
+  """
+  attr :class, :string, default: nil
+
+  slot :inner_block, required: true
+  slot :subtitle
+  slot :actions
+
+  def header(assigns) do
+    ~H"""
+    <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
+      <div>
+        <h1 class="text-lg font-semibold leading-8 text-zinc-800">
+          <%= render_slot(@inner_block) %>
+        </h1>
+        <p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">
+          <%= render_slot(@subtitle) %>
+        </p>
+      </div>
+      <div class="flex-none"><%= render_slot(@actions) %></div>
+    </header>
+    """
+  end
+
+  @doc ~S"""
+  Renders a table with generic styling.
+
+  ## Examples
+
+      <.table id="users" rows={@users}>
+        <:col :let={user} label="id"><%= user.id %></:col>
+        <:col :let={user} label="username"><%= user.username %></:col>
+      </.table>
+  """
+  attr :id, :string, required: true
+  attr :rows, :list, required: true
+  attr :row_id, :any, default: nil, doc: "the function for generating the row id"
+  attr :row_click, :any, default: nil, doc: "the function for handling phx-click on each row"
+
+  attr :row_item, :any,
+    default: &Function.identity/1,
+    doc: "the function for mapping each row before calling the :col and :action slots"
+
+  slot :col, required: true do
+    attr :label, :string
+  end
+
+  slot :action, doc: "the slot for showing user actions in the last table column"
+
+  def table(assigns) do
+    assigns =
+      with %{rows: %Phoenix.LiveView.LiveStream{}} <- assigns do
+        assign(assigns, row_id: assigns.row_id || fn {id, _item} -> id end)
+      end
+
+    ~H"""
+    <div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0">
+      <table class="w-[40rem] mt-11 sm:w-full">
+        <thead class="text-left text-sm leading-6 text-zinc-500">
+          <tr>
+            <th :for={col <- @col} class="p-0 pr-6 pb-4 font-normal"><%= col[:label] %></th>
+            <th :if={@action != []} class="relative p-0 pb-4">
+              <span class="sr-only"><%= "Actions" %></span>
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          id={@id}
+          phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
+          class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-zinc-700"
+        >
+          <tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-zinc-50">
+            <td
+              :for={{col, i} <- Enum.with_index(@col)}
+              phx-click={@row_click && @row_click.(row)}
+              class={["relative p-0", @row_click && "hover:cursor-pointer"]}
+            >
+              <div class="block py-4 pr-6">
+                <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
+                <span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
+                  <%= render_slot(col, @row_item.(row)) %>
+                </span>
+              </div>
+            </td>
+            <td :if={@action != []} class="relative w-14 p-0">
+              <div class="relative whitespace-nowrap py-4 text-right text-sm font-medium">
+                <span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-zinc-50 sm:rounded-r-xl" />
+                <span :for={action <- @action} class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700">
+                  <%= render_slot(action, @row_item.(row)) %>
+                </span>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    """
+  end
+
+  @doc """
+  Renders a data list.
+
+  ## Examples
+
+      <.list>
+        <:item title="Title"><%= @post.title %></:item>
+        <:item title="Views"><%= @post.views %></:item>
+      </.list>
+  """
+  slot :item, required: true do
+    attr :title, :string, required: true
+  end
+
+  def list(assigns) do
+    ~H"""
+    <div class="mt-14">
+      <dl class="-my-4 divide-y divide-zinc-100">
+        <div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
+          <dt class="w-1/4 flex-none text-zinc-500"><%= item.title %></dt>
+          <dd class="text-zinc-700"><%= render_slot(item) %></dd>
+        </div>
+      </dl>
+    </div>
+    """
+  end
+
+  @doc """
+  Renders a back navigation link.
+
+  ## Examples
+
+      <.back navigate={~p"/posts"}>Back to posts</.back>
+  """
+  attr :navigate, :any, required: true
+  slot :inner_block, required: true
+
+  def back(assigns) do
+    ~H"""
+    <div class="mt-16">
+      <.link navigate={@navigate} class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700">
+        <.icon name="hero-arrow-left-solid" class="h-3 w-3" />
+        <%= render_slot(@inner_block) %>
+      </.link>
+    </div>
+    """
+  end
+end
diff --git a/sources/lib/components/station_ui/html/modals.ex b/sources/lib/components/station_ui/html/modals.ex
new file mode 100644
index 0000000..4a33eb2
--- /dev/null
+++ b/sources/lib/components/station_ui/html/modals.ex
@@ -0,0 +1,162 @@
+defmodule StationUI.HTML.Modals do
+  use Phoenix.Component
+
+  import StationUI.HTML.Buttons
+  import StationUI.HTML.Icons, only: [icon: 1]
+
+  alias Phoenix.LiveView.JS
+
+  @doc """
+  The modals component renders a block of content that displays on top of the page. The modal can be dismissed by clicking on the close button or hitting ESC on the keyboard.
+
+  """
+
+  attr :id, :string, required: true
+  attr :size, :string, default: "md", values: ["xs", "sm", "md", "lg", "xl"]
+  attr :show, :boolean, default: false
+  attr :show_backdrop, :boolean, default: true
+  attr :on_cancel, JS, default: %JS{}
+
+  slot :inner_block, required: true
+  slot :title
+  slot :subtitle
+
+  slot :footer do
+    attr :variant, :string, values: ["right", "justified", "full", "stacked"]
+  end
+
+  def modal(assigns) do
+    ~H"""
+    <div
+      id={@id}
+      phx-mounted={@show && show_modal(@id)}
+      phx-remove={hide_modal(@id)}
+      data-cancel={JS.exec(@on_cancel, "phx-remove")}
+      class={[
+        "fixed inset-0 z-50 hidden items-center justify-center p-4",
+        @show_backdrop && "bg-gray-900/40"
+      ]}
+    >
+      <.focus_wrap
+        id={"#{@id}-focus-wrap"}
+        class={[
+          "font-sans w-full rounded-md bg-white text-slate-800",
+          focus_wrap_size_classes(@size),
+          focus_wrap_drop_shadow_classes(@size, @show_backdrop)
+        ]}
+        phx-window-keydown={JS.exec("data-cancel", to: "##{@id}")}
+        phx-key="escape"
+        phx-click-away={JS.exec("data-cancel", to: "##{@id}")}
+      >
+        <section
+          role="dialog"
+          class={[
+            "flex w-full flex-col",
+            container_size_classes(@size)
+          ]}
+          aria-modal="true"
+          aria-labelledby={"##{@id}-title"}
+        >
+          <header class={["flex items-start gap-x-2", header_size_classes(@size)]}>
+            <div class="grow text-center">
+              <h1 :if={@title} id={"#{@id}-title"} class={["font-bold", title_size_classes(@size)]}>
+                <%= render_slot(@title) %>
+              </h1>
+              <h2 :if={@subtitle} class={["font-medium", subtitle_size_classes(@size)]}>
+                <%= render_slot(@subtitle) %>
+              </h2>
+            </div>
+
+            <.button type="button" class="sui-secondary w-[42px] h-[42px] rounded-full" aria-label="Close" phx-click={@on_cancel}>
+              <.icon name="hero-x-mark" class="h-6 w-6 shrink-0" />
+            </.button>
+          </header>
+
+          <div id={"#{@id}-content"} class={["w-full overflow-y-auto", content_size_classes(@size)]}>
+            <%= render_slot(@inner_block) %>
+          </div>
+
+          <div
+            :for={footer <- @footer}
+            class={[
+              "flex",
+              footer_size_classes(@size),
+              footer_variant_classes(footer.variant)
+            ]}
+          >
+            <%= render_slot(@footer) %>
+          </div>
+        </section>
+      </.focus_wrap>
+    </div>
+    """
+  end
+
+  def show_modal(js \\ %JS{}, id) when is_binary(id) do
+    js
+    |> JS.show(to: "##{id}", display: "flex")
+    |> JS.add_class("overflow-hidden", to: "body")
+    |> JS.focus_first(to: "##{id}-content")
+  end
+
+  def hide_modal(js \\ %JS{}, id) do
+    js
+    |> JS.hide(to: "##{id}")
+    |> JS.remove_class("overflow-hidden", to: "body")
+    |> JS.pop_focus()
+  end
+
+  defp focus_wrap_size_classes("xs"), do: "min-w-[280px] max-w-screen-sm p-5"
+  defp focus_wrap_size_classes("sm"), do: "min-w-[280px] max-w-screen-md p-[22px]"
+  defp focus_wrap_size_classes("md"), do: "min-w-[320px] max-w-screen-md p-[28px]"
+  defp focus_wrap_size_classes("lg"), do: "min-w-[400px] max-w-screen-lg p-8"
+  defp focus_wrap_size_classes("xl"), do: "min-w-[400px] max-w-screen-xl p-8"
+
+  defp focus_wrap_drop_shadow_classes(_, true), do: nil
+  defp focus_wrap_drop_shadow_classes("xs", false), do: "drop-shadow-xl"
+  defp focus_wrap_drop_shadow_classes("sm", false), do: "drop-shadow-xl"
+  defp focus_wrap_drop_shadow_classes("md", false), do: "drop-shadow-xl"
+  defp focus_wrap_drop_shadow_classes("lg", false), do: "drop-shadow-2xl"
+  defp focus_wrap_drop_shadow_classes("xl", false), do: "drop-shadow-2xl"
+
+  defp container_size_classes("xs"), do: "gap-y-6"
+  defp container_size_classes("sm"), do: "gap-y-6"
+  defp container_size_classes("md"), do: "gap-y-6"
+  defp container_size_classes("lg"), do: "gap-y-8"
+  defp container_size_classes("xl"), do: "gap-y-[38px]"
+
+  defp header_size_classes("xs"), do: "-mr-2.5"
+  defp header_size_classes("sm"), do: "-mr-2.5"
+  defp header_size_classes("md"), do: "-mr-3.5"
+  defp header_size_classes("lg"), do: "-mr-5"
+  defp header_size_classes("xl"), do: "-mr-5"
+
+  defp title_size_classes("xs"), do: "mb-2 text-base"
+  defp title_size_classes("sm"), do: "mb-2.5 text-xl"
+  defp title_size_classes("md"), do: "mb-3 text-3xl"
+  defp title_size_classes("lg"), do: "mb-4 text-5xl"
+  defp title_size_classes("xl"), do: "mb-6 text-7xl"
+
+  defp subtitle_size_classes("xs"), do: "text-sm"
+  defp subtitle_size_classes("sm"), do: "text-base"
+  defp subtitle_size_classes("md"), do: "text-lg"
+  defp subtitle_size_classes("lg"), do: "text-2xl"
+  defp subtitle_size_classes("xl"), do: "text-4xl"
+
+  defp content_size_classes("xs"), do: "max-h-[180px]"
+  defp content_size_classes("sm"), do: "max-h-[180px]"
+  defp content_size_classes("md"), do: "max-h-[280px]"
+  defp content_size_classes("lg"), do: "max-h-[320px]"
+  defp content_size_classes("xl"), do: "max-h-[400px]"
+
+  defp footer_size_classes("xs"), do: "gap-3"
+  defp footer_size_classes("sm"), do: "gap-4"
+  defp footer_size_classes("md"), do: "gap-5"
+  defp footer_size_classes("lg"), do: "gap-6"
+  defp footer_size_classes("xl"), do: "gap-6"
+
+  defp footer_variant_classes("justified"), do: "flex-wrap items-center justify-between"
+  defp footer_variant_classes("full"), do: "grid grid-cols-1 md:grid-cols-2"
+  defp footer_variant_classes("stacked"), do: "flex-col items-start"
+  defp footer_variant_classes(_), do: "flex-wrap items-center justify-end"
+end
diff --git a/sources/lib/components/station_ui/html/navbar.ex b/sources/lib/components/station_ui/html/navbar.ex
new file mode 100644
index 0000000..cb560ae
--- /dev/null
+++ b/sources/lib/components/station_ui/html/navbar.ex
@@ -0,0 +1,102 @@
+defmodule StationUI.HTML.Navbar do
+  use Phoenix.Component
+
+  @doc """
+    Implements a navbar component.
+    The navbar can consist of two sides left and right.
+    Both can be implemented using the left and right components supplied by this module.
+
+    Example use:
+    <.navbar aria_label="Main navigation" class="sticky top-0 border-transparent bg-white">
+      <span class="hidden text-lg font-light antialiased min-[1800px]:text-4xl lg:block xl:text-xl 2xl:text-3xl">
+        Brand
+      </span>
+      <.navbar_left>
+        <:item>
+          <.button class="sui-secondary">Home</.button>
+        </:item>
+        <:item>
+          <.button class="sui-secondary">Services</.button>
+        </:item>
+      </.navbar_left>
+      <.navbar_right>
+        <:item>
+          <.button
+            class="sui-secondary h-10 w-10 rounded-full"
+          >
+            <.icon name="hero-bars-3" class="h-6 w-6 shrink-0" />
+          </.button>
+        </:item>
+      </.navbar_right>
+    </.navbar>
+
+  """
+
+  attr :aria_label, :string, default: "Primary Menu"
+  attr :class, :string, default: ""
+
+  slot :inner_block, required: true
+
+  def navbar(assigns) do
+    ~H"""
+    <nav
+      aria-label={@aria_label}
+      class={[
+        base_classes(),
+        @class
+      ]}
+    >
+      <%= render_slot(@inner_block) %>
+    </nav>
+    """
+  end
+
+  attr :class, :string, default: ""
+  slot :item
+
+  def navbar_left(assigns) do
+    ~H"""
+    <div class={[
+      navbar_left_base_classes(),
+      @class
+    ]}>
+      <%= if @item do %>
+        <ul class="flex shrink-0 items-center gap-x-1 sm:gap-x-2 md:gap-x-3 xl:gap-x-4 leading-none min-[1800px]:gap-x-2 [&>*]:hidden [&>*:first-child]:block [&>*:nth-child(2)]:block [&>*:nth-child(3)]:block [&>*:nth-child(4)]:block md:[&>*]:block">
+          <%= for item <- @item do %>
+            <li>
+              <%= render_slot(item) %>
+            </li>
+          <% end %>
+        </ul>
+      <% end %>
+    </div>
+    """
+  end
+
+  attr :class, :string, default: ""
+  slot :item
+
+  def navbar_right(assigns) do
+    ~H"""
+    <div class={[
+      @class
+    ]}>
+      <ul class="hidden shrink-0 gap-x-2 min-[1800px]:gap-x-2 md:flex md:items-center xl:gap-x-1 2xl:gap-x-1.5">
+        <%= for item <- @item do %>
+          <li>
+            <%= render_slot(item) %>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+    """
+  end
+
+  defp base_classes do
+    "left-0 flex w-full items-center justify-between gap-4 overflow-x-auto overscroll-x-contain px-1 py-1 min-[1800px]:px-4.5 sm:px-2 sm:py-2.5 lg:py-3 xl:py-4.5 xl:px-3.5"
+  end
+
+  defp navbar_left_base_classes do
+    "flex shrink-0 grow items-center justify-between gap-x-3 sm:gap-x-6 md:gap-x-[34px] md:justify-start"
+  end
+end
diff --git a/sources/lib/components/station_ui/html/notification_badges.ex b/sources/lib/components/station_ui/html/notification_badges.ex
new file mode 100644
index 0000000..e777b48
--- /dev/null
+++ b/sources/lib/components/station_ui/html/notification_badges.ex
@@ -0,0 +1,35 @@
+defmodule StationUI.HTML.NotificationBadges do
+  use Phoenix.Component
+
+  attr :class, :any, default: "h-6 w-6 text-sm"
+  attr :dot_class, :any, default: "h-1 w-1 group-hover/notification-badge:scale-[2]"
+  attr :count, :integer, default: nil
+  slot :inner_block
+
+  def notification_badge(assigns) do
+    ~H"""
+    <div class={[
+      @class,
+      "font-sans group/notification-badge flex items-center justify-center rounded-full bg-rose-600 font-bold text-white hover:bg-rose-500"
+    ]}>
+      <%= render_slot(@inner_block) || default_content(assigns) %>
+    </div>
+    """
+  end
+
+  defp default_content(%{count: nil} = assigns) do
+    ~H"""
+    <span class={[@dot_class, "transition-transform"]}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" fill="currentColor" class="pointer-events-none" aria-hidden="true">
+        <circle cx="5" cy="5" r="5" />
+      </svg>
+    </span>
+    """
+  end
+
+  defp default_content(assigns) do
+    ~H"""
+    <span class="pointer-events-none"><%= @count %></span>
+    """
+  end
+end
diff --git a/sources/lib/components/station_ui/html/pagination.ex b/sources/lib/components/station_ui/html/pagination.ex
new file mode 100644
index 0000000..c495d5d
--- /dev/null
+++ b/sources/lib/components/station_ui/html/pagination.ex
@@ -0,0 +1,224 @@
+defmodule StationUI.HTML.Pagination do
+  @moduledoc """
+  The pagination component renders clickable numbered elements to progress through content that spans multiple pages.
+
+
+  The default size for each pagination button is "md" but the size can be changed by supplying the
+  `class` attribute to each slot.
+
+  Suggested size classes:
+    xl: gap-x-4 px-8 py-3 text-4xl lg:focus-visible:ring-4
+    lg: gap-x-4 px-7 py-2.5 text-2xl
+    sm: gap-x-2 px-5 py-2 text-sm
+    xs: gap-x-2 px-4 py-2 text-xs
+  """
+
+  use Phoenix.LiveComponent
+
+  @default_params %{"page" => 1, "page_size" => 10}
+
+  @item_default_classes "gap-x-2 px-6 py-2 text-base"
+
+  attr :class, :string, default: "inline-flex gap-x-2.5"
+
+  attr :id, :string, default: "pagination-component", doc: "required if more than one pagination component is on a single page"
+
+  attr :label, :string, default: "Pagination Navigation"
+
+  attr :link_fn, :any,
+    required: true,
+    doc: "function that takes a single argument of pagination params and returns a url or path link"
+
+  attr :max_pages, :integer, default: 7, doc: "maximum number of pages to show at a time"
+
+  attr :params, :map,
+    default: @default_params,
+    doc: "map of the current pagination params (page, page_size)"
+
+  attr :total_count, :integer,
+    default: 0,
+    doc: "total number of records in the list being paginated"
+
+  slot :first do
+    attr :class, :string, doc: @item_default_classes
+  end
+
+  slot :last do
+    attr :class, :string, doc: @item_default_classes
+  end
+
+  slot :next do
+    attr :class, :string, doc: @item_default_classes
+  end
+
+  slot :page_links do
+    attr :class, :string, doc: @item_default_classes
+  end
+
+  slot :previous do
+    attr :class, :string, doc: @item_default_classes
+  end
+
+  def pagination(assigns) do
+    ~H"""
+    <.live_component module={__MODULE__} {assigns} />
+    """
+  end
+
+  @impl true
+  def update(assigns, socket) do
+    %{"page" => current_page, "page_size" => page_size} =
+      params =
+      Map.merge(@default_params, cast_params(assigns.params))
+
+    total_page_count = (assigns.total_count / page_size) |> ceil() |> max(1)
+
+    {:ok,
+     socket
+     |> assign(assigns)
+     |> assign(:current_page, current_page)
+     |> assign(:params, params)
+     |> assign(:total_page_count, total_page_count)
+     |> assign_range()}
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <nav class={@class} aria-label={@label} role="navigation">
+      <.link
+        :for={first_slot <- @first}
+        patch={link_to_page(@params, 1, @link_fn)}
+        class={item_classes(first_slot)}
+        aria-disabled={@current_page == 1 && "true"}
+        tabindex={@current_page == 1 && "-1"}
+      >
+        <%= if first_slot.inner_block, do: render_slot(first_slot), else: "First" %>
+      </.link>
+
+      <.link
+        :for={previous_slot <- @previous}
+        patch={link_to_page(@params, max(@current_page - 1, 1), @link_fn)}
+        class={item_classes(previous_slot)}
+        aria-disabled={@current_page == 1 && "true"}
+        tabindex={@current_page == 1 && "-1"}
+      >
+        <%= if previous_slot.inner_block, do: render_slot(previous_slot), else: "Prev" %>
+      </.link>
+
+      <%= for page_link_slot <- @page_links, page <- @range_start..@range_end//1 do %>
+        <%= cond do %>
+          <% page == @range_start and page != 1 -> %>
+            <button phx-click="update-pages-range" phx-value-range-start={page - @max_pages + 2} phx-target={@myself} class={item_classes(page_link_slot)}>
+              ...
+            </button>
+          <% page == @range_end and page != @total_page_count -> %>
+            <button phx-click="update-pages-range" phx-value-range-start={page - 1} phx-target={@myself} class={item_classes(page_link_slot)}>
+              ...
+            </button>
+          <% true -> %>
+            <.link patch={link_to_page(@params, page, @link_fn)} class={item_classes(page_link_slot)} aria-current={@current_page == page && "page"}>
+              <%= if page_link_slot.inner_block, do: render_slot(page_link_slot, page), else: to_string(page) %>
+            </.link>
+        <% end %>
+      <% end %>
+
+      <.link
+        :for={next_slot <- @next}
+        patch={link_to_page(@params, min(@current_page + 1, @total_page_count), @link_fn)}
+        class={item_classes(next_slot)}
+        aria-disabled={@current_page == @total_page_count && "true"}
+        tabindex={@current_page == @total_page_count && "-1"}
+      >
+        <%= if next_slot.inner_block, do: render_slot(next_slot), else: "Next" %>
+      </.link>
+
+      <.link
+        :for={last_slot <- @last}
+        patch={link_to_page(@params, @total_page_count, @link_fn)}
+        class={item_classes(last_slot)}
+        aria-disabled={@current_page == @total_page_count && "true"}
+        tabindex={@current_page == @total_page_count && "-1"}
+      >
+        <%= if last_slot.inner_block, do: render_slot(last_slot), else: "Last" %>
+      </.link>
+    </nav>
+    """
+  end
+
+  @impl true
+  def handle_event("update-pages-range", %{"range-start" => range_start}, socket) do
+    socket =
+      case Integer.parse(range_start) do
+        {parsed_range_start, _} -> assign_range(socket, parsed_range_start)
+        _ -> socket
+      end
+
+    {:noreply, socket}
+  end
+
+  defp assign_range(socket) do
+    %{current_page: current_page, max_pages: max_pages} = socket.assigns
+
+    assign_range(socket, current_page - ceil(max_pages / 2) + 1)
+  end
+
+  defp assign_range(socket, range_start) do
+    %{max_pages: max_pages, total_page_count: total_page_count} = socket.assigns
+
+    range_start = max(range_start, 1)
+    range_end = min(range_start + max_pages - 1, total_page_count)
+    range_start = max(range_end - max_pages + 1, 1)
+
+    socket
+    |> assign(:range_start, range_start)
+    |> assign(:range_end, range_end)
+  end
+
+  defp cast_params(params) do
+    Map.new(params, fn {original_key, original_value} ->
+      updated_key = to_string(original_key)
+
+      updated_value =
+        original_value
+        |> to_string()
+        |> String.to_integer()
+        |> max(1)
+
+      {updated_key, updated_value}
+    end)
+  end
+
+  defp item_classes(slot) do
+    [slot[:class] || item_default_classes(), item_base_classes()]
+  end
+
+  defp item_default_classes, do: @item_default_classes
+
+  defp item_base_classes do
+    ~w"
+      inline-flex
+      items-center
+      justify-center
+      rounded-md
+      font-bold
+      aria-[current=page]:bg-[--sui-brand-primary-bg]
+      aria-[current=page]:text-[--sui-brand-primary-text-inverted]
+      hover:aria-[current=page]:bg-[--sui-brand-primary-muted]
+      aria-disabled:pointer-events-none
+      aria-disabled:bg-[--sui-brand-primary-bg-disabled]
+      aria-disabled:text-[--sui-brand-primary-text-disabled]
+      aria-disabled:outline-none
+      focus-visible:outline-none
+      focus-visible:ring-2
+      focus-visible:ring-[--sui-brand-primary-focus]
+      focus-visible:ring-offset-4
+    "
+  end
+
+  defp link_to_page(params, page, link_fn) do
+    params
+    |> Map.put("page", page)
+    |> link_fn.()
+  end
+end
diff --git a/sources/lib/components/station_ui/html/spinners.ex b/sources/lib/components/station_ui/html/spinners.ex
new file mode 100644
index 0000000..0346546
--- /dev/null
+++ b/sources/lib/components/station_ui/html/spinners.ex
@@ -0,0 +1,42 @@
+defmodule StationUI.HTML.Spinners do
+  use Phoenix.Component
+
+  @doc """
+  The spinners component renders an animated looping SVG to represent a loading state.
+
+  """
+
+  @base_classes "[&>svg]:animate-spin [&>svg]:fill-[--sui-brand-primary]"
+  def base_classes, do: @base_classes
+
+  attr :class, :any, default: "h-6 w-6"
+
+  def spinner(assigns) do
+    ~H"""
+    <div class={[base_classes() | List.wrap(@class)]} title="loading" aria-live="polite">
+      <span class="sr-only">loading</span>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" fill="currentColor" class="pointer-events-none" aria-hidden="true">
+        <path d="M4.54686 32.0766C3.66353 32.5866 2.52629 32.2866 2.09216 31.3637C0.585748 28.161 -0.129671 24.633 0.0193006 21.0787C0.194121 16.9076 1.55213 12.8724 3.93472 9.44429C6.31731 6.0162 9.62611 3.33679 13.4747 1.71901C17.3232 0.101228 21.5526 -0.388132 25.6689 0.308085C29.7852 1.00431 33.6184 2.85736 36.7209 5.65081C39.8233 8.44427 42.0669 12.0628 43.1896 16.0838C44.3123 20.1047 44.2677 24.3621 43.061 28.3587C42.0328 31.7643 40.197 34.8607 37.7211 37.3898C37.0076 38.1187 35.835 38.028 35.1685 37.2558C34.502 36.4837 34.5955 35.3234 35.2966 34.5825C37.2482 32.5202 38.6994 30.0254 39.525 27.2911C40.529 23.9655 40.5661 20.4229 39.6319 17.0771C38.6978 13.7312 36.8309 10.7202 34.2493 8.39577C31.6677 6.07133 28.4781 4.52939 25.0529 3.95007C21.6277 3.37074 18.1084 3.77794 14.906 5.1241C11.7036 6.47027 8.95037 8.69982 6.96781 11.5523C4.98525 14.4049 3.85524 17.7626 3.70977 21.2334C3.59016 24.0871 4.1402 26.9204 5.30501 29.5098C5.72344 30.4401 5.4302 31.5666 4.54686 32.0766Z" />
+      </svg>
+    </div>
+    """
+  end
+
+  @double_base_classes "[&>svg]:fill-[--sui-brand-primary] [&_path]:origin-center first:[&_path]:fill-[--sui-brand-primary-shadow] even:[&_path]:animate-spin last:[&_path]:animate-spin-reverse last:[&_path]:fill-[--sui-brand-primary-muted]"
+  defp double_base_classes, do: @double_base_classes
+
+  attr :class, :any, default: "h-[114px] w-[114px]"
+
+  def spinner_double(assigns) do
+    ~H"""
+    <div class={[double_base_classes() | List.wrap(@class)]} title="loading" aria-live="polite">
+      <span class="sr-only">loading</span>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 244 244" fill="currentColor" class="pointer-events-none" aria-hidden="true">
+        <path d="M244 122C244 189.379 189.379 244 122 244C54.6213 244 0 189.379 0 122C0 54.6213 54.6213 0 122 0C189.379 0 244 54.6213 244 122ZM20.4833 122C20.4833 178.066 65.9339 223.517 122 223.517C178.066 223.517 223.517 178.066 223.517 122C223.517 65.9339 178.066 20.4833 122 20.4833C65.9339 20.4833 20.4833 65.9339 20.4833 122Z" />
+        <path d="M218.786 66.1208C223.684 63.2927 229.991 64.9558 232.398 70.0742C240.752 87.8346 244.719 107.399 243.893 127.109C242.924 150.239 235.393 172.617 222.18 191.627C208.968 210.637 190.619 225.496 169.277 234.467C147.935 243.439 124.481 246.152 101.654 242.292C78.8275 238.431 57.5705 228.155 40.3661 212.664C23.1616 197.173 10.7199 177.106 4.49417 154.808C-1.73157 132.51 -1.48433 108.901 5.20701 86.7381C10.9089 67.8525 21.0895 50.6815 34.8193 36.6563C38.7762 32.6143 45.2788 33.1177 48.9748 37.3995C52.6707 41.6813 52.152 48.1157 48.2642 52.2241C37.4417 63.6607 29.3941 77.4954 24.8161 92.6585C19.2482 111.1 19.0425 130.746 24.2229 149.3C29.4034 167.854 39.7562 184.552 54.0721 197.442C68.388 210.332 86.076 218.882 105.07 222.095C124.064 225.308 143.581 223.05 161.339 215.585C179.098 208.119 194.366 195.756 205.36 179.937C216.355 164.118 222.621 145.498 223.428 126.251C224.091 110.426 221.041 94.7142 214.581 80.3545C212.261 75.1961 213.887 68.949 218.786 66.1208Z" />
+        <path d="M188.511 83.6C190.041 82.7164 192.005 83.2381 192.826 84.8027C198.582 95.7613 201.723 107.92 201.982 120.325C202.265 133.797 199.139 147.122 192.896 159.064C186.653 171.005 177.495 181.177 166.271 188.634C155.937 195.5 144.16 199.86 131.877 201.388C130.123 201.606 128.574 200.292 128.426 198.531C128.279 196.77 129.588 195.229 131.341 195.005C142.55 193.571 153.293 189.572 162.73 183.303C173.055 176.443 181.481 167.085 187.225 156.099C192.968 145.112 195.843 132.853 195.584 120.459C195.347 109.132 192.498 98.0281 187.279 88.0053C186.463 86.4378 186.98 84.4837 188.511 83.6Z" />
+      </svg>
+    </div>
+    """
+  end
+end
diff --git a/sources/lib/components/station_ui/html/status_badges.ex b/sources/lib/components/station_ui/html/status_badges.ex
new file mode 100644
index 0000000..9842b36
--- /dev/null
+++ b/sources/lib/components/station_ui/html/status_badges.ex
@@ -0,0 +1,38 @@
+defmodule StationUI.HTML.StatusBadges do
+  use Phoenix.Component
+
+  @status_badge_base_classes "aspect-square flex items-center justify-center rounded-full"
+  defp status_badge_base_classes, do: @status_badge_base_classes
+
+  @doc """
+  The status badge component renders different-colored circles to represent different statuses.
+
+  Suggested classes for various sizes:
+    - xs -> "w-2 [&>span]:w-0.5"
+    - sm -> "w-2.5 [&>span]:w-0.5"
+    - md -> "w-3 [&>span]:w-0.5" (default)
+    - lg -> "w-4 [&>span]:w-0.5"
+    - xl -> "w-5 [&>span]:w-1"
+
+  """
+  attr(:status, :string, default: "active")
+  attr(:class, :any, default: "w-3 [&>span]:w-0.5")
+
+  def status_badge(assigns) do
+    ~H"""
+    <div class={[
+      status_badge_base_classes(),
+      status_classes(@status)
+      | List.wrap(@class)
+    ]}>
+      <span class="aspect-square rounded-full bg-slate-50"></span>
+    </div>
+    """
+  end
+
+  defp status_classes("active"), do: "bg-emerald-500"
+  defp status_classes("inactive"), do: "bg-slate-300"
+  defp status_classes("deactivated"), do: "bg-rose-500"
+  defp status_classes("pending"), do: "bg-orange-500"
+  defp status_classes("other"), do: ""
+end
diff --git a/sources/lib/components/station_ui/html/tab_group.ex b/sources/lib/components/station_ui/html/tab_group.ex
new file mode 100644
index 0000000..6091dce
--- /dev/null
+++ b/sources/lib/components/station_ui/html/tab_group.ex
@@ -0,0 +1,150 @@
+defmodule StationUI.HTML.TabGroup do
+  use Phoenix.Component
+
+  alias Phoenix.LiveView.JS
+
+  @base_classes "flex items-center"
+  def base_classes, do: @base_classes
+
+  @tab_base_classes ~w"
+    relative
+    inline-flex
+    items-center
+    justify-center
+    gap-x-1.5
+    whitespace-nowrap
+    rounded-lg
+    bg-transparent
+    font-medium
+    text-[--sui-brand-primary-text]
+
+    aria-selected:text-[--sui-brand-primary]
+
+    aria-selected:hover:text-[--sui-brand-primary-text]
+    aria-selected:hover:after:border-b-[--sui-brand-primary-text]
+
+    after:absolute
+    after:inset-x-0
+    after:-bottom-0
+    after:border-b-2
+    after:border-transparent
+    after:aria-selected:border-b-[--sui-brand-primary]
+
+    hover:after:border-b-[--sui-brand-primary-text]
+
+    focus-visible:outline-none
+    focus-visible:ring-2
+    focus-visible:ring-[--sui-brand-primary-focus]
+    focus-visible:ring-offset-4
+  "
+  def tab_base_classes, do: @tab_base_classes
+
+  @tab_default_classes "text-base"
+  def tab_default_classes, do: @tab_default_classes
+
+  @tab_divider_base_classes "w-px bg-[--sui-brand-primary-border]"
+  def tab_divider_base_classes, do: @tab_divider_base_classes
+
+  @tab_divider_default_classes "h-5"
+  def tab_divider_default_classes, do: @tab_divider_default_classes
+
+  @tab_panel_base_classes "mt-2 [&:not([data-visible])]:hidden"
+  def tab_panel_base_classes, do: @tab_panel_base_classes
+
+  attr :class, :any, default: "gap-x-5"
+  attr :default_index, :string, default: "0", doc: "the index of the tab that should be active when initially rendered"
+  attr :id, :any, required: true
+  attr :on_select, :any, default: nil, doc: "the function for handling additional behavior for phx-click on each tab"
+
+  slot :tab, required: true do
+    attr :class, :any, doc: @tab_default_classes
+    attr :index, :string, doc: "the unique index of the tab for matching with a tab panel (defaults to the zero-based numerical position of the slot)"
+  end
+
+  slot :tab_divider do
+    attr :class, :any, doc: @tab_divider_default_classes
+  end
+
+  slot :tab_panel, required: true do
+    attr :class, :any
+    attr :index, :string, doc: "the unique index of the tab panel for matching with a tab (defaults to the zero-based numerical position of the slot)"
+  end
+
+  def tab_group(assigns) do
+    assigns =
+      assigns
+      |> update(:tab, &set_slot_index/1)
+      |> update(:tab_panel, &set_slot_index/1)
+      |> update(:default_index, fn current_value, %{tab: tab_list} ->
+        if Enum.any?(tab_list, &(&1.index == current_value)) do
+          current_value
+        else
+          List.first(tab_list).index
+        end
+      end)
+
+    ~H"""
+    <div id={@id}>
+      <div class={[base_classes(), @class]} role="tablist">
+        <%= for {tab, tab_divider} <- padded_zip(@tab, @tab_divider) do %>
+          <button
+            class={[tab[:class] || tab_default_classes(), tab_base_classes()]}
+            id={tab_id(@id, tab.index)}
+            type="button"
+            role="tab"
+            aria-selected={to_string(@default_index == tab.index)}
+            aria-controls={tab_panel_id(@id, tab.index)}
+            phx-click={show_tab(@id, tab.index) |> JS.exec("data-tab-select")}
+            data-tab-select={if is_function(@on_select, 1), do: @on_select.(tab.index), else: %JS{}}
+          >
+            <%= render_slot(tab) %>
+          </button>
+
+          <div :if={tab_divider} class={[tab_divider[:class] || tab_divider_default_classes(), tab_divider_base_classes()]}></div>
+        <% end %>
+      </div>
+
+      <div
+        :for={tab_panel <- @tab_panel}
+        class={[tab_panel[:class], tab_panel_base_classes()]}
+        id={tab_panel_id(@id, tab_panel.index)}
+        role="tabpanel"
+        aria-labelledby={tab_id(@id, tab_panel.index)}
+        data-visible={@default_index == tab_panel.index}
+      >
+        <%= render_slot(tab_panel) %>
+      </div>
+    </div>
+    """
+  end
+
+  defp padded_zip(list1, list2, padding \\ nil) do
+    list2_len = length(list2)
+
+    max_len =
+      list1
+      |> length()
+      |> max(list2_len)
+
+    list2_padding = List.duplicate(padding, max_len - list2_len)
+
+    Enum.zip(list1, list2 ++ list2_padding)
+  end
+
+  defp set_slot_index(slot_list) do
+    for {slot, index} <- Enum.with_index(slot_list) do
+      Map.put_new(slot, :index, to_string(index))
+    end
+  end
+
+  defp show_tab(js \\ %JS{}, id, tab_index) do
+    js
+    |> JS.remove_attribute("data-visible", to: "##{id} [role=tabpanel]")
+    |> JS.set_attribute({"data-visible", ""}, to: "##{tab_panel_id(id, tab_index)}")
+    |> JS.set_attribute({"aria-selected", false}, to: "##{id} [role=tab]")
+    |> JS.set_attribute({"aria-selected", true}, to: "##{tab_id(id, tab_index)}")
+  end
+
+  defp tab_id(id, tab_index), do: "#{id}-tab-#{tab_index}"
+  defp tab_panel_id(id, tab_index), do: "#{id}-tabpanel-#{tab_index}"
+end
diff --git a/sources/lib/components/station_ui/html/table_cell.ex b/sources/lib/components/station_ui/html/table_cell.ex
new file mode 100644
index 0000000..cb62954
--- /dev/null
+++ b/sources/lib/components/station_ui/html/table_cell.ex
@@ -0,0 +1,44 @@
+defmodule StationUI.HTML.TableCell do
+  use Phoenix.Component
+
+  attr :class, :string, default: ""
+
+  slot :container, required: true do
+    attr :class, :string
+  end
+
+  slot :metadata do
+    attr :class, :string
+  end
+
+  slot :support do
+    attr :class, :string
+  end
+
+  def table_cell(assigns) do
+    ~H"""
+    <div
+      class={[
+        "inline-flex items-center self-start justify-center px-3 py-0.5 rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-purple-500 min-w-96",
+        @class
+      ]}
+      role="cell"
+      tabindex="0"
+    >
+      <div class={["flex flex-col flex-1 text-slate-800"]}>
+        <div class={["flex items-center justify-between"]}>
+          <div :for={container <- @container} class={["flex items-center gap-x-1", container[:class]]}>
+            <%= render_slot(container) %>
+          </div>
+          <div :for={metadata <- @metadata} class={metadata[:class]}>
+            <%= render_slot(metadata) %>
+          </div>
+        </div>
+        <div :for={support <- @support} class={["text-gray-500", support[:class]]}>
+          <%= render_slot(support) %>
+        </div>
+      </div>
+    </div>
+    """
+  end
+end
diff --git a/sources/lib/components/station_ui/html/table_header.ex b/sources/lib/components/station_ui/html/table_header.ex
new file mode 100644
index 0000000..db504f8
--- /dev/null
+++ b/sources/lib/components/station_ui/html/table_header.ex
@@ -0,0 +1,44 @@
+defmodule StationUI.HTML.TableHeader do
+  use Phoenix.Component
+
+  attr :class, :string, default: ""
+
+  slot :label, required: true do
+    attr :class, :string
+  end
+
+  slot :button do
+    attr :class, :string
+  end
+
+  def table_header(assigns) do
+    ~H"""
+    <div
+      class={[
+        "inline-flex items-center self-start justify-center px-3 py-0.5",
+        @class
+      ]}
+      role="columnheader"
+    >
+      <span
+        :for={label <- @label}
+        class={[
+          "font-medium",
+          label[:class]
+        ]}
+      >
+        <%= render_slot(label) %>
+      </span>
+      <button
+        :for={button <- @button}
+        class={[
+          "p-3 rounded-lg outline-none appearance-none focus-visible:ring-2 focus-visible:ring-purple-500",
+          button[:class]
+        ]}
+      >
+        <%= render_slot(button) %>
+      </button>
+    </div>
+    """
+  end
+end
diff --git a/sources/lib/components/station_ui/html/tags.ex b/sources/lib/components/station_ui/html/tags.ex
new file mode 100644
index 0000000..1a0d850
--- /dev/null
+++ b/sources/lib/components/station_ui/html/tags.ex
@@ -0,0 +1,74 @@
+defmodule StationUI.HTML.Tags do
+  @moduledoc """
+
+  For bordered tags, add "border-2"
+
+  For rounded tags, add "rounded-full py-1"
+  """
+  use Phoenix.Component
+
+  import StationUI.HTML.Icons, only: [icon: 1]
+
+  alias Phoenix.LiveView.JS
+
+  attr :as, :string
+  attr :class, :any, default: "gap-x-1.5 px-2.5 rounded py-1"
+  attr :on_click, JS, default: nil
+  attr :on_delete, JS, default: nil
+  attr :tabindex, :string
+  attr :rest, :global, include: ~w(disabled)
+
+  slot :inner_block, required: true
+
+  def tag(assigns) do
+    assigns =
+      assign_new(assigns, :as, fn ->
+        if assigns.on_click && !assigns.on_delete, do: "button", else: "div"
+      end)
+
+    assigns =
+      assign_new(assigns, :tabindex, fn ->
+        assigns.on_click && !(assigns.as in ["a", "button"]) && "0"
+      end)
+
+    ~H"""
+    <.dynamic_tag
+      name={@as}
+      phx-click={@on_click}
+      class={[
+        @class,
+        container_interaction_classes(!!(@on_delete || @on_click)),
+        "flex items-center max-w-fit whitespace-nowrap text-slate-800 border-slate-800 bg-gray-100 focus-visible:ring-purple-500 outline-none"
+      ]}
+      tabindex={@tabindex}
+      type={@as == "button" && "button"}
+      {@rest}
+    >
+      <span class={["text-base leading-6", "font-sans font-bold"]}>
+        <%= render_slot(@inner_block) %>
+      </span>
+      <button
+        :if={@on_delete}
+        type="button"
+        phx-click={@on_delete}
+        class="rounded border-2 border-transparent outline-none hover:text-indigo-600 focus-visible:ring-2 focus-visible:ring-purple-500 active:text-indigo-900"
+        aria-label="Delete"
+      >
+        <.icon
+          name="hero-x-circle-solid"
+          class={[
+            "h-3.5 w-3.5",
+            "block"
+          ]}
+        />
+      </button>
+    </.dynamic_tag>
+    """
+  end
+
+  defp container_interaction_classes(true) do
+    "cursor-pointer hover:bg-gray-200 [&:not(:has(button:active))]:active:bg-gray-300 focus-visible:ring-2 focus-visible:ring-offset-4"
+  end
+
+  defp container_interaction_classes(false), do: nil
+end
diff --git a/sources/lib/components/station_ui/html/toast.ex b/sources/lib/components/station_ui/html/toast.ex
new file mode 100644
index 0000000..4c72e43
--- /dev/null
+++ b/sources/lib/components/station_ui/html/toast.ex
@@ -0,0 +1,68 @@
+defmodule StationUI.HTML.Toast do
+  use Phoenix.Component
+
+  @base_classes ~w{
+    py-[0.625em]
+    ps-[0.875em]
+    pe-[0.625em]
+    flex
+    items-center
+    justify-between
+    gap-x-3
+    max-w-prose
+    text-[--sui-brand-primary-text]
+    w-full
+    rounded-lg
+    shadow-[0_4px_24px_0_rgba(0,0,0,0.35)]
+    border
+  }
+  defp base_classes, do: @base_classes
+
+  @doc """
+  A toast message component.
+  The primary (left) paragraph content goes into the main inner_block slot.
+  The optional secondary (right) content goes into the secondary slot.
+
+  ## Examples
+
+  Toast with left icon and right button:
+
+    <.toast>
+      <.icon name="hero-information-circle-solid" class="size-7 text-rose-700" />
+      This is the toast content
+      <:secondary>
+        <.button class="sui-primary">
+          Button
+        </.button>
+      </:secondary>
+    </.toast>
+
+  Toast without border:
+
+    <.toast class="text-lg border-transparent">
+      ...
+    </.toast>
+
+  Suggested classes for various text sizes and the default border styling:
+    - xs -> "text-sm border-[--sui-brand-primary-border]"
+    - sm -> "text-base border-[--sui-brand-primary-border]"
+    - md -> "text-lg border-[--sui-brand-primary-border]" (default)
+    - lg -> "text-2xl border-[--sui-brand-primary-border]"
+    - xl -> "text-3xl border-[--sui-brand-primary-border]"
+  """
+  slot :inner_block, required: true
+  slot :secondary
+
+  attr :class, :any, default: "text-lg border-[--sui-brand-primary-border]"
+
+  def toast(assigns) do
+    ~H"""
+    <div class={[base_classes(), @class]} role="status">
+      <p class="flex items-center gap-x-3 *:shrink-0">
+        <%= render_slot(@inner_block) %>
+      </p>
+      <%= render_slot(@secondary) %>
+    </div>
+    """
+  end
+end
diff --git a/sources/lib/components/station_ui/html/toolbars.ex b/sources/lib/components/station_ui/html/toolbars.ex
new file mode 100644
index 0000000..41b8c3e
--- /dev/null
+++ b/sources/lib/components/station_ui/html/toolbars.ex
@@ -0,0 +1,128 @@
+defmodule StationUI.HTML.Toolbars do
+  use Phoenix.Component
+
+  import StationUI.HTML.Icons, only: [icon: 1]
+  import StationUI.HTML.Buttons
+
+  @doc """
+  Sets up Toolbar component.  The Toolbar includes default and vertical variants
+
+  ## Default Toolbar Example
+
+    <.toolbar>
+      <:toolbar_item icon_name="hero-face-smile-solid" text="Label" />
+      ...
+    </.toolbar>
+
+  ## Default Toolbar w/o border Example
+
+    <.toolbar class="border-0">
+      <:toolbar_item icon_name="hero-face-smile-solid" text="Label" />
+      ...
+    </.toolbar>
+
+  ## Vertical Toolbar Example
+
+    <.toolbar_vertical image_src={~p"/images/narwin_logo.png"} alt_name="brand logo">
+      <:toolbar_item icon_name="hero-face-smile" text="Label" />
+      ...
+    </.toolbar_vertical>
+
+  ## Suggested size classes:
+
+    Because of the nested <.button> and <.icon> components, the Toolbar's parent
+    container will handle the bulk of styling. We can use the parent to modify the size
+    of the nested elements.
+
+    ### Default Toolbar Sizes:
+
+    We can use the arbitrary class [&_span] to target
+    the icon styles.
+
+    xl: text-base [&_span]:size-12
+    lg: text-sm [&_span]:size-[38px]
+    sm: text-xs [&_span]:size-6
+
+    ### Example
+
+    <.toolbar class="text-base [&_span]:size-12">
+      ...
+    </.toolbar>
+
+    ### Default Vertical Toolbar Sizes:
+
+    We can use the arbitrary selectors [&_div] to target the logo size &
+    [&_span] to target the icon styles.
+
+    xl: [&_div]:size-[72px] [&_span]:size-7
+    lg: [&_div]:size-[62px] [&_span]:size-4.5
+    sm: [&_div]:size-11 [&_span]:size-3.5
+
+    ### Example
+
+    <.toolbar_vertical ... class="[&_div]:size-[72px] [&_span]:size-7">
+      ...
+    </.toolbar_vertical>
+  """
+
+  @toolbar_base_classes "px-3.5 pt-1.5 pb-1 w-fit border-[--sui-brand-primary-border] font-bold text-[--sui-brand-primary-text] [&_ul]:flex [&_ul]:gap-x-3 [&_ul]:items-center"
+
+  def toolbar_base_classes, do: @toolbar_base_classes
+
+  slot :toolbar_item, required: true do
+    attr :class, :string
+    attr :icon_name, :string
+    attr :text, :string, required: true
+  end
+
+  attr :class, :string, default: "border text-sm [&_span]:size-8"
+  attr :rest, :global
+
+  def toolbar(assigns) do
+    ~H"""
+    <nav class={[toolbar_base_classes() | List.wrap(@class)]} {@rest}>
+      <ul>
+        <li :for={item <- @toolbar_item} class={["#{Map.get(item, :class, "")}"]}>
+          <.button class="sui-secondary min-h-11 flex-col border-0 bg-transparent [&]:px-3.5 [&]:py-2">
+            <.icon name={item[:icon_name]} />
+            <%= item[:text] %>
+          </.button>
+        </li>
+      </ul>
+    </nav>
+    """
+  end
+
+  @toolbar_vertical_base_classes "h-screen h-dvh w-fit px-3.5 pt-4 flex flex-col items-center gap-y-2 shadow-xl [:where(&_div)]:size-[54px] [&_ul]:space-y-1.5 [&_span]:size-4.5"
+
+  def toolbar_vertical_base_classes, do: @toolbar_vertical_base_classes
+
+  slot :toolbar_item, required: true do
+    attr :class, :string
+    attr :icon_name, :string
+    attr :text, :string, required: true
+  end
+
+  attr :class, :string, default: nil
+  attr(:alt_name, :string, required: true)
+  attr(:image_src, :string, default: "")
+  attr :rest, :global
+
+  def toolbar_vertical(assigns) do
+    ~H"""
+    <nav class={[toolbar_vertical_base_classes() | List.wrap(@class)]} {@rest}>
+      <div>
+        <img class="size-full" src={@image_src} alt={@alt_name || ""} />
+      </div>
+      <ul>
+        <li :for={item <- @toolbar_item} class={["#{Map.get(item, :class, "")}"]}>
+          <.button class="sui-secondary min-h-11 flex-col border-0 bg-transparent">
+            <.icon name={item[:icon_name]} />
+            <span class="sr-only"><%= item[:text] %></span>
+          </.button>
+        </li>
+      </ul>
+    </nav>
+    """
+  end
+end
diff --git a/sources/lib/components/station_ui/html/tooltips.ex b/sources/lib/components/station_ui/html/tooltips.ex
new file mode 100644
index 0000000..329c521
--- /dev/null
+++ b/sources/lib/components/station_ui/html/tooltips.ex
@@ -0,0 +1,34 @@
+defmodule StationUI.HTML.Tooltips do
+  use Phoenix.Component
+
+  import StationUI.HTML.Icons
+
+  @doc """
+  The tooltip component renders a small unit of informational content that is hidden until a user hovers over the activating content.
+
+  """
+
+  attr :id, :string, required: true
+  attr :direction, :string, default: "bottom", values: ["top", "bottom"]
+
+  slot :inner_block
+
+  def tooltip(assigns) do
+    ~H"""
+    <div class={direction_classes(@direction)} id={@id} role="tooltip">
+      <.icon name="hero-information-circle" class="h-6 w-6 text-blue-100" />
+      <span class="z-10 text-base font-medium leading-6 text-white">
+        <%= render_slot(@inner_block) %>
+      </span>
+    </div>
+    """
+  end
+
+  defp direction_classes("top") do
+    "gap-x-1.5 p-2.5 pl-1.5 z-50 hidden peer-focus-within/target:inline-flex peer-hover/target:inline-flex absolute bottom-full mb-[calc(var(--tooltip-arrow-size)/1.5)] items-center min-w-max rounded-lg bg-slate-900 left-0 after:absolute after:content-[''] after:top-full after:left-1/2 after:-translate-x-1/2 after:bg-inherit after:rounded-sm after:h-[var(--tooltip-arrow-size)] after:w-[var(--tooltip-arrow-size)] after:-translate-y-1/2 after:-mt-1 after:-rotate-45"
+  end
+
+  defp direction_classes("bottom") do
+    "gap-x-1.5 p-2.5 pl-1.5 z-50 hidden items-center peer-focus-within/target:inline-flex peer-hover/target:inline-flex absolute top-full mt-[calc(var(--tooltip-arrow-size)/1.5)] min-w-max rounded-lg bg-slate-900 left-0 after:absolute after:content-[''] after:bottom-full after:left-1/2 after:-translate-x-1/2 after:bg-inherit after:rounded-sm after:h-[var(--tooltip-arrow-size)] after:w-[var(--tooltip-arrow-size)] after:translate-y-1/2 after:-mb-1 after:-rotate-45"
+  end
+end