A reusable UI component library for Blackboard LMS. Provides ViewComponent helpers, ERB partials, Tailwind CSS styles, SVG icons, and Stimulus.js controllers.
Add to your Gemfile:
gem 'neo_components', github: 'openvitae-tech/neo_components'Then run:
bundle installThe gem ships several CSS files. Require them in your application.css:
*= require icons
*= require tooltip
*= require custom
*= require course_progress
*= require carouselAdd the gem's view paths to your tailwind.config.js so Tailwind scans component templates:
content: [
// ...your existing paths
"./path/to/gems/neo_components/app/views/**/*.html.erb",
"./path/to/gems/neo_components/app/helpers/**/*.rb",
]Stimulus controllers are registered automatically via importmap. No additional setup required.
All helpers are automatically included into ActionView::Base by the engine. Use them directly in any view or helper.
<%= icon 'chevron-right', css: 'w-4 h-4 text-primary' %><%= button_component text: 'Save', size: 'sm', type: 'outline',
icon_name: 'check', icon_position: 'right' %><%= chip_component(text: 'Category', colorscheme: 'primary', icon_name: 'check') %><%= accordion_component header: 'Section Title' do %>
Content goes here
<% end %><%= carousel_component cards: card_html_array, loop: true %><%= breadcrumbs_component links: [['Home', root_path], ['Current Page', nil]] %><%= modal_component %>
<%= modal_box_component variant: :success %><%= progressbar_component percentage: 75 %><%= profile_icon_component name: 'John Doe' %><%= menu_component items: menu_items %><%= course_card_component course: @course, enrollment: @enrollment %>
<%= long_course_card_component course: @course %>
<%= program_card_component program: @program, enrolled_program_ids: enrolled_ids %>
<%= long_program_card_component program: @program, enrolled_program_ids: enrolled_ids %>enrolled_program_ids should be a Set of program IDs the current user is enrolled in, computed once before iterating:
enrolled_program_ids = current_user.program_ids.to_set<%= input_text_component name: :email, placeholder: 'Email',
icon_name: 'at-symbol', icon_position: 'left' %>
<%= input_checkbox_component name: :agree, label: 'I agree' %>
<%= input_radio_component name: :role, value: 'admin', label: 'Admin' %>
<%= dropdown_component name: :status, options: [['Active', 'active'], ['Inactive', 'inactive']] %>
<%= textarea_component name: :description, placeholder: 'Enter description' %>
<%= file_selector_component name: :attachment %>
<%= date_select_component name: :date %>The gem ships a built-in showcase to preview all components. Mount the engine in your routes.rb:
mount NeoComponents::Engine => '/neo_components'Then visit /neo_components/ui to browse all available components.
To protect the showcase behind authentication, configure a filter in an initializer:
NeoComponents.authentication_filter = :authenticate_admin!To work on this gem alongside a host app, see the host app README for instructions on pointing Bundler to your local checkout.
MIT