Components

Browse 50 examples representing 65 supported Web Awesome components in this starter. Every Web Awesome primitive is available through a Rails ViewComponent wrapper, with the catalogue showing the underlying markup for quick API reference.

Status and feedback

Small signals, identity, loading, and system feedback.

wa-avatar

wa-badge

Variants
Brand Success Neutral Warning Danger
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
Extra small Small Medium Large Extra large
Pills and attention
Brand Success Neutral Pulse Bounce
Decorations and buttons
Ready Synced Requests 25 Errors 3

wa-tag

Rails Hotwire

Remove a tag to see its event.

wa-icon

wa-spinner and progress

68%
68%

wa-skeleton

wa-callout

All components inherit the starter's semantic design tokens.

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 Copy

wa-dropdown and wa-dropdown-item

Project actions Duplicate Archive

UI::MenuComponent

Workspace

Workspace

Settings ⌘, Manage members Export CSV spreadsheet PDF document Email notifications Weekly summary Sign out

wa-tooltip

Keyboard shortcuts

wa-popover

Show context

Popover content can contain links and controls.

wa-dialog

Open example

A reusable modal with managed focus and keyboard dismissal.

Close

wa-drawer

Open drawer

Drawers work well for secondary tasks and navigation.

Close

Form controls

Form-associated controls submit native values and expose accessible labels.

wa-input

wa-number-input

wa-select and wa-option

Low Normal High

wa-textarea

wa-checkbox and wa-checkbox-group

Mentions Project updates

wa-radio and wa-radio-group

Private Workspace

wa-switch

Autosave

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

Workspace Projects Rails Starter

wa-details

Web Awesome owns the interaction; Rails provides the content.

wa-accordion and wa-accordion-item

Generated from DESIGN.md. Thin, typed component APIs.

wa-tab-group, wa-tab, and wa-tab-panel

Preview Usage Rendered component output. Copy the corresponding ERB example.

wa-tree and wa-tree-item

app components controllers views config

Content and media

Containers, rich content, data formatting, and visual media.

wa-card

Deployment Your Rails application is ready to ship. Updated just now

Formatters and wa-relative-time

Bytes
Number
Date
Relative

wa-carousel and wa-carousel-item

Design tokens
Rails wrappers
Hotwire behavior

wa-comparison

Before
After

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 Mobile

Desktop page shell.

wa-popup

Anchor
Precisely positioned

wa-include

wa-animation

Animate me
Bounce Fade in right Flip Tada
Play Pause Restart

Choose a preset, then play it.

wa-random-content

Ship useful defaults.

Customize through tokens.

Keep Rails in control.
Show next

Showing one of three messages.

wa-intersection-observer

Observed when visible

Waiting for the viewport event.

wa-resize-observer

Resize-aware content
Resize Watching the content width.

wa-mutation-observer

Ready for a DOM change.
Change content Watching attributes and child nodes.