Skip to content
And Web Components

And Web Components

One component core, built once as Custom Elements. Angular, React, and Vue wrappers generated from the same source.
Getting Started View on GitHub

Framework-agnostic

Components are authored once with Stencil and compiled to standards-based Custom Elements. Angular, React, and Vue wrappers are generated from that same source — no parallel reimplementation to keep in sync.

Themeable

Five built-in themes and five color palettes, driven entirely by CSS custom properties. Swap a theme without touching component markup.

Accessible by default

Keyboard models, focus traps, and ARIA wiring live once in the headless core and are shared by every component built on top of it.

Zero lock-in

Every component is a plain Custom Element first. No build step or framework at all? @andersseen/vanilla-components gives you the same behavior with zero dependencies.

AI-ready

Connect the MCP server (npx -y @andersseen/mcp) and your AI assistant queries the live component catalog for correct, framework-specific code — no guessed props or selectors.

Status

Section titled “Status”

Every package in the stack has at least a base page now, each with a live example:

  • All 24 web-components components: overview, live example, and property/event tables sourced from each component’s generated readme.md (or read directly from source for the handful of compound components where Stencil’s docs-readme output currently collides — see the note on the Accordion page).
  • Headless Core (foundation tier), and the rest of the product core — Motion, Icon, Layout, Behaviors, Vanilla Components.
  • Framework Adapters — Astro, Angular, React, Vue.
  • MCP Server — connect AI assistants to the live component catalog (@andersseen/mcp).

Each of those has one overview page so far, not the full per-API depth the Components section has — expand as needed.