Ionic Core

@ionic/core is the framework-agnostic foundation of Ionic Framework: a large set of Web Components, built with Stencil, that implement Ionic’s iOS and Material Design UI out of the box. Because the components compile down to standards-based custom elements, they can be dropped into a plain HTML page via a CDN script tag, bundled with Webpack, Rollup, or Vite, or consumed through official bindings for Angular, React, and Vue — all of which proxy back to this same package rather than reimplementing the UI.

Each component lazy-loads by default, so only what’s actually used on a page gets fetched and hydrated, and theming is handled entirely through CSS custom properties rather than a build-time preprocessor step. The package also exposes imperative controller APIs for overlays such as modals, alerts, and action sheets, plus a components-only entry point for bundler-based tree-shaking of individual components.

What You Get

• A large library of production-ready Web Components covering forms, navigation, overlays, and layout
• Built-in iOS and Material Design theming, switchable per-component or globally via config
• Lazy-loading by default, or a tree-shakeable custom-elements build for bundler-based projects
• Overlay controllers (modal, alert, action sheet, toast, loading, popover) for imperative UI flows
• CSS custom properties for full runtime theming without any Sass build step

Common Use Cases

• Adding native-feeling mobile UI to a Capacitor or Cordova hybrid app
• Building a PWA with consistent iOS/Android-adaptive styling
• Using Ionic components in vanilla JavaScript or a framework Ionic has no official binding for
• Standardizing on one component set across an Angular, React, and Vue multi-framework codebase

Under The Hood

Architecture Each UI component lives in its own self-contained directory under the components tree (markup/logic plus per-mode iOS/Material stylesheets and its own test suite), while cross-cutting concerns are centralized in shared global and utils modules — a global bootstrap routine attaches an Ionic namespace to window, resolves the active platform and mode once per page load, and every component reads its visual mode through a shared accessor rather than owning its own theming logic. The official Angular, React, and Vue bindings are generated at build time from this same component tree via the Stencil build config, so framework wrappers are derived proxies rather than parallel reimplementations — a change to a component’s API here propagates outward instead of needing to be hand-ported.

Tech Stack Written in TypeScript and compiled with Stencil, with Sass powering per-mode iOS/Material stylesheets that get bundled and minified into a single CSS file. Framework interop is handled by dedicated Stencil output-target plugins for Angular, React, and Vue that generate proxy components from the compiled metadata. Testing spans Jest for unit specs and Playwright for end-to-end and visual-regression snapshots, with an accessibility testing library layered on top for automated a11y assertions, plus Capacitor packages used in development to validate native-bridge behavior. The published package ships ESM, CJS, a lazy-loading bundle, a hydrate build for server-side rendering, and a tree-shakeable custom-elements build side by side.

Code Quality The codebase pairs fast unit specs for pure logic (helpers, platform detection, config resolution) with an extensive suite of end-to-end specs per component, each backed by a dedicated HTML fixture and checked-in visual snapshots for pixel-level regression detection, plus dedicated accessibility test cases per component. TypeScript strict mode is enabled repo-wide, public component properties, events, and methods carry structured doc comments that feed an automated docs generator, and error handling favors non-throwing warnings over exceptions, appropriate for a UI library that must not crash a host page. Linting (ESLint plus a Sass-specific linter) and formatting are enforced through repo scripts, and a dedicated CI pipeline runs builds, security scanning, and nightly regression jobs.

What Makes It Unique Rather than requiring a rewrite as an app’s needs grow, the package layers three integration paths without duplicating implementation: a CDN script tag for zero-build usage, a standard bundle for direct import, and a components-only tree-shakeable build for bundler consumers who only want specific elements. Its imperative overlay controllers give a small, memorable API for a persistently awkward UI problem — asynchronous overlay lifecycles — instead of pushing that state management onto every consuming app. Because the Angular, React, and Vue bindings are auto-generated from this package’s own component metadata rather than hand-maintained separately, the same component API and behavior stay consistent no matter which framework a team is using.