Review the whole framework from one page.
This site is the canonical coverage surface for Crusher UI Kit. Use it to scan every public element, verify theme behavior, test runtime controls, and catch regressions before packaging or integrating the framework into other products.
Atoms
Low-level controls, feedback, and inline utility surfaces.
Forms
Label, field, hint, and error composition contract.
Molecules
Layout, overlay, selection, and intermediate interaction patterns.
Organisms
Shells, navigation, timelines, tables, and page-level surfaces.
Framework Reach
One system, multiple product shapes
- Static HTML via standalone build and theme CSS.
- Bundler apps via package root, runtime helpers, and exported themes.
- Shared layout primitives for portfolio, SaaS, dashboard, and AI surfaces.
Review Workflow
Use this page as the release gate
- Scan the landing section in light and dark mode for overall balance.
- Check atoms and overlays for spacing, hover, disabled, and empty states.
- Finish with runtime controls, toasts, and table flows before packaging.
What To Watch
Theme regressions show up first in shared surfaces
- Menubar, toolbars, filter bars, chips, and badges.
- Focus rings, contrast, and dense-mode spacing.
- Busy, empty, and validation states that are easy to forget.
Start here to validate the framework-level shell, layout primitives, navigation rails, and dashboard surfaces that make Crusher usable as a product foundation instead of just a component dump.
Composed main surface
Use crusher-app-shell to place navigation and supporting rails, then nest crusher-grid and crusher-stack for page-level composition.
Add crusher-nav-list for reusable side navigation and crusher-stat for dashboard summaries before dropping into tables or domain-specific screens.
Attach filters, status, or command surfaces without bespoke layout CSS.
The same shell contract can wrap a portfolio, admin page, AI workspace, or infra console.
Atoms should hold up across every theme, size, and state. This section is where we validate low-level controls before trusting them inside bigger product compositions.
Buttons
Variants
Sizes
States
Inputs & Toggles
Text entry
Binary controls
Feedback Surfaces
Chips
Badges & tooltip
Code Block
Syntax colors, chrome, and surface contrast should hold across all dialects.
{`const hello = (name) => console.log('Hello', name);
hello('Crusher');`}
Form Primitives
The field contract needs to support neutral, hint, and error states without bespoke page CSS.
Selects & Dropdowns
Static, async, and nested selection surfaces should stay legible in every theme.
Select states
Nested actions
These components handle transient interaction: dialogs, tabs, menus, quick actions, and runtime-driven command surfaces. They are often where theme regressions show up first.
Organisms prove that Crusher can compose into real product surfaces: timelines, data tables, navigation-aware layouts, and dashboard content instead of isolated snippets.
Timeline
Foundation
Tokens, reset, typography.
Components
Buttons, inputs, overlays, data.
Skill Bars
Table States
Busy and empty surfaces should still feel like part of the same framework, not fallback browser UI.
Busy
Empty
This section is the runtime sanity surface. Use it to confirm URL state sync, theme switching, palette behavior, and toast rendering without leaving the project website.
Runtime Control Center
Use this view to verify state sync, jump between focused review sections, and confirm the current route is shareable before you leave the local proving ground.
Focused review links
Current view
Theme Quick Picks
Jump between dialects without scrolling back to the top controls.
Current Runtime State
These values should always mirror the URL and top control panel.
Toast Center
Validate success, info, warning, and destructive feedback without changing sections.
Verification Checklist
Use this as the final pass before carrying Crusher into another repo.
- Check hero, menus, chips, and cards in light and dark mode.
- Cycle density and confirm rows, fields, and toolbars still breathe correctly.
- Trigger validation, toasts, modal, dropdown, and command palette.
- Review normal, busy, empty, and filtered table surfaces.