Meteor 101

Meteor’s mission

Meteor serves as the bedrock for all of Shopware's products, a unified system encompassing components, styles, visuals, and guidelines. It helps us work together more efficiently and provides a unified process across teams. This collective approach ensures the creation of empowering and delightful experiences for all merchants within the Shopware ecosystem.

Be part of Meteor

We believe in Open-Source software – we listen to our Community and build Meteor in collaboration with merchants, developers and designers. The best and brightest ideas come from you. If you wish to contribute to the Meteor Design System, please read our contributing guidelines for a smooth start.

->

Meteor in numbers

At Shopware, Meteor serves 62+ Projects, providing 145+ components, 850+ Icons, and 200+ tokens. The Shopware Administration is the largest project using Meteor Design System. In Figma our team has Ø 740 component inserts weekly. Meteor is maintained by a dedicated group of Designers, UX Engineers and QA Specialists.

As of 2024, Meteor is used by 7.6K+ people outside Shopware. (This number includes downloads on the Figma community, usage on npm and GitHub)

Key Features

• 🎨 Design System: Complete design language with tokens, components, and guidelines
• ⚡ Vue.js 3: Modern component library built for Vue.js 3+
• ♿ Accessible: WCAG 2.1 AA compliant components out of the box
• 🌙 Dark Mode: Built-in support for light and dark themes
• 📱 Responsive: Mobile-first components that work on any device
• 🎯 TypeScript: Full TypeScript support with comprehensive type definitions
• 🌳 Tree Shakable: Import only what you need for optimal bundle size
• 🔧 Customizable: Extensive theming capabilities via design tokens

What's included

Component Library

145+ production-ready Vue.js components covering:

• Form controls: Buttons, inputs, checkboxes, date pickers
• Navigation: Tabs, breadcrumbs, pagination, search
• Feedback: Banners, loaders, progress indicators
• Layout: Cards, grids, containers, spacing utilities
• Data display: Tables, lists, badges, tooltips

Icon Kit

The Meteor Icon Kit is our best performing resource on the Figma Community:

• 850+ icons in a consistent style
• Available as Vue components and SVG files
• Optimized for web performance
• Regular updates with new icons

Meteor Icon Kit on Figma Community

Design Tokens

200+ design tokens covering:

• Colors: Primary, secondary, semantic colors for light/dark modes
• Typography: Font sizes, weights, line heights
• Spacing: Consistent spacing scale
• Borders: Radius, width, and style values
• Shadows: Elevation and depth definitions

Design Resources

• Figma Libraries: Complete component and icon libraries
• Documentation: Comprehensive usage guidelines
• Examples: Real-world implementation examples
• Templates: Starter templates for common use cases