Kiso

App

Root application wrapper that provides base structure and dark mode text inheritance.

Quick Start

<%= kui(:app) do %>
  <%= yield %>
<% end %>

Locals

Local Type Default
css_classes: String ""
**component_options Hash {}

Usage

Wrap your application content in kui(:app) to set bg-background, text-foreground, and antialiased on the root wrapper. This ensures text colors inherit correctly in dark mode.

<%= kui(:app) do %>
  <%= kui(:header) do %>
    <%= kui(:container) do %>
      <nav>...</nav>
    <% end %>
  <% end %>
  <%= kui(:main) do %>
    <%= kui(:container) do %>
      <%= yield %>
    <% end %>
  <% end %>
  <%= kui(:footer) do %>
    <%= kui(:container) do %>
      <p>&copy; 2026</p>
    <% end %>
  <% end %>
<% end %>

Theme

# lib/kiso/themes/layout.rb
Kiso::Themes::App = ClassVariants.build(
  base: "bg-background text-foreground antialiased"
)

Accessibility

Attribute Value
data-slot "app"

App renders a <div>. It is purely structural with no semantic role.