DOCSEARCHbyAlgolia
Submit Docs

Meteor Design System

website·Indexed 32 days ago

https://shopware.design/

Shopware's open-source design system providing the bedrock for its products. It includes documentation on design principles, accessibility, content experience, human-AI interaction, and installation guides for frontend developers and designers.

Tokens
7.8K
Snippets
31
Records
63
Agent score
57%

What's inside Meteor

  1. Overview of Meteor Design System

    Meteor is the unified design system for all Shopware products. It provides a standardized set of components, styles, visuals, and guidelines to ensure a consistent user experience for merchants across the Shopware ecosystem and to streamline development processes across different teams.

  2. Overview of the Meteor Design System

    Meteor is the unified design system serving as the bedrock for all Shopware products. It provides a consistent language of components, styles, visuals, and guidelines to ensure a unified user experience across the Shopware ecosystem. It is built as an open-source project in collaboration with the community.

  3. Overview of the Meteor Design System

    Meteor is Shopware’s open-source design system used to build and customize commerce solutions. It is built with Vue and focuses on creating accessible, extensible, and elegant user experiences. Key features include over 150 components, 750+ icons, and support for design tokens.

  4. Introduction to the Shopware 6 Admin SDK

    The Meteor Admin SDK is used to build applications and extensions for the Shopware 6 Administration. It leverages modern web technologies and the Meteor Design System components to ensure consistency with the Shopware administration interface.

  5. Choose and install the appropriate Meteor Design System package

    Meteor Design System is distributed as several packages depending on the project requirements:

    • @shopware-ag/meteor-component-library: The main package for Vue.js 3 applications. Includes 145+ components, TypeScript definitions, basic design tokens, and icon components.
    • @shopware-ag/meteor-icon-kit: A standalone library of 850+ SVG icons. Suitable for non-Vue.js frameworks or custom icon systems.
    • @shopware-ag/meteor-tokens: A complete set of 200+ design tokens available in CSS, SCSS, JSON, and JS formats. Used for building custom components or maintaining cross-platform styling.
    • @shopware-ag/meteor-admin-sdk: A development framework specifically for building Shopware 6 Administration apps and extensions. It extends the component library with Shopware-specific APIs.

  6. Apply UX writing principles for Human-AI interactions

    When designing AI-powered features for merchants and consumers, follow these UX writing guidelines to ensure clarity and trust:

    • Be transparent and set expectations: Clearly inform users about the limitations of AI features, explicitly stating what the AI can and cannot do.
    • Use visual cues: Incorporate visual indicators, such as the AI Copilot icon, to signal that the user is interacting with an AI-powered feature.
    • Write in the active voice: Avoid passive voice to keep instructions and feedback direct and clear.
    • Use conversational language: Maintain a conversational tone to make AI interactions feel more natural.

  7. Shopware Accessibility Standards and Compliance

    Shopware adheres to the Web Content Accessibility Guidelines (WCAG) 2.1 AA and the Barrier-Free Information Technology Regulation (BITV 2.0). These standards are used to ensure inclusive shopping experiences and to prepare for the German accessibility law ("Barrierefreiheitsstärkungsgesetz") effective in 2025.

  8. Use Meteor Design Tokens for consistent styling

    Meteor is introducing design tokens to provide a manageable and reusable format for foundational design elements. This allows for a unified design language, streamlined workflows (update a token once to reflect changes everywhere), and easier theming and customization within the Shopware administration. The initial rollout focuses on color tokens, with typography, spacing, and motion tokens following.

  9. Optimize Meteor Design System bundle size

    To reduce the final bundle size of your application, implement the following optimization techniques:
    // 1. Import specific components only to enable tree-shaking
import { MtButton, MtTextfield } from '@shopware-ag/meteor-component-library';

// 2. Configure webpack for tree shaking
// webpack.config.js
module.exports = {
  optimization: {
    usedExports: true,
  },
};

// 3. Load icons on demand using dynamic imports
const iconName = computed(() => props.icon);
const IconComponent = computed(() =>
  defineAsyncComponent(() => import(`@shopware-ag/meteor-icon-kit/icons/${iconName.value}`))
);

  10. Apply Shopware writing goals and principles

    When creating content for Shopware, adhere to these four core writing goals to foster meaningful connections and trust with the audience:

    • Empower: Use language that informs users and encourages them to maximize the value of Shopware products.
    • Respect: Be considerate and inclusive. Avoid patronizing language and respect the reader's time.
    • Educate: Provide the exact information the user needs to succeed, acting as the expert guide without assuming the reader has internal knowledge.
    • Engage: Use a conversational tone and a value-driven narrative to maintain reader interest.

  11. Migrate from legacy Shopware Admin components to Meteor

    When transitioning from legacy Shopware 6 Administration components to the Meteor Design System, replace old sw- components with their Mt equivalents. Meteor provides refined styling, better focus states, and improved accessibility.
    Previous ComponentMeteor Component
    sw-buttonMtButton
    sw-text-fieldMtTextfield
    sw-cardMtCard
    sw-bannerMtBanner
    sw-checkboxMtCheckbox

  12. Access Meteor Design System onboarding resources

    Depending on your goal, use the following resources to integrate Meteor into your project:

    • Installation Guide: Step-by-step instructions for setting up Meteor and its required dependencies.
    • Migration Guide: Tools and best practices for migrating from legacy components to Meteor.
    • Meteor 101: Foundational knowledge regarding the system's mission and key features.
    • FAQ: Troubleshooting tips and common development questions.