SolRengine UI

A ViewComponent library for Solana dApps built with Ruby on Rails and SolRengine. Ships 9 ready-to-use components styled with Tailwind CSS, with built-in dark/light mode support and Lookbook previews for every component.

Installation

Add the gem to your Gemfile:

gem "solrengine-ui", github: "solrengine/ui"

group :development do
  gem "lookbook", ">= 2.0"
end

Run the install generator:

bundle install
bin/rails generate solrengine:ui:install

Install the JavaScript package for Stimulus controllers:

yarn add @solrengine/ui

Quick Example

<%= render Solrengine::Ui::AppBarComponent.new do |bar| %>
  <% bar.with_logo do %>
    <span class="text-xl font-bold">My dApp</span>
  <% end %>
  <% bar.with_network_badge do %>
    <%= render Solrengine::Ui::NetworkBadgeComponent.new(network: "devnet") %>
  <% end %>
  <% bar.with_wallet_button do %>
    <%= render Solrengine::Ui::WalletButtonComponent.new(current_user: current_user) %>
  <% end %>
<% end %>

<%= render Solrengine::Ui::BalanceComponent.new(lamports: 1_500_000_000, size: :lg) %>

<%= render Solrengine::Ui::AddressComponent.new(address: "So1R...xYz9", copyable: true) %>

Component Reference

Component	Props	Description
`AddressComponent`	`address:`, `copyable: true`, `explorer: false`, `network: "mainnet-beta"`	Truncated wallet address with copy and explorer link
`AppBarComponent`	slots: `logo`, `wallet_button`, `network_badge`, `nav_links`	Top navigation bar with slots for logo, wallet, and nav
`BadgeComponent`	`text:`, `variant: :info`	Colored label badge (`:success`, `:warning`, `:error`, `:info`, `:purple`)
`BalanceComponent`	`lamports: nil`, `sol: nil`, `show_symbol: true`, `size: :md`	SOL balance display with auto-conversion from lamports
`ExplorerLinkComponent`	`value:`, `type: :address`, `network: "mainnet-beta"`, `truncate: true`	Link to Solscan/Solana Explorer for addresses or transactions
`NetworkBadgeComponent`	`network:`	Colored dot + label for mainnet-beta, devnet, or testnet
`NotificationComponent`	`message:`, `type: :info`, `dismissible: true`, `explorer_url: nil`	Flash-style notification with icon and optional explorer link
`ThemeToggleComponent`	(none)	Dark/light mode toggle button
`WalletButtonComponent`	`current_user: nil`, `login_path: "/auth/login"`, `logout_path: "/auth/logout"`	Connect/disconnect wallet button with truncated address

Usage Examples

AddressComponent

<%= render Solrengine::Ui::AddressComponent.new(
  address: "7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosgAsU",
  copyable: true,
  explorer: true,
  network: "devnet"
) %>

AppBarComponent

<%= render Solrengine::Ui::AppBarComponent.new do |bar| %>
  <% bar.with_logo do %>
    <span class="font-bold">My dApp</span>
  <% end %>
  <% bar.with_nav_link do %>
    <%= link_to "Dashboard", dashboard_path %>
  <% end %>
  <% bar.with_nav_link do %>
    <%= link_to "Transactions", transactions_path %>
  <% end %>
  <% bar.with_network_badge do %>
    <%= render Solrengine::Ui::NetworkBadgeComponent.new(network: "devnet") %>
  <% end %>
  <% bar.with_wallet_button do %>
    <%= render Solrengine::Ui::WalletButtonComponent.new(current_user: current_user) %>
  <% end %>
<% end %>

BadgeComponent

<%= render Solrengine::Ui::BadgeComponent.new(text: "Confirmed", variant: :success) %>
<%= render Solrengine::Ui::BadgeComponent.new(text: "Pending", variant: :warning) %>

BalanceComponent

<%# From lamports %>
<%= render Solrengine::Ui::BalanceComponent.new(lamports: 2_500_000_000, size: :lg) %>

<%# From SOL %>
<%= render Solrengine::Ui::BalanceComponent.new(sol: 1.5, show_symbol: false, size: :sm) %>

ExplorerLinkComponent

<%# Address link %>
<%= render Solrengine::Ui::ExplorerLinkComponent.new(
  value: "7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosgAsU",
  type: :address
) %>

<%# Transaction link %>
<%= render Solrengine::Ui::ExplorerLinkComponent.new(
  value: "5UfDuX...",
  type: :tx,
  network: "devnet"
) %>

NetworkBadgeComponent

<%= render Solrengine::Ui::NetworkBadgeComponent.new(network: "mainnet-beta") %>
<%= render Solrengine::Ui::NetworkBadgeComponent.new(network: "devnet") %>

NotificationComponent

<%= render Solrengine::Ui::NotificationComponent.new(
  message: "Transaction confirmed!",
  type: :success,
  explorer_url: "https://solscan.io/tx/5UfDuX..."
) %>

<%= render Solrengine::Ui::NotificationComponent.new(
  message: "Insufficient balance",
  type: :error,
  dismissible: false
) %>

ThemeToggleComponent

<%= render Solrengine::Ui::ThemeToggleComponent.new %>

WalletButtonComponent

<%= render Solrengine::Ui::WalletButtonComponent.new(
  current_user: current_user,
  login_path: "/auth/login",
  logout_path: "/auth/logout"
) %>

Dark / Light Mode

All components include dark: Tailwind variants out of the box. Add the dark class to your <html> element to activate dark mode, or use the ThemeToggleComponent to let users switch. No extra configuration needed.

Lookbook

After running the install generator, visit /lookbook in development to browse every component with live previews. The gem ships Lookbook preview classes for all 9 components.

To add Lookbook manually (without the generator):

# config/routes.rb
mount Lookbook::Engine, at: "/lookbook" if Rails.env.development?

# config/application.rb
config.lookbook.preview_paths << File.join(
  Gem.loaded_specs["solrengine-ui"].full_gem_path, "previews"
) if defined?(Lookbook)

License

MIT