Everything You Need
From layout primitives to complex interactive components — our ecosystem covers the full spectrum of modern UI development.
cols@md:3 gap@lg:xl p@xl:2xl See It In Action
Real components, real interactivity. Everything below is powered by our libraries.
A complete set of 24+ web components designed for production use. Framework-agnostic, accessible, and beautifully styled.
<and-button variant="primary">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 Modular By Design
Pick only what you need. Each package is independent with zero cross-dependencies.
24+ production-ready web components: buttons, modals, drawers, dropdowns, carousels, tabs, toast, tooltips, and more.
Attribute-driven layout system with responsive grid, flex, spacing, and typography. Zero JS — pure CSS.
Declarative CSS animations triggered by IntersectionObserver. 10 animation types with configurable duration, delay, and easing.
70+ hand-crafted SVG icons, tree-shakeable ESM exports, global registry for on-demand loading.
Ready to Build?
Start using the full Andersseen ecosystem in your project — works with any framework, zero lock-in.
npm install @andersseen/web-components @andersseen/layout @andersseen/motion @andersseen/icon