RAILS HOTWIRE STARTER
Mulberry & Ink
One semantic design source, shared by Tailwind composition and accessible Web Awesome primitives.
Web Awesome owns focus, keyboard, and dismissal behavior. Rails and Stimulus only orchestrate when it opens.
FOUNDATION
Designed to be changed once
Edit DESIGN.md, regenerate the theme, and both layers follow. The starter stays neutral until a product gives it a distinct voice.
- SOURCE
- DESIGN.md
- LAYOUT
- Tailwind v4
- BEHAVIOR
- Web Awesome · 66
FORM CONTROLS
Rails-friendly, browser-native forms
Thin ViewComponent wrappers keep names, values, and validation explicit while Web Awesome owns keyboard and interaction behavior.
Collaboration
Choose how this project communicates with its members.
Light and dark color modes
LIGHT
Clear, quiet hierarchy
Tonal surfaces and restrained borders keep attention on the work.
DARK
The same semantic roles
Dark mode changes surfaces, not the component contract.
COMPLETE CATALOGUE
All 66 components, rendered
These are the free components installed with Web Awesome 3.10. Rails wrappers are used where they add a useful application API; the remaining primitives are shown directly.
Status and feedback
Small signals, identity, loading, and system feedback.
wa-badge
Variants
Appearances
Accent
Brand
Success
Neutral
Warning
Danger
Filled
Brand
Success
Neutral
Warning
Danger
Filled Outlined
Brand
Success
Neutral
Warning
Danger
Outlined
Brand
Success
Neutral
Warning
Danger
Relative sizing
Pills and attention
Decorations and buttons
wa-tag
Remove a tag to see its event.
wa-icon
wa-spinner and progress
wa-skeleton
wa-callout
wa-divider
Content before the divider.
Content after the divider.
Actions and overlays
Triggers, contextual actions, and top-layer interfaces.
wa-button and wa-button-group
wa-copy-button
bin/rails server
wa-dropdown and wa-dropdown-item
wa-tooltip
wa-popover
Popover content can contain links and controls.
wa-dialog
A reusable modal with managed focus and keyboard dismissal.
wa-drawer
Drawers work well for secondary tasks and navigation.
Form controls
Form-associated controls submit native values and expose accessible labels.
wa-input
wa-number-input
wa-select and wa-option
wa-textarea
wa-checkbox and wa-checkbox-group
wa-radio and wa-radio-group
wa-switch
wa-rating
wa-slider
wa-color-picker
wa-known-date
wa-time-input
Navigation and disclosure
Structures for moving through content and revealing detail.
wa-breadcrumb and wa-breadcrumb-item
wa-details
wa-accordion and wa-accordion-item
wa-tab-group, wa-tab, and wa-tab-panel
wa-tree and wa-tree-item
Content and media
Containers, rich content, data formatting, and visual media.
wa-card
Formatters and wa-relative-time
- Bytes
- Number
- Date
- Relative
wa-carousel and wa-carousel-item
wa-comparison
Before
After
wa-animated-image
wa-qr-code
wa-markdown
wa-scroller
OverviewActivityMembersAutomationsIntegrationsSettings
wa-zoomable-frame
Layout and utilities
Composition primitives and browser observers that support larger interfaces.
wa-split-panel
Navigation
Workspace
wa-page
A minimal responsive shell with a header, navigation, and main content.
Desktop page shell.
wa-popup
Precisely positioned
wa-include
wa-animation
Choose a preset, then play it.
wa-random-content
Ship useful defaults.
Customize through tokens.
Keep Rails in control.
wa-intersection-observer
Observed when visible
Waiting for the viewport event.
wa-resize-observer
Resize-aware content
wa-mutation-observer
Ready for a DOM change.