Build outstanding Shopware experiences with Meteor

Design and ship interfaces faster with solid foundations, tailored components, design tokens, and a complete icon set.

Why teams build on Meteor

More than a component library, Meteor is the shared foundation that Shopware and its community design and build on together.

Components and patterns shaped for administrative commerce interfaces, not a generic UI kit.

From data tables and rule builders to settings layouts, every component maps to a real administration pattern, so you assemble screens instead of rebuilding primitives.

Figma libraries, components, and tokens stay aligned, so decisions are made once and applied everywhere.

The same design tokens drive both Figma and code, so a change to a color or spacing value lands in both places at the same time.

Every component ships with keyboard support, ARIA semantics, and light and dark themes.

Focus management and WCAG-compliant color contrast are built in and tested, so accessibility is the default rather than a retrofit.

Explore the docs

Guides and references for every part of Meteor, from guidelines and design tokens to components, content, and agents.

$ npm i @shopware-ag/meteor-component-library

Getting Started

Install the packages and ship your first screen.

Default Focus Active Disabled

Guidelines

Design principles, accessibility, states and conventions.

Button Tab

Accessibility

Keyboard support, ARIA semantics, and focus handling.

Design

Tokens, theming, and how design decisions are encoded.

Design Tokens

Color, spacing, and elevation as CSS custom properties.

Icons

A complete SVG icon set, ready as Vue components.

Save changes

Submit the form data

Content

Voice, tone, and wording guidelines for UI copy.

Components

Vue components, documented and ready to drop in.

const { copy } = useCopyToClipboard()

Utilities

Composables, directives, and plugins for common needs.

Scaffold a settings page with Meteor

Using mt-card, mt-text-field...

Agents

Connect Meteor to AI agents through the MCP server.

Install only what you need

Meteor ships as three independent npm packages. Pull in the full component library, or just the tokens or icons.

Read the developer setup guide

@shopware-ag/meteor-component-library

Vue 3 component set with built-in tokens and icons.

View on npm

npm i @shopware-ag/meteor-component-library

@shopware-ag/meteor-tokens

Design tokens as CSS custom properties, usable in any framework.

View on npm

npm i @shopware-ag/meteor-tokens

@shopware-ag/meteor-icon-kit

SVG icon set, standalone or as Vue components via mt-icon.

View on npm

npm i @shopware-ag/meteor-icon-kit

Build Meteor with us

Meteor is open source. Open an issue, request a feature, or send a pull request on GitHub.

View on GitHub