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. Keeps focus inside, stops background scrolling, closes on Esc.
-
Alert Dialog
An interrupting confirmation: no backdrop close, and confirm and cancel each report back.
-
Confirm Bridge
Replaces the browser's own confirmation box with an alert dialog that works with a screen reader.
-
Drawer
A modal panel sliding in from a screen edge: open state for CSS, exit animation played in full.
-
Command Palette
A command launcher you call up from the keyboard, filtering and moving without leaving it.
-
Dropdown
A region toggled by a button. The open state, Esc, and outside clicks are handled for you.
-
Popover
A floating panel toggled by its trigger. The background stays usable; focus and dismissal are handled.
-
Tooltip
A hover and focus hint: show and hide delays, survives the pointer moving onto it, Esc dismisses.
-
Hover Card
A preview card on hover and focus. Moving the pointer onto its links does not dismiss it.
-
Collapsible
Opens and closes one region in place, and hands its height to CSS so you can animate it.
-
Accordion
Collapsible sections that open independently, with the arrow keys moving between the headers.
-
Read More
Folds long text to a few lines with a way to open it, and hides the button when it already fits.
-
Tabs
Tabbed panels. Moving with the arrow keys selects the tab you land on.
-
Checkbox
Adds parent and child linkage and the partly-selected state to ordinary checkboxes.
-
Radio Group
Radio buttons with a look of your own: chosen with the arrow keys, and one Tab stop in all.
-
Switch
An on/off switch whose state is announced to screen readers.
-
Toggle Group
A row of buttons that hold a pressed state, for picking one or picking several.
-
Rating
A star rating stepped with the arrow keys, stopping at the ends, and clearable.
-
Listbox
A select that opens a list and takes one choice, with focus staying on the button.
-
Combobox
A text field whose choices narrow as you type, and that you can drive from the keyboard.
-
Multi Select
An input that filters choices and takes several of them, shown as chips you can remove.
-
OTP Input
A one-time code entered digit by digit, splitting a paste or an autofill across the boxes.
-
Input Mask
Shapes what you type into a fixed pattern, leaving the caret exactly where you put it.
-
Number Input
A field for stepping a number up and down that never leaves its range.
-
Currency Input
An amount field that groups digits as you type while submitting a clean number.
-
Color Picker
Colour chosen on separate hue, saturation and lightness sliders, tied to a hex field.
-
Slider
A single-handle slider you can move by dragging or from the keyboard.
-
Range Slider
A slider with two handles for the lower and upper end of a range, which never cross.
-
Textarea Autosize
A textarea that grows with what you type, between the row counts you set.
-
Tags Input
Turns what you type into tags, committed with Enter or a separator and removable afterwards.
-
Calendar
A month calendar you drive from the keyboard, with the day grid and month steps handled.
-
Date Range Picker
A calendar where two clicks pick a range, showing the range as you choose it.
-
Time Picker
A time entered as separate hour, minute and AM/PM parts, always submitted in 24-hour form.
-
Relative Time
Shows a time as "3 minutes ago" and keeps rewriting itself as time passes.
-
Local Time
Shows a UTC timestamp from your server in the viewer's own timezone and language.
-
Timer / Countdown
Counts down to a moment into day, hour, minute and second slots, and can pause and resume.
-
Form Field
Ties a control to its description and its error, so a screen reader hears them in the right order.
-
Form Validation
Puts timing around the browser's own validation: it blocks the submit and takes you to the first error.
-
Character Counter
Shows the characters left, flags the limit approaching and passed, and speaks once typing stops.
-
Password Reveal
Shows and hides a password without moving the caret.
-
Password Strength Meter
Shows how strong a password is, as guidance, in a meter and in words.
-
Editable
Editing in place: click or F2 to start, Enter to save, Esc to cancel.
-
Conditional Fields
Shows and hides parts of a form according to what another control is set to.
-
Nested Form
Adds and removes rows in a form, submitted the way Rails nested attributes expect.
-
File Dropzone
Pick files three ways: the button, the keyboard, or dropping them in. Images preview first.
-
Direct Upload Progress
Shows upload progress per file and announces when each one finishes or fails.
-
Auto Submit Form
Submits the form once typing settles, so a search or filter needs no submit button.
-
Submit Once
Lets a submit button be pressed once, blocking double submits and restoring itself afterwards.
-
Unsaved Changes Guard
Remembers what changed in a form and stops you leaving with unsaved edits.
-
Persist
Keeps a half-finished form and puts it back when you return.
-
Optimistic
Shows the result the moment you press, and undoes exactly what failed.
-
Aspect Ratio
Hands a chosen aspect ratio to CSS. Keeping the box proportional stays with your styles.
-
Separator
Gives a divider real meaning, and can make it a focusable one that carries a value.
-
Avatar
Shows a user's picture and swaps in the fallback you prepared when it cannot load.
-
Resizable
Drag a divider to resize the areas either side of it, and do the same from the keyboard.
-
Masonry
Packs cards of different heights into whichever column is shortest, without reordering them.
-
Sidebar
A sidebar that changes shape with the viewport: a collapsible rail when wide, a modal panel when narrow.
-
Scroll Area
Makes a scrolling box reachable from the keyboard and tells CSS where in it you are.
-
Carousel
A slideshow with autoplay you can stop, and slide pickers you can walk with the keyboard.
-
Data Grid
Adds column sorting, row selection and keyboard movement between cells to a table.
-
Bulk Select
Links row checkboxes to a batch action bar and announces how many rows are selected.
-
Filter
Narrows a list to the chosen conditions, whether they are toggled by checkboxes or buttons.
-
Sortable
Reordering that works from the keyboard and with a screen reader too.
-
Overflow Indicator
Says whether there is more to scroll to, so CSS can draw the edge shadows or arrows.
-
Scroll Visibility
Shows and hides an element by how far or which way you scroll, for back-to-top or a hiding header.
-
Sticky State Observer
Tells you the moment a sticky header actually sticks, ready to trigger its shadow.
-
Stick to Bottom
Follows new lines to the bottom, and stops following while you read back.
-
Scroll Restore
Remembers where you were inside a scrolling box, so leaving and coming back shows the same place.
-
Reading Progress
Hands CSS how far through an article you have read, so the progress bar is pure CSS.
-
Smart Sticky Header
The header tucks away as you read down and returns as you scroll up, and always for the keyboard.
-
Count Up
Animates a number up to the value authored in the markup — typically when it scrolls into view.
-
Spinner
Shows and hides a loading indicator, and says out loud when loading starts and ends.
-
Skeleton Manager
Swaps a loading placeholder for the real content, without flickering when it arrives instantly.
-
Progress
Reports how far along something is, with the fraction readable from CSS for the bar.
-
Meter
A meter for a level right now, such as disk usage or battery, banded by thresholds.
-
Frame Loading State
Covers a Turbo frame while it loads, so nothing is pressed twice by mistake.
-
Empty State Observer
Shows an empty message only while a list has nothing in it, and hides it once something arrives.
-
Announcer
One place to tell screen readers what changed. Put it on the page once and every part can use it.
-
Toast
Stacked notifications that reach screen readers and wait while the pointer is on them.
-
Flash Bridge
Turns Rails flash messages into notifications that reach screen readers and clear themselves.
-
Network Status
Tells you when the connection drops and when it returns, urgently and then quietly.
-
Dismissible
Closes a notice or banner without leaving focus stranded when the button disappears with it.
-
Clipboard
Copies text and reports whether it worked, in writing and out loud.
-
Theme Toggle
Remembers a light, dark or match-my-device choice and applies it to the whole page.
-
Highlight on Insert
Marks a freshly inserted element for a moment so CSS can flash it. How it flashes is yours.
-
Idle Detector
Tells you when interaction stops, warns before it does, and reports when you come back.
-
Lazy Frame
Holds a Turbo frame's load until it comes close, and loads it when the keyboard reaches it too.
-
Preview Guard
Hides values that go stale while Turbo is briefly showing you a remembered page.
-
Before Cache Reset
Tidies transient state before a page is remembered, so going back never lands mid-interaction.
-
Anchored Positioning
Keeps a floating element beside its anchor, turning it around when it meets a screen edge.
-
Roving Tabindex
Turns a row of items into a single Tab stop, moved through with the arrow keys.
-
Pointer Drag
The groundwork for dragging: start, move, end and cancel, with the keyboard able to do the same.
-
Intersection
The groundwork that turns an element entering and leaving the screen into events and CSS values.
-
Focus Scope
Puts a focus boundary around any region: Tab cycles inside it and focus returns when you leave.
-
Portal
Moves an element elsewhere on the page, out of a clipping frame or a stacking context.
-
Transition
The groundwork for enter and leave animations, hiding only once the movement has finished.
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.