Skip to main content
The Meteor Component Library is a comprehensive Vue 3 component library developed by Shopware, based on the Meteor Design System. It provides everything you need to build modern, accessible Shopware Apps that seamlessly match the Shopware administration look and feel.

​
Key Features

  • 96+ Production-Ready Components: Full-featured components for all common UI patterns
  • TypeScript Support: Complete type definitions for enhanced developer experience
  • Tree-Shakeable: Small bundle sizes with automatic tree-shaking
  • Fully Tested: Comprehensive test coverage with interaction and visual tests
  • Accessible: Built with accessibility best practices
  • Documented: Interactive documentation with Storybook

​
Component Categories

Browse components by category to find what you need:

Form Components

Input fields, buttons, checkboxes, selects, date pickers, and more

Layout Components

Cards, empty states, and structural components

Navigation Components

Links, tabs, search, and segmented controls

Feedback Indicators

Badges, banners, toasts, loaders, and progress indicators

Data Display

Data tables, pagination, and entity management

Overlay Components

Modals, popovers, tooltips, and context menus

​
Quick Example

Here’s how easy it is to use Meteor components in your application: 
<template>
  <div>
    <mt-card>
      <h2>User Profile</h2>
      <mt-text-field 
        label="Email" 
        v-model="email"
        type="email"
      />
      <mt-button variant="primary" @click="save">
        Save Changes
      </mt-button>
    </mt-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { MtCard, MtTextField, MtButton } from '@shopware-ag/meteor-component-library';

const email = ref('');

const save = () => {
  // Handle save logic
};
</script>

​
Design System Integration

All components are built to match the Shopware administration interface, ensuring your apps feel native to the Shopware ecosystem. The library uses design tokens from @shopware-ag/meteor-tokens for consistent theming.

​
Interactive Documentation

Explore all components interactively in our Storybook documentation, where you can:
  • View live component examples
  • Interact with component props
  • Test different states and variants
  • Copy code snippets
  • View accessibility information

​
Next Steps

Installation

Get started with installation and setup

Form Components

Explore form inputs and controls

Build docs developers (and LLMs) love

Get started for freeTalk to us