Installation

Quick Start with AI

Paste this into your AI coding tool and let it handle the setup:

Install @shopware-ag/meteor-component-library in this project. Connect the Meteor MCP server at https://meteor.shopware.com/mcp (or read https://meteor.shopware.com/llms.txt) to learn the components and conventions.

Manual setup

Meteor is a monorepo that publishes each part of the design system as a standalone npm package. You can adopt the full stack or pick only what your project needs: the component library, the token set, and the icon kit are all independently installable and versioned.

Component library

The component library builds upon the icon kit and design tokens, and requires Vue 3.

Install

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

Import styles

Add both imports to your application entry point.

import "@shopware-ag/meteor-component-library/styles.css";
import "@shopware-ag/meteor-component-library/font.css";

Configure i18n

English and German translations are bundled. Register vue-i18n before mounting your app.

import { createApp } from "vue";
import { createI18n } from "vue-i18n";
import App from "./App.vue";

const i18n = createI18n({ legacy: false });

createApp(App).use(i18n).mount("#app");

Use components

Components are tree-shakable. Import only what you use.

<script setup>
import { MtButton, MtBanner } from "@shopware-ag/meteor-component-library";
</script>

<template>
  <MtButton variant="primary">Save</MtButton>
  <MtBanner variant="success">Saved successfully.</MtBanner>
</template>

Application shell

For a standalone application, make App the root of your component tree. It lays out the header, both sidebars and the content area, turns the sidebars into drawers below 1280px, applies the color theme, mounts the Snackbar host and enables all future flags, so it replaces the Theme Provider wrapper.

<template>
  <MtApp v-model:theme="theme">
    <template #header><AppHeader /></template>
    <template #sidebar-start><AppNavigation /></template>
    <template #content><RouterView /></template>
  </MtApp>
</template>

Future flags

Some behavior that will become the default in upcoming major releases is available early behind future flags. App enables all of them by default. Without the shell, opt in through the future prop of the Theme Provider to align your application with the next major and reduce the work when you upgrade.

Tokens

The token package is framework-agnostic. Install it independently whenever you need Meteor's design decisions without the component library.

Install

npm install @shopware-ag/meteor-tokens

Import

The light theme defines design tokens via CSS variables on :root and the dark theme replaces the variable values when data-theme="dark" is set on elements as an HTML attribute.

import "@shopware-ag/meteor-tokens/administration/light.css";
import "@shopware-ag/meteor-tokens/administration/dark.css";

Use

.my-component {
  color: var(--color-text-primary-default);
  background: var(--color-elevation-surface-default);
  padding: var(--scale-size-16);
}

Icons

The icon kit can be used standalone in any framework as SVGs, or as Vue components via mt-icon in the component library.

Install

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

Import as SVG

import PlusIcon from "@shopware-ag/meteor-icon-kit/icons/regular/plus.svg";

Use with mt-icon (Vue)

mt-icon is included in the component library and renders any icon by name.

<mt-icon name="regular-plus" /> <mt-icon name="solid-checkmark" size="20px" />

Browser support

Meteor targets all major evergreen browsers. Features used in the component library and token package are limited to those with Baseline Newly available status, a web platform interoperability signal meaning the feature is supported in the latest stable releases of Chrome, Edge, Firefox, and Safari with no polyfills required.

Legacy browsers and non-evergreen environments are not supported.