← All labs

Keystone UI

A live gallery of Keystone UI — DYB's reusable Rails component library. Every example below is rendered by the real components, with the helper code beside it.

Buttons

Variants and sizes for actions and links.

<%= ui_button(label: "Primary") %>
<%= ui_button(label: "Secondary", variant: :secondary) %>
<%= ui_button(label: "Danger", variant: :danger) %>

Alerts

Inline feedback in four tones.

Heads up — this is informational.

Saved successfully.

Double-check this before continuing.

Something went wrong.

<%= ui_alert(message: "Saved successfully.", type: :success) %>
<%= ui_alert(message: "Something went wrong.", type: :error) %>

Card

A titled card with a summary and a single call to action.

Revenue

$42,300 this month

View report

<%= ui_card(title: "Revenue", summary: "$42,300 this month", link: reports_path) %>

Panel

A simple surface for grouping content.

Panels wrap arbitrary content in a bordered, padded surface.

<%= ui_panel(padding: :lg) do %>
  <p>Panel content</p>
<% end %>

Data table

A responsive table from a collection and column definitions.

Name	Kind
Wyn	App
EventEngine	Gem
Keystone UI	Gem

<%= ui_data_table(items: @products,
  columns: [{ name: "Name" }, { kind: "Kind" }]) %>

Form fields

Styled inputs and textareas.

<%= ui_input(name: "email", type: :email) %>
<%= ui_textarea(name: "message", rows: 3) %>

Interested?

Leave your email and tell us what you're after.