One UI ecosystem.
Every framework.
Components, layout, motion, icons, headless logic and DOM behaviors — independent libraries built on web standards, not on a framework. Take one, or take all of them.
Everything You Need
Six independent libraries covering the full span of a modern UI — from a CSS-only layout attribute to a fully accessible modal.
and-splitterand-draggableand-tooltip See It In Action
Nothing below is a screenshot or a mock. Every control on this page is the published package, running in your browser right now.
39 custom elements designed for production use — accessible, themeable, and tied to no framework.
<and-button variant="default">Click me</and-button>
Import the loader and call defineCustomElements(). That's it — use the
tags anywhere in your HTML.
and-layout<!-- Responsive Grid -->
<div and-layout="grid cols:1 cols@md:2 cols@lg:3 gap:md">
<div>Card 1</div>
<div>Card 2</div>
<div>Card 3</div>
</div>
<!-- Flex Layout -->
<div and-layout="horizontal align:center justify:between gap:md">
<span>Left</span>
<span>Right</span>
</div>
<!-- Typography -->
<h2 and-text="h2 weight:bold align:center">
Title
</h2> and-text="p-sm" Caption text Enhance HTML You Already Have
Not every interaction deserves a component. @andersseen/behaviors wires splitters, drag & drop, tooltips and dialogs onto plain elements through and-* attributes — no framework, no wrapper, no re-render.
Resize me.
Both panels are ordinary divs.
and-splitter="horizontal" and-splitter-min="20" -
Components -
Layout -
Motion -
Icons
and-drop-zone and-drop-zone-sortable and-tooltip="…" and-tooltip-placement="top" and-dialog-trigger="target-id" Focus is trapped here
Tab around — focus stays inside. Press Escape or click the backdrop to close, and focus returns to the button that opened it.
Same behavior, different position
The only difference between this and the centred dialog is
and-dialog-position="right".
Modular By Design
13 packages, no cross-dependencies between the core six. Every version below is read from the workspace at build time, so this list cannot drift from what is actually released.
The libraries that do the work. Each one is independent — take one, take all six.
Accessible, themeable custom elements — buttons, modals, drawers, dropdowns, carousels, tabs, toasts, tooltips and more. Shadow DOM, so your CSS and theirs never collide.
Attribute-driven layout and typography: grid, flex, spacing and text scales with responsive breakpoints. Zero JavaScript — pure CSS.
Declarative CSS animations triggered on enter, hover or tap via IntersectionObserver, with configurable duration, delay and easing. Honours prefers-reduced-motion.
Hand-drawn SVG icon set with tree-shakeable ESM exports and a global registry for on-demand loading. Import three icons or all of them.
Pure state machines for accordion, dropdown, modal, tabs, toast and friends. No DOM, no styles — bring your own renderer.
Progressive enhancement for HTML you already have: splitter, drag & drop, tooltip and dialog, wired up by and-* attributes.
Thin, generated bindings so the same elements feel native in your framework of choice.
Generated standalone Angular directives with typed inputs and outputs over the same custom elements.
Generated React components with typed props and real event handlers instead of manual ref wiring.
Generated Vue components with typed props and v-model-friendly bindings.
One-line integration that registers the elements and injects the stylesheets for an Astro site.
How your editor and your AI assistant learn what this ecosystem can actually do.
Serves the live component catalog to AI assistants over the Model Context Protocol, generated from the real custom-elements manifest.
Installable, per-library skills for coding agents. Teach your assistant one package at a time instead of the whole ecosystem.
Experimental proof of concept: the same headless core rendered as plain custom elements with no build-time framework at all.
Ready to Build?
Start with the four packages driving this page — everything else is additive, and nothing locks you in.
npm install @andersseen/web-components @andersseen/layout @andersseen/motion @andersseen/icon Built for AI-Native Development
However your team codes with AI, this ecosystem meets it there — a live MCP server, installable agent skills, and copy-paste context so assistants generate real components instead of plausible ones.
ClaudeCursorVS Code @andersseen/skills Zero-configAny LLM Connect the MCP server
No install — it runs on demand. Add it to your assistant, then ask it to build with And Web Components.
npx -y @andersseen/mcp // .mcp.json (Claude) — or .vscode/mcp.json / .cursor/mcp.json
{
"mcpServers": {
"and-web-components": {
"command": "npx",
"args": ["-y", "@andersseen/mcp"]
}
}
}