Askr
UI & Components

Integrations

Use integrations with the current published Askr packages.

  • @askrjs/askr0.0.59

How to use integrations

Integrations should use the standard themed surface unless the application is deliberately implementing its own design system on top of @askrjs/ui.

  1. Import the themed component from @askrjs/themes/components; use @askrjs/ui directly only when building a custom visual system.
  2. Keep integrations labels, state, and application actions visible at the call site instead of styling internal DOM nodes.
  3. Verify keyboard behavior, focus movement or return, disabled state, and both standard themes.
async function loadEditor() {
  const { MonacoEditor } = await import('@askrjs/monaco');
  return MonacoEditor;
}

// Call from the route or interaction that first needs the editor.
const Editor = await loadEditor();

Editor integration

@askrjs/monaco wraps Monaco Editor in a single component, MonacoEditor, instead of building a new editor abstraction on top of it. You get Monaco's real options object, model, and namespace back through props and refs, so anything you already know about Monaco's API still applies. The wrapper's job stops at mounting, disposing, and keeping the host div sized — everything else is Monaco.

Icons and logos

@askrjs/lucide ships one Askr component per Lucide SVG, and @askrjs/logos does the same for a handful of brand marks (GitHub, Facebook, Microsoft, Apple, Google). Both packages generate their components with the same createIcon/createLogo helper over @askrjs/askr/foundations, so every icon and logo shares one SVG contract: consistent data attributes, size tokens, and accessibility behavior. Neither package ships a runtime registry or a string-keyed <Icon name="x" /> API — you import the named component you want.

Code splitting

MonacoEditor loads the Monaco namespace lazily by default rather than pulling it into your main bundle. Pass your own loadMonaco function, or an already-resolved monaco namespace via the monaco prop, if you want to control when and how the editor's (large) dependency is fetched. Lucide and logo imports are the opposite problem: each icon is its own module built with preserveModules and sideEffects: false, so a bundler drops anything you don't import without you doing anything special.

SSR constraints

Monaco is a browser-only editor built around the DOM and web workers, so MonacoEditor has no meaningful server-rendered output beyond its host div — plan for a loading state or client-only boundary around it. Icons and logos are plain SVG markup and render identically on the server and the client, including their aria-hidden and data-* attributes, so they need no special SSR handling.