Andersseen
GitHub
Framework Agnostic · Built with Stencil

Build Modern UIs with
Web Components

A complete ecosystem of design tokens, layout primitives, animations, icons, and 24+ accessible web components — ready for any framework.

Get Started Documentation
24+ Components
70+ Icons
10 Animations
0 Dependencies
Features

Everything You Need

From layout primitives to complex interactive components — our ecosystem covers the full spectrum of modern UI development.

Web Components

Layout System

Motion Library

Icon Library

Headless Core

Responsive First

Every layout attribute supports responsive breakpoints: cols@md:3, gap@lg:xl

Showcase

See It In Action

Real components, real interactivity. Everything below is powered by our libraries.

Buttons

Multiple variants and sizes with loading states.

Default Secondary Outline Ghost Destructive Loading

Alerts

Contextual feedback messages for user actions.

This is a default informational alert. Something went wrong. Please try again.

Accordion

Collapsible content sections with smooth animations.

Is it accessible? Yes. All components follow WAI-ARIA patterns and support keyboard navigation. Is it framework agnostic? Absolutely. Built with Stencil, our components work as native custom elements in any framework. Can I customize it? Yes. All components use CSS custom properties and are fully styleable with Tailwind CSS.

Tabs

Organize content into switchable tabbed panels.

Overview Code Usage

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.

Animations

Hover over the cards below to see motion-core in action.

Bounce
Scale Up
Scale Down
Slide Up
Slide Left
Slide Right

Icon Library

70+ crisp SVG icons with customizable size, color, and stroke width.

Layout System — and-layout

Pure attribute-driven layouts — no CSS classes. Supports responsive breakpoints, flex, grid, spacing, and typography.

<!-- 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>
Responsive Grid
1
2
3
Flex + Justify Between
Left Center Right
Spacing & Typography
Heading 5 Body text with and-text="p-sm" Caption text
Ecosystem

Modular By Design

Pick only what you need. Each package is independent with zero cross-dependencies.

@andersseen/web-components

Web Components
v0.0.1

24+ production-ready web components: buttons, modals, drawers, dropdowns, carousels, tabs, toast, tooltips, and more.

StencilJSTailwind CSSA11y

@andersseen/layout

CSS Layouts
v0.0.1

Attribute-driven layout system with responsive grid, flex, spacing, and typography. Zero JS — pure CSS.

SCSSResponsiveAttribute API

@andersseen/motion

Animations
v0.0.1

Declarative CSS animations triggered by IntersectionObserver. 10 animation types with configurable duration, delay, and easing.

CSS KeyframesIntersectionObserver~1KB

@andersseen/icon

SVG Icons
v0.0.1

70+ hand-crafted SVG icons, tree-shakeable ESM exports, global registry for on-demand loading.

Tree-shakeableSVGRegistry

Ready to Build?

Start using the full Andersseen ecosystem in your project — works with any framework, zero lock-in.

Install Now View on GitHub
npm install @andersseen/web-components @andersseen/layout @andersseen/motion @andersseen/icon