RubyUI Component Gallery
Complete interactive reference of all 50 RubyUI components built with Phlex, Stimulus, and Tailwind CSS v4.
Live Theme & Light/Dark Studio
Switch color palettes, toggle Light or Dark mode for any theme, and adjust border radius across all 50 components below.
1. Choose Color Theme
2. Choose Typography / Font Family
3. Appearance Mode (Light / Dark)
4. Border Radius (--radius)
Active Theme Token Preview
Typography
#typographyHeadings, body text, blockquotes, inline code, and links.
Headings (H1 - H4)
Heading 1 — The quick brown fox
Heading 2 — Jumps over the lazy dog
Heading 3 — Pack my box with five dozen liquor jugs
Heading 4 — How vexingly quick daft zebras jump
Text Sizes, Weights, Blockquote, InlineCode & InlineLink
Size 5 Bold Text
Size 4 Semibold Text
Size 3 Medium Text (Default size)
Size 2 Muted Text
Size 1 Caption Text
“After all,” he said, “everyone enjoys a good joke, so it's only fair that they should pay for the privilege.”
Install the package by running bin/rails g ruby_ui:install or visit the documentation.
Link
#linkDisplays an anchor link styled as a text link or button variant.
Badge
#badgeDisplays a status badge in semantic and Tailwind color palettes.
Semantic Variants & Sizes
Color Palette Variants
Toggle
#toggleA two-state button that can be either on (pressed) or off.
Variants, Sizes & States
Toggle Group
#toggle-groupA set of two-state buttons that can be toggled together (single or multiple).
Single & Multiple Selection
Single (Outline)
Multiple (With Spacing)
Theme Toggle
#theme-toggleSwitches between light and dark themes.
Icon & Text Theme Toggles
Shortcut Key
#shortcut-keyVisual keyboard shortcut indicator.
Keyboard Combinations
Clipboard
#clipboardCopies source content to the system clipboard with popover feedback.
Copy Text & Secret Key
Form
#formComposable form fields with labels, hints, and automatic HTML5 validation errors.
Form with Validation, Hint & Disabled States
Input
#inputText, email, password, number, and file input controls.
Input Types & States
Textarea
#textareaMulti-line text input field.
Default, Custom Rows & Disabled
Checkbox
#checkboxControl that allows toggling between checked and unchecked.
Default, Checked, CheckboxGroup & Disabled
Switch
#switchToggle switch between on and off states.
Default, Checked & Disabled Switches
Native Select
#native-selectStyled HTML select dropdown with option groups.
Basic & Grouped Native Select
Select
#selectCustom accessible dropdown select menu powered by Floating UI.
Custom Select with Pre-selected & Placeholder
Combobox
#comboboxAutocomplete input and searchable dropdown list.
Searchable Combobox (Single & Multi-Checkbox)
Input OTP
#input-otpOne-time password input with automatic slot advancing and paste support.
6-Digit Continuous & Grouped OTP
Standard 6-digit
Grouped (2-2-2)
Masked Input
#masked-inputInput fields formatted automatically with Maska patterns.
Phone, Date & Hex Color Masks
Calendar
#calendarInteractive month/year date grid that can bind to an input element.
Standalone Calendar & Linked Input
Date Picker
#date-pickerPopover calendar date selector combined with an input trigger.
Popover Date Picker
Card
#cardFlexible container with header, title, description, content, and footer.
Project Card & Stats Card
Create Course Module
Deploy a new learning curriculum in one click.
Accordion
#accordionVertically stacked interactive headings that reveal content sections.
FAQ Accordion
Yes! RubyUI is 100% open-source and copies component source code directly into your Rails app.
Yes, all Stimulus controllers and JS dependencies are pinned via Importmap and styled with Tailwind v4.
Every component lives in app/components/ruby_ui/ so you can edit them freely.
Collapsible
#collapsibleInteractive container that expands and collapses a panel.
Expandable Repository List
@upboard-school has 3 active courses
Tabs
#tabsLayered sections of content displayed one panel at a time.
Account & Password Tabs
Pagination
#paginationPage navigation with next, previous, and ellipsis links.
Pagination Bar
Separator
#separatorVisually or semantically separates content horizontally or vertically.
Horizontal & Vertical Separators
Upboard School Portal
Student & Faculty Management System
Aspect Ratio
#aspect-ratioDisplays content within a desired width-to-height ratio.
16/9, 4/3, and 1/1 Ratios
Carousel
#carouselTouch-enabled Embla slideshow component for cycling through cards.
Multi-Card Carousel
Module 1
Module 2
Module 3
Module 4
Module 5
Dialog
#dialogModal window overlaid on the primary page.
Modal Dialog Variants
Alert Dialog
#alert-dialogModal confirmation dialog that interrupts the user for destructive or critical actions.
Destructive Confirmation Alert Dialog
Are you absolutely sure?
This action cannot be undone. This will permanently archive the course and remove all student submissions.
Sheet
#sheetSlide-out drawer panel anchored to any edge of the screen.
Right, Left, Top & Bottom Sheets
Popover
#popoverFloating content box anchored to a trigger button.
Dimensions Popover
Hover Card
#hover-cardPreview card triggered when hovering over a link or element.
Instructor Profile Hover Card
Tooltip
#tooltipPopup label that displays information on hover or focus.
Tooltip Placements
Command
#commandFast, searchable command palette modal (⌘K).
Command Palette Dialog
Alert
#alertCallout banners for important user messages and statuses.
Default, Success, Warning & Destructive Alerts
Heads up!
Enrollment Confirmed
Maintenance Scheduled
Payment Past Due
Toast
#toastHotwire-native Sonner toast notifications triggered via JS or Turbo Streams.
Trigger Toast Variants (via window.RubyUI.toast)
Progress
#progressDisplays an indicator showing completion progress of a task.
25%, 60%, and 90% Progress Bars
Syllabus Completion (25%)
Midterm Grading (60%)
Semester Progress (90%)
Skeleton
#skeletonPlaceholder loading shimmer while content is fetching.
Profile & Card Skeletons
Empty
#emptyEmpty state placeholder with icon media, title, description, and CTA.
Empty Course Assignments State
Avatar
#avatarCircular user profile image with initials fallback.
Sizes (xs, sm, md, lg, xl) & Fallbacks
Table
#tableResponsive semantic HTML table with header, body, footer, and caption.
Student Enrollment Table
| Student ID | Name | Status | Credits |
|---|---|---|---|
| STU-101 | Alice Johnson | Enrolled | 15 |
| STU-102 | Marcus Chen | Waitlisted | 12 |
| STU-103 | Elena Rostova | Enrolled | 18 |
| Total Active Credits | 45 | ||
Data Table
#data-tableServer-driven Hotwire table with toolbar search, column visibility, row selection, and pagination.
DataTable with Search, Column Toggle, Selection & Pagination
| Name | Grade | ||
|---|---|---|---|
| Sophia Patel | sophia@upboard.school | 98% (A+) | |
| Liam O'Connor | liam@upboard.school | 92% (A) | |
| Noah Kim | noah@upboard.school | 88% (B+) |
Chart
#chartChart.js visualizations for bar, line, and analytics charts.
Bar & Line Charts
Codeblock
#codeblockSyntax-highlighted code blocks powered by Rouge with one-click copy.
Ruby Syntax Highlighted Codeblock
class Course < ApplicationRecord has_many :enrollments, dependent: :destroy has_many :students, through: :enrollments validates :title, presence: true end
Bubble
#bubbleChat message bubbles with alignment, grouping, reactions, and style variants.
Bubble Variants & Reactions
Message
#messageComplete chat turn layout combining Avatar, Header, Content, Bubble, and Footer.
Two-Way Chat Conversation
Message Scroller
#message-scrollerAuto-scrolling chat transcript viewport with jump-to-latest button.