One framework, seven visual identities.
Tap a card to apply its theme across the whole page. Every section below — including the chrome itself — re-renders.
Try every M1 feature without leaving this page.
Each card below is both a marketing beat and a live QA fixture — interactive demo on top, state inspector below. New milestones append more cards.
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.
crusher-card-link turns any card composition into a full-surface navigation target without forcing card content structure.
Highlighted card
Brand-accented border, hover-lift opt-in.
Dense data card
Tighter padding for dashboard tiles.
Muted comfortable card
Lower-emphasis background, generous padding.
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
Icon links
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.
Inline contextual alerts for status feedback. Variant tokens map directly to --crusher-color-status-*. Dismissible alerts persist their closed state to crusher_prefs.alertsDismissed.
crusher_prefs.alertsDismissed[id].
crusher-field is a form-field wrapper that auto-wires aria-labelledby,
aria-describedby, and aria-invalid on the slotted control — no consumer
markup needed. Supports vertical (default) and horizontal orientations.
1 — Vertical + helper text
2 — Vertical + error state (aria-invalid)
3 — Horizontal orientation
4 — Disabled state (label color only; slotted control self-disables)
crusher-disclosure is a thin Lit wrapper over native <details>.
Open state reflects bidirectionally — set the open attribute programmatically or
let the user toggle. Also available as a CSS-only .crusher-disclosure utility for
no-build consumers.
1 — Lit wrapper, summary attr (starts closed)
- Unlimited projects
- Priority support
- Custom domain
2 — Lit wrapper, starts open
3 — CSS-only utility (no Lit import needed)
Plain HTML disclosure
Works without the Lit component. Add class="crusher-disclosure" to any
<details>. Tokens resolve from the same design system.
crusher-stack now accepts orientation (vertical | horizontal)
and wrap. The default is vertical, so existing usage is unchanged.
Horizontal clusters with wrap replace bespoke chip-row and action-bar CSS across consumers.
1 — Vertical (default, unchanged)
2 — Horizontal cluster (chip row)
3 — Horizontal + wrap (tag list / action bar)
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
SaaS connection status
Inline indicator for any external connection (OAuth, DB, webhook, service). Five states covering the realistic lifecycle: connected, disconnected, re-authorize required, error, connecting.
Wire the cta slot's button to your own click handler — the component is a passive status surface, no events fire.
Avatar profile menu
Avatar-anchored dropdown for SaaS app shells. Click the avatar to open the panel — user info at the top, consumer-slotted menu items in the body, pinned footer slot for the sign-out action.
Documentation Contact support
Initials fallback when no avatar-url is set. Set avatar-url="https://…" to render an image instead.
SaaS pricing tiers
Plan-card primitive for billing / upgrade pages. Three tier variants demonstrated below: standard, featured (the recommended tier, visually elevated), and current (the user's active plan). Both flags can coexist.
- 1 connected QBO company
- 5 vendor changes / month
- Email verification
- Community support
- 5 connected QBO companies
- Unlimited vendor changes
- Email + SMS verification (v1.5)
- Audit-grade PDF export
- Priority support
- Unlimited QBO companies
- Unlimited vendor changes
- White-label audit PDFs
- SSO + team roles
- Dedicated success manager
Slot a feature list as the default content; slot the action button into cta; optionally slot a "Most popular" / "Save 20%" pill into badge. The built-in "Current plan" badge appears automatically when current is set.
Invoice list
Past invoices in a table with predefined columns (date / number / amount / status badge / download link). Composes crusher-table; layers invoice-specific formatting (locale-aware dates, currency-aware amounts, provider-agnostic status badges covering Polar / Stripe / Paddle conventions).
Property: .invoices = [{ id, number?, date, amount, currency?, status, download_url?, hosted_url? }]. amount-in-cents if you're passing minor units. Listens for invoice-download event for tracking.
Payment method
Display-only card: brand + last 4 + expiry, plus optional email and Default / Expired badges. CTA slot for the "Manage" link to the provider's hosted portal — card collection happens at the billing provider, not in your UI.
File upload
Drag-drop zone + native file picker + per-file validation (size, accept-types, max-files). Manages selected-files state + UX; the consumer wires the actual upload (fetch / XHR / FormData submit). Designed for CSV imports + bulk uploads.
Listens for files-change event with { files, errors } detail; call .clear() after a successful upload to reset.
Currency input
Locale-formatted on blur (1234.5 → 1,234.50), raw numeric while focused. inputmode="decimal" shows the right mobile keypad. Compatible with native form submission + crusher-field labels/errors.
Sparkline
Opinionated minimal trend — single line / area / dots, no axes or legend. For inline "trend at a glance" cards. NOT a chart library; use a real one (Recharts, Chart.js) for axes / tooltips / multi-series.
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.
Audio Player
Opt-in ambient audio control for creative sites, games, demos, and branded experiences. preload="none" by default — audio is fetched only when the user clicks play.
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.
Style Switcher Showroom
One component, eight live configurations. Every tile below is a real
<crusher-style-switcher inline> writing to the same global
<html> state — toggle dark mode in any tile and they all sync.
The inline attribute (new in 0.3.1) flips the default floating
slide-out into an in-flow block for documentation pages, settings panels,
and embedded admin UIs.
<crusher-style-switcher inline></crusher-style-switcher>
<crusher-style-switcher inline hide-themes hide-colors hide-theme-color>
<crusher-style-switcher inline hide-mode hide-themes hide-theme-color>
swatches attribute.
swatches="sky:#0ea5e9, emerald:#10b981, violet:#8b5cf6"
swatches="rose:#f43f5e, amber:#f59e0b, lime:#84cc16, teal:#14b8a6, indigo:#6366f1, fuchsia:#d946ef"
<crusher-style-switcher inline hide-themes hide-theme-color>
<crusher-style-switcher inline hide-mode hide-themes hide-colors hide-theme-color>
<crusher-audio-player slot="extra" src="..." loop>
</crusher-style-switcher>
<crusher-style-switcher inline>
<crusher-audio-player slot="extra" src="..." loop>
</crusher-style-switcher>