OkonomiUiKit

A Rails Engine gem that provides customizable, Tailwind CSS-based UI components for Rails applications. Built with maximum flexibility in mind, OkonomiUiKit allows you to maintain consistent design patterns across projects while giving you complete control over styling and behavior.

• 🎨 Fully Customizable - Override any component's styling through a powerful configuration system
• 🚀 Rails Native - Built as a Rails Engine following Rails conventions
• 💨 Tailwind CSS - Modern utility-first CSS with intelligent class merging
• ⚡ Stimulus Powered - Progressive enhancement with Stimulus controllers
• 🔧 Form Builder - Enhanced form helpers with consistent styling
• 📦 Component Library - Pre-built components including buttons, badges, tables, alerts, and more
• 🎯 Style System - Component-based styling with config class overrides
• 🔄 Smart Style Merging - Intelligent Tailwind class conflict resolution

Add this line to your application's Gemfile:

gem "okonomi_ui_kit"

And then execute:

$ bundle

In your application layout, include the CSS and JavaScript:

<%= stylesheet_link_tag "okonomi_ui_kit/application.tailwind", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags "okonomi_ui_kit" %>

OkonomiUiKit provides a ui helper that gives you access to all components:

<%= ui.button "Click me", variant: :contained, color: :primary %>
<%= ui.badge "New", color: :success %>
<%= ui.alert "Welcome to OkonomiUiKit!", variant: :info %>

<%= form_with model: @user, builder: OkonomiUiKit::FormBuilder do |f| %>
  <%= f.field_set do %>
    <%= f.field :email do %>
      <%= f.email_field :email %>
    <% end %>
    
    <%= f.field :password do %>
      <%= f.password_field :password %>
    <% end %>
  <% end %>
  
  <%= f.submit "Sign Up", color: :primary %>
<% end %>

• Button - Buttons with multiple variants (contained, outlined, text)
• Badge - Status indicators and labels
• Alert - Notification messages with icons
• Table - Data tables with consistent styling
• Typography - Headings and text with predefined styles
• Code - Inline and block code display

• Field - Form field wrapper with label and error handling
• FieldSet - Group related form fields
• Select - Styled select dropdowns
• Checkbox/Radio - Enhanced checkboxes and radio buttons
• File Upload - Drag-and-drop file uploads

• Dropdown Button - Split button with dropdown menu
• Breadcrumbs - Navigation breadcrumbs
• Link - Styled links with variants

OkonomiUiKit is designed to be highly customizable. You can override component styles by creating configuration classes in your Rails application.

# app/helpers/okonomi_ui_kit/configs/button_base.rb
module OkonomiUiKit
  module Configs
    class ButtonBase < OkonomiUiKit::Config
      register_styles :default do
        {
          root: "font-semibold transition-all duration-200",
          contained: {
            colors: {
              primary: "bg-brand-500 hover:bg-brand-600"
            }
          }
        }
      end
    end
  end
end

• Style Overrides Guide - Complete guide to customizing component styles
• Component Guide - Creating custom components
• CLAUDE.md - AI assistant instructions and architecture details

• Alert - Notification messages and alerts
• Badge - Status indicators and labels
• Button Base - Base button component configuration
• Button Tag - Button element with styling
• Button To - Rails button_to helper with styling
• Code - Inline and block code display
• Link To - Styled link components
• Typography - Text styling with semantic HTML elements

• Page - Page layout structure
• Table - Data tables with consistent styling

• Breadcrumbs - Navigation breadcrumb trails
• Dropdown Button - Split button with dropdown menu
• Navigation - Sidebar navigation menus with groups and links

• Confirmation Modal - Accessible modal dialogs for user confirmations
• Icon - SVG icon rendering with style customization

• Forms Overview - Form building guide and best practices
• Check Box with Label - Checkbox inputs with labels
• Collection Select - Select from a collection
• Date Field - Date input fields
• DateTime Local Field - Date and time inputs
• Email Field - Email input validation
• Field - Form field wrapper
• Field Set - Group related form fields
• Input Base - Base input configuration
• Label - Form labels
• Multi Select - Multiple selection inputs
• Number Field - Numeric inputs
• Password Field - Password inputs
• Search Field - Search input fields
• Select - Select dropdowns
• Show If - Conditional field visibility
• Telephone Field - Phone number inputs
• Text Area - Multi-line text inputs
• Text Field - Single-line text inputs
• Time Field - Time input fields
• Upload Field - File upload fields
• URL Field - URL input validation

For development setup and commands, see CLAUDE.md.

OkonomiUiKit is built as a Rails Engine with:

• Helper-based components - Ruby methods that generate semantic HTML
• Component style system - Consistent styling with intelligent class merging
• Stimulus controllers - Progressive enhancement for interactivity
• Tailwind CSS integration - Modern utility-first styling
• Smart style merging - Intelligent conflict resolution for Tailwind classes

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

# Clone the repository
git clone https://github.com/yourusername/okonomi_ui_kit.git
cd okonomi_ui_kit

# Install dependencies
bundle install

# Start the development server
bin/dev

# Run tests
bin/rails test

# Run linter
bin/rubocop

The gem is available as open source under the terms of the MIT License.

OkonomiUiKit is maintained by the Okonomi team. We're passionate about creating tools that make Rails development more enjoyable and productive.

• 📚 Documentation
• 🐛 Issue Tracker
• 💬 Discussions