The library
Component catalog (Core)
Stimeo UI is a headless Stimulus UI framework for Rails. Each component ships behavior only (ARIA state, keyboard, focus); the look is owned by this Playground's CSS.
Pick a component from the sidebar or the cards below to inspect its live demo, copy-paste markup, and keyboard interactions.
Core is open source under the MIT License. See the license →
Narrow the catalog by tag. Combining tags shows components that match all of them.
Rails / Turbo integration
WAI-ARIA APG pattern
-
Dialog
An accessible modal dialog. Traps focus, locks background scroll, and closes on Esc.
-
Alert Dialog
An interrupting confirmation: modal with no backdrop close, plus confirm/cancel events.
-
Confirm Bridge
Replaces Turbo's native confirm() with an accessible alert dialog.
-
Drawer
A modal slide-over panel from a screen edge: data-state sync and deferred hidden.
-
Command Palette
An accessible command launcher. Combines Dialog + Combobox with virtual focus, roving keys, focus traps, and inline filtering.
-
Dropdown
A disclosure toggled by a button click. Manages ARIA state, keyboard, and outside-click.
-
Popover
A non-modal floating panel toggled by a trigger, with focus management and dismissal.
-
Tooltip
A hover/focus hint with show/hide delays, a hoverable bridge, and Escape dismissal.
-
Hover Card
A rich preview card opened on hover/focus with open/close delays and a hoverable bridge.
-
Collapsible
A single disclosure region that expands and collapses in place.
-
Accordion
Collapsible sections that toggle independently, with header focus navigation.
-
Read More
Toggles a CSS line-clamp, hiding the toggle when the text already fits.
-
Tabs
Tabbed panels with automatic activation, roving tabindex, and arrow-key navigation.
-
Checkbox
Native checkboxes with tri-state parent/child 'select all' linkage and a change event.
-
Radio Group
Single selection for custom radios: aria-checked, roving tabindex, arrow selection.
-
Switch
An accessible on/off toggle button driven entirely by aria-checked.
-
Toggle Group
Toggle buttons with aria-pressed, single/multiple selection, and Toolbar-style roving.
-
Rating
An ordinal star scale: aria-checked, roving tabindex, clamped arrows, hover preview, clearing.
-
Listbox
A select-only listbox: open a popup, pick one option, with activedescendant navigation.
-
Combobox
A text input with a filtered listbox popup (list autocomplete) and full keyboard support.
-
Multi-Select
A combobox that filters options and selects several, shown as removable chips.
-
OTP Input
Accessible multi-cell passcode / PIN input supporting auto-advance, backspace retreat, and smart paste splitting.
-
Input Mask
Formats a field against a fixed pattern, preserving the caret.
-
Number Input
A spinbutton: step increment/decrement, range clamping, and bound-disabled buttons.
-
Currency Input
An amount field that groups digits while keeping a clean number to submit.
-
Color Picker
Per-channel sliders and a hex input that stay in two-way sync.
-
Slider
A single-thumb range slider with keyboard control and pointer drag.
-
Range Slider
A two-thumb range slider with mutually constrained handles.
-
Textarea Autosize
Grows a textarea to fit its content, clamped between minRows and maxRows.
-
Tags Input
Free-input chips: type and press Enter or a delimiter to add removable tags.
-
Calendar
Keyboard-navigable calendar grid compliant with WAI-ARIA APG Date Picker Dialog pattern.
-
Date Range Picker
A two-point date range picker with preview and presets, derived from Calendar.
-
Time Picker
Segmented hour / minute / AM-PM spinbuttons composing a 24-hour value.
-
Relative Time
Renders a timestamp as "3 minutes ago" and keeps it fresh, via Intl.
-
Local Time
Renders a UTC timestamp as an absolute, viewer-localized time via Intl.
-
Timer / Countdown
Counts down to a deadline into day/hour/minute/second slots, with pause/resume.
-
Form Field
Wires a control to its description and error: aria-describedby, aria-invalid, and aria-errormessage.
-
Form Validation
Orchestrates native constraint validation: when to check, blocking submit, focus, and routing messages into form fields.
-
Character Counter
Shows the remaining/used character count and flags the over-limit state, announced politely.
-
Password Reveal
Toggles a password field between masked and visible, preserving focus.
-
Password Strength Meter
Scores a password with a lightweight heuristic and drives a meter + label.
-
Editable
Inline edit: click or F2 to edit text in place, Enter to save, Escape to cancel.
-
Conditional Fields
Shows/hides and enables/disables regions based on a trigger control's value.
-
Nested Form
Adds/removes fields_for rows from a template — the Headless cocoon.
-
File Dropzone
Pick files by click, keyboard, or drag-and-drop, with image previews.
-
Direct Upload Progress
Renders per-file ActiveStorage Direct Upload progress with aria + status announcements.
-
Auto-Submit Form
Debounces input/change and submits the form via Turbo — no submit button.
-
Submit Once
Disables the submit button on submit to block double submits, then restores on completion.
-
Unsaved-Changes Guard
Detects form edits and warns before leaving with unsaved changes (unload + Turbo visit).
-
Persist
Saves form values to localStorage and restores them across reloads and Turbo visits.
-
Optimistic
Optimistic UI for Turbo forms: apply instantly, keep on success, roll back precisely on failure.
-
Aspect Ratio
Supplies a ratio as a CSS custom property so consumer styles keep the box proportional.
-
Separator
APG separator semantics, with an optional focusable value-bearing variant.
-
Avatar
Shows a user image and swaps to a fallback when it fails to load.
-
Resizable
Dynamic pane splitter leveraging robust PointerCapture dragging and WAI-ARIA APG Splitter keyboard controls.
-
Masonry
Packs variable-height cards into the shortest column while keeping DOM order.
-
Sidebar
A responsive collapsible sidebar: an inline rail that becomes a modal off-canvas panel below a breakpoint.
-
Scroll Area
Adds keyboard reachability and scroll-state hooks to a natively scrolling region.
-
Carousel
A slideshow with pausable autoplay and a roving tablist of slide pickers.
-
Data Grid
Adds column sorting, row selection, and roving cell navigation to a table.
-
Bulk Select
Links row checkboxes to a sticky batch action bar with a live count.
-
Filter
Shows/hides a collection of items by the set of active facet tokens.
-
Sortable
Single-list reorder that is genuinely keyboard- and screen-reader-accessible.
-
Overflow Indicator
Detects remaining scroll room and exposes data-overflow-start / data-overflow-end.
-
Scroll Visibility
Shows or hides an element based on scroll amount or direction (back-to-top, hide-on-scroll).
-
Sticky State Observer
Detects whether a position: sticky element is stuck and exposes it as data-stuck.
-
Stick-to-Bottom
Auto-follows appended content to the bottom of a scroll container — unless the user has scrolled up.
-
Scroll Restore
Persists and restores an inner scroll region's position across Turbo navigations.
-
Reading Progress
Publishes how far the reader has scrolled through an article as a CSS custom property.
-
Smart Sticky Header
Hides the header on scroll-down and reveals it on scroll-up (with a focus-reveal guarantee).
-
Count Up
Animates a number up to the value authored in the markup — typically when it scrolls into view.
-
Spinner
Toggles a loading indicator with a live region, aria-busy, and anti-flicker timers.
-
Skeleton Manager
Swaps a placeholder for real content, with aria-busy and an anti-flicker floor.
-
Progress
Syncs a progressbar's ARIA value attributes and exposes the ratio for the bar.
-
Meter
Syncs a meter's ARIA value attributes and segments it by threshold.
-
Frame Loading State
Shows a skeleton and sets aria-busy while a turbo-frame loads, blocking interaction and retreating focus.
-
Empty State Observer
Shows an empty placeholder when a list has no items and hides it once one arrives.
-
Announcer
Shared polite/assertive live-region base for screen-reader announcements.
-
Toast
An accessible notification queue. Implements WAI-ARIA live regions, maximum limits, and pausing on hover/focus.
-
Flash Bridge
Turns Rails flash elements into live-region announcements with auto-dismiss and stacking.
-
Network Status
Detects online/offline and toggles a live-region banner on change.
-
Dismissible
Closes a banner or notice while keeping focus from being orphaned.
-
Clipboard
Copies text to the clipboard and announces completion in a live region.
-
Theme Toggle
Persists a light/dark/system choice and applies it to the root.
-
Highlight on Insert
Briefly flags a freshly inserted element so CSS can flash / fade it in, then clears it.
-
Idle Detector
Fires idle after a span of no interaction (with an optional earlier prompt) and active on return.
-
Lazy Frame
Defers a turbo-frame's load until it nears the viewport — or focus reaches it.
-
Preview Guard
Hides or placeholders a volatile element while Turbo is showing a cached preview.
-
Before-Cache Reset
Resets transient UI on turbo:before-cache so Back restores a clean page.
-
Anchored Positioning
Positions a floating element against an anchor, flipping/shifting it away from edges.
-
Roving Tabindex
Makes a set of items a single Tab stop, navigated with the arrow keys.
-
Pointer Drag
A normalized drag lifecycle (start / move / end / cancel) with a built-in keyboard alternative.
-
Intersection
A declarative IntersectionObserver: visibility as events and CSS hooks.
-
Focus Scope
A standalone focus boundary — Tab cycling, initial focus, and restore — for any region.
-
Portal
Moves an element elsewhere in the DOM (e.g. under body) on connect and cleans up on disconnect.
-
Transition
Stages enter/leave CSS classes for showing and hiding an element, settling on transitionend or a safety timeout.
The demos in this category run on Action Cable, enabled in this playground's Rails app. The adapter is async (no Redis — a single Puma process, so cross-tab broadcasts just work), mounted at Rails' default /cable, with anonymous connections. The server side is three thin rebroadcast channels (TypingChannel / PresenceChannel / LikesChannel), and the page's single shared WebSocket is handed to the controllers via setCableConsumer.
No components match the selected tags.