Good Bones
UI Lab
A living component showcase for inspecting Good Bones controls, loading behavior, themes, accessibility states, and consumer integration inside 404 Recon.
Preview controls
Theme
Theme changes apply only to the preview stage below. The outer 404 Recon site keeps its normal theme.
Themed preview stage
Good Bones Component Preview
Controls added inside this stage inherit the selected Good Bones theme while the surrounding 404 Recon page remains unchanged.
Available loading primitives
Loader Gallery
Preview loading components exported by Good Bones alongside site-specific consumer loaders. Site-specific entries are not part of the package API.
Current package baseline
Buttons
Compare the current button variants, disabled behavior, and package-owned loading presentation.
Interactive loading transition
Trigger the current package loading behavior and watch whether the control geometry remains stable.
Current package baseline
Checkboxes
Compare normal, checked, disabled, and loading states. The current loading presentation replaces the checkbox chrome with package-owned loading feedback.
Current package baseline
Text Inputs
Compare editable, disabled, read-only, and invalid states. The current package has no unified loading presentation for text inputs.
Current limitation: UiTextInput does not expose a package loading state or loader override in the package-owned control.
Current package baseline
Textareas
Compare editable, disabled, read-only, and invalid textarea states. Labels and validation relationships are currently consumer-owned.
Current limitation: UiTextarea does not expose a unified package loading state, label contract, or loader override in the package-owned control.
Package control
UiSelect
The package-owned select provides theme-aware presentation, keyboard navigation, disabled-option handling, popup positioning, and stable loading feedback.
Good Bones owns the control behavior and shared presentation. 404 Recon owns the option data, placement, and surrounding feature experience.
Good Bones variant
Outline Controls
These controls use the official package-owned outline variant across editable, disabled, read-only, invalid, checked, and loading states.
The outline presentation is shared package behavior across supported controls.
Consumer integration
404 Recon Navigation Loader
This compass belongs to 404 Recon rather than the Good Bones package. The site header uses the inline preset for active, hovered, and pending navigation states.
Active route
Visible but not animated.
Pending or hovered route
Visible and animated using the same inline preset.
Current status: consumer-owned navigation presentation. Good Bones provides the navigation state contract, while 404 Recon owns the compass visual.
Manual review aid
Accessibility and Interaction Checklist
Use this checklist while reviewing each theme, component state, and proposed presentation.
Local session state only. Checklist progress is not persisted.