Prism UI Components
A showcase of five accessible interface components built with vanilla JavaScript. Tab through the page, or use the sidebar to jump to a component. Every widget's keyboard contract is documented beneath its live demo.
Modal Dialog
A dialog that traps focus while open, renders the page behind it inert, and restores focus to the trigger on close.
Tab cycles inside · Esc closes · Backdrop click closes
Tabs
Automatic-activation tabs: arrow keys both move focus and switch panels. Only the active tab is in the tab order.
What is Prism UI?
Prism UI is a set of dependency-free interface primitives. Each component ships with its interaction semantics baked in — focus management, ARIA state, and keyboard handling are part of the component, not an afterthought.
Recent releases
| Version | Date | Highlights |
|---|---|---|
| 2.4.0 | Mar 2025 | Combobox scroll-into-view fix |
| 2.3.1 | Feb 2025 | Reduced-motion support everywhere |
| 2.3.0 | Jan 2025 | Focus-trap utility extracted |
MIT License
Prism UI is released under the MIT license. You are free to:
- Use it in commercial and personal projects
- Modify and redistribute the source
- Sublicense and sell derivatives
The only requirement is preserving the copyright notice.
← → switch tabs · Tab moves into panel content
Combobox (autocomplete)
A filtering autocomplete using the aria-activedescendant pattern — the listbox itself is never focusable.
Type to filter · ↑↓ highlight · Enter select · Esc close & revert
Accordion
Independent disclosure regions — any number may be open at once. Height animates; hidden toggles only after the close animation completes.
hidden attribute removes content from the accessibility tree and tab order unconditionally — no CSS specificity fight, no off-screen focus ghosts. We animate with height and flip hidden only when the transition ends, so visual state and ARIA state never disagree.prefers-reduced-motion: reduce media query collapses all transition and animation durations to near-zero globally, while the JS still runs the same state machine — so behavior is identical, just instant.Enter/Space toggle · multiple panels may be open · Tab between triggers