Hakumi :: Rails ViewComponents

Basic Usage

Crowded components horizontal spacing.

Code

<%= render(Hakumi::Space::Component.new) do %>
  <%= render(Hakumi::Button::Component.new(type: :primary)) { "Primary" } %>
  <%= render(Hakumi::Button::Component.new) { "Default" } %>
  <%= render(Hakumi::Button::Component.new(type: :dashed)) { "Dashed" } %>
  <%= render(Hakumi::Button::Component.new(type: :link)) { "Link" } %>
<% end %>

Vertical Space

Crowded components vertical spacing.

Code

<%= render(Hakumi::Space::Component.new(direction: :vertical)) do %>
  <%= render(Hakumi::Button::Component.new(type: :primary)) { "Primary" } %>
  <%= render(Hakumi::Button::Component.new) { "Default" } %>
  <%= render(Hakumi::Button::Component.new(type: :dashed)) { "Dashed" } %>
<% end %>

Space Size

Large, middle and small size, and custom size.

Code

<%= render(Hakumi::Space::Component.new(direction: :vertical)) do %>
  <%= render(Hakumi::Space::Component.new(size: :large)) do %>
    <%= render(Hakumi::Button::Component.new(type: :primary)) { "Large" } %>
    <%= render(Hakumi::Button::Component.new) { "Large" } %>
    <%= render(Hakumi::Button::Component.new(type: :dashed)) { "Large" } %>
  <% end %>

  <%= render(Hakumi::Space::Component.new(size: :middle)) do %>
    <%= render(Hakumi::Button::Component.new(type: :primary)) { "Middle" } %>
    <%= render(Hakumi::Button::Component.new) { "Middle" } %>
    <%= render(Hakumi::Button::Component.new(type: :dashed)) { "Middle" } %>
  <% end %>

  <%= render(Hakumi::Space::Component.new(size: :small)) do %>
    <%= render(Hakumi::Button::Component.new(type: :primary)) { "Small" } %>
    <%= render(Hakumi::Button::Component.new) { "Small" } %>
    <%= render(Hakumi::Button::Component.new(type: :dashed)) { "Small" } %>
  <% end %>
<% end %>

Align

Align configuration.

Center Block

Start Block

End Block

Baseline Block

Code

<div class="space-align-container">
  <div class="space-align-block">
    <%= render(Hakumi::Space::Component.new(align: :center)) do %>
      <span>Center</span>
      <%= render(Hakumi::Button::Component.new(type: :primary)) { "Primary" } %>
      <span class="mock-block">Block</span>
    <% end %>
  </div>
  <div class="space-align-block">
    <%= render(Hakumi::Space::Component.new(align: :start)) do %>
      <span>Start</span>
      <%= render(Hakumi::Button::Component.new(type: :primary)) { "Primary" } %>
      <span class="mock-block">Block</span>
    <% end %>
  </div>
  <div class="space-align-block">
    <%= render(Hakumi::Space::Component.new(align: :end)) do %>
      <span>End</span>
      <%= render(Hakumi::Button::Component.new(type: :primary)) { "Primary" } %>
      <span class="mock-block">Block</span>
    <% end %>
  </div>
  <div class="space-align-block">
    <%= render(Hakumi::Space::Component.new(align: :baseline)) do %>
      <span>Baseline</span>
      <%= render(Hakumi::Button::Component.new(type: :primary)) { "Primary" } %>
      <span class="mock-block">Block</span>
    <% end %>
  </div>
</div>

<style>
  .space-align-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
  }
  .space-align-block {
    flex: none;
    margin: 8px 4px;
    padding: 4px;
    border: 1px solid #40a9ff;
  }
  .mock-block {
    display: inline-block;
    padding: 16px 8px;
    background: rgba(150, 150, 150, 0.2);
  }
</style>

Wrap

Auto wrap line.

Code

<%= render(Hakumi::Space::Component.new(size: [8, 16], wrap: true)) do %>
  <% 20.times do |i| %>
    <%= render(Hakumi::Button::Component.new) { "Button #{i}" } %>
  <% end %>
<% end %>

Compact Mode

Compact Mode for Button.

Code

<%= render(Hakumi::Space::Component.new(direction: :vertical)) do %>
  <%= render(Hakumi::Space::Compact::Component.new(block: true)) do %>
    <%= render(Hakumi::Button::Component.new) { "Button 1" } %>
    <%= render(Hakumi::Button::Component.new) { "Button 2" } %>
    <%= render(Hakumi::Button::Component.new) { "Button 3" } %>
    <%= render(Hakumi::Button::Component.new) { "Button 4" } %>
  <% end %>

  <%= render(Hakumi::Space::Compact::Component.new(block: true)) do %>
    <%= render(Hakumi::Button::Component.new(type: :primary)) { "Button 1" } %>
    <%= render(Hakumi::Button::Component.new(type: :primary)) { "Button 2" } %>
    <%= render(Hakumi::Button::Component.new(type: :primary)) { "Button 3" } %>
    <%= render(Hakumi::Button::Component.new(type: :primary)) { "Button 4" } %>
  <% end %>
<% end %>

Split

Set split to add separator between items. Requires using with_item slots.

Link 1

Link 2

Link 3

Code

<%= render Hakumi::Space::Component.new(split: "|") do |space| %>
  <% space.with_item do %>
    <%= render(Hakumi::Typography::Text::Component.new) { "Link 1" } %>
  <% end %>
  <% space.with_item do %>
    <%= render(Hakumi::Typography::Text::Component.new) { "Link 2" } %>
  <% end %>
  <% space.with_item do %>
    <%= render(Hakumi::Typography::Text::Component.new) { "Link 3" } %>
  <% end %>
<% end %>

Space API

Prop	Type	Default	Description
`direction`	`:horizontal or :vertical`	`:horizontal`	Layout orientation.
`size`	`:small \| :middle \| :large or Integer`	`:small`	Gap between items.
`align`	`:start \| :center \| :end or :baseline`	`-`	Cross-axis alignment.
`wrap`	`Boolean`	`false`	Allow items to wrap.
`block`	`Boolean`	`false`	Display as block element.
`split`	`String`	`-`	Separator between items (only works with items slot).
`with_item`	`Slot (multiple)`	`-`	Individual items wrapped in .hakumi-space-item.
`content`	`Block`	`-`	Direct content (alternative to with_item slots).
`**html_options`	`Keyword args`	`-`	Attributes merged into `.hakumi-space`. Pass as kwargs (e.g., `class:`, `style:`, `data:`).

Space::Compact API

Prop	Type	Default	Description
`direction`	`:horizontal or :vertical`	`:horizontal`	Stack direction.
`block`	`Boolean`	`false`	Full-width layout.
`content slot`	`Slot`	`-`	Adjacent components (e.g., buttons).
`**html_options`	`Keyword args`	`-`	Extra attributes merged into `.hakumi-space-compact`. Pass as kwargs (e.g., `class:`, `style:`, `data:`).