# Meteor Design System

## Docs

- [CMS Module](https://mintlify.wiki/shopware/meteor/admin-sdk/api/cms.md): Register custom CMS elements and blocks in the Shopware Administration
- [Composables](https://mintlify.wiki/shopware/meteor/admin-sdk/api/composables.md): Vue composables for reactive data access and state management in the Admin SDK
- [Data Module](https://mintlify.wiki/shopware/meteor/admin-sdk/api/data.md): Core data access methods for subscribing to and managing datasets in the Admin SDK
- [Notification](https://mintlify.wiki/shopware/meteor/admin-sdk/api/notification.md): Display notifications and toasts to users in the Shopware Administration
- [Repository](https://mintlify.wiki/shopware/meteor/admin-sdk/api/repository.md): Entity repository for performing CRUD operations on Shopware entities
- [UI Module](https://mintlify.wiki/shopware/meteor/admin-sdk/api/ui.md): UI components and interactions for modals, menus, and media selection
- [Architecture](https://mintlify.wiki/shopware/meteor/admin-sdk/concepts/architecture.md): Understand the iframe-based architecture of the Admin SDK
- [Context API](https://mintlify.wiki/shopware/meteor/admin-sdk/concepts/context.md): Access Shopware context information from your app
- [Data Handling](https://mintlify.wiki/shopware/meteor/admin-sdk/concepts/data-handling.md): Work with Shopware entities using the Repository pattern and Criteria API
- [Location Module](https://mintlify.wiki/shopware/meteor/admin-sdk/concepts/location.md): Control iframe positioning and behavior in the Shopware Admin
- [Basic App Example](https://mintlify.wiki/shopware/meteor/admin-sdk/examples/basic-app.md): Complete example of a basic admin app with menu items, cards, and action buttons
- [Custom CMS Block Example](https://mintlify.wiki/shopware/meteor/admin-sdk/examples/custom-cms-block.md): Complete example showing how to create a custom CMS element with configuration and preview
- [Data Subscription Example](https://mintlify.wiki/shopware/meteor/admin-sdk/examples/data-subscription.md): Working example showing how to subscribe to and update Shopware data in real-time
- [Building Admin Apps](https://mintlify.wiki/shopware/meteor/admin-sdk/guides/building-apps.md): Step-by-step guide to building admin applications with the Meteor Admin SDK
- [CMS Extensions](https://mintlify.wiki/shopware/meteor/admin-sdk/guides/cms-extensions.md): Learn how to extend the Shopware CMS with custom blocks and elements
- [Custom Admin Modules](https://mintlify.wiki/shopware/meteor/admin-sdk/guides/custom-modules.md): Learn how to add custom modules, menu items, and routes to the Shopware administration
- [Data Management](https://mintlify.wiki/shopware/meteor/admin-sdk/guides/data-management.md): Guide to working with Shopware data using the Admin SDK repository and data APIs
- [Installation](https://mintlify.wiki/shopware/meteor/admin-sdk/installation.md): Learn how to install and set up the Meteor Admin SDK in your Shopware 6 project
- [Introduction](https://mintlify.wiki/shopware/meteor/admin-sdk/introduction.md): Learn about the Meteor Admin SDK and how it helps you build powerful apps for Shopware 6 Administration
- [Quickstart](https://mintlify.wiki/shopware/meteor/admin-sdk/quickstart.md): Build your first Shopware 6 admin app with the Meteor Admin SDK in minutes
- [Avatar](https://mintlify.wiki/shopware/meteor/components/data/avatar.md): An avatar component for displaying user profile pictures or initials with customizable sizes and variants.
- [Data Table](https://mintlify.wiki/shopware/meteor/components/data/data-table.md): A comprehensive data table component with sorting, filtering, pagination, column customization, and bulk actions.
- [Badge](https://mintlify.wiki/shopware/meteor/components/feedback/badge.md): A compact badge component for displaying status indicators, labels, and counts with various variants and sizes.
- [Banner](https://mintlify.wiki/shopware/meteor/components/feedback/banner.md): A banner component for displaying important messages, alerts, and notifications with contextual variants and optional close functionality.
- [Loader](https://mintlify.wiki/shopware/meteor/components/feedback/loader.md): A loading spinner component for indicating processing states and async operations.
- [Notification (Snackbar)](https://mintlify.wiki/shopware/meteor/components/feedback/notification.md): A non-intrusive notification component that appears at the bottom-right of the screen for displaying temporary messages.
- [Toast](https://mintlify.wiki/shopware/meteor/components/feedback/toast.md): A toast notification system for displaying temporary messages with optional actions and auto-dismiss functionality.
- [Button](https://mintlify.wiki/shopware/meteor/components/form/button.md): Interactive button component for user actions
- [Checkbox](https://mintlify.wiki/shopware/meteor/components/form/checkbox.md): Checkbox input for binary choices
- [Colorpicker](https://mintlify.wiki/shopware/meteor/components/form/colorpicker.md): Color selection component with HSL/RGB/HEX support
- [Datepicker](https://mintlify.wiki/shopware/meteor/components/form/datepicker.md): Date and time selection component
- [Email Field](https://mintlify.wiki/shopware/meteor/components/form/email-field.md): Email input field with validation
- [Number Field](https://mintlify.wiki/shopware/meteor/components/form/number-field.md): Numeric input with increment/decrement controls
- [Password Field](https://mintlify.wiki/shopware/meteor/components/form/password-field.md): Password input with visibility toggle
- [Radio Group](https://mintlify.wiki/shopware/meteor/components/form/radio-group.md): Group of radio buttons for single selection
- [Select](https://mintlify.wiki/shopware/meteor/components/form/select.md): Dropdown selection component with search
- [Slider](https://mintlify.wiki/shopware/meteor/components/form/slider.md): Range slider for numeric value selection
- [Switch](https://mintlify.wiki/shopware/meteor/components/form/switch.md): Toggle switch for binary states
- [Text Editor](https://mintlify.wiki/shopware/meteor/components/form/text-editor.md): Rich text WYSIWYG editor with formatting options
- [Text Field](https://mintlify.wiki/shopware/meteor/components/form/text-field.md): Single-line text input component
- [Textarea](https://mintlify.wiki/shopware/meteor/components/form/textarea.md): Multi-line text input component
- [URL Field](https://mintlify.wiki/shopware/meteor/components/form/url-field.md): URL input with protocol toggle and validation
- [Installation](https://mintlify.wiki/shopware/meteor/components/installation.md): Install and configure the Meteor Component Library in your Vue 3 application
- [Card](https://mintlify.wiki/shopware/meteor/components/layout/card.md): A flexible container component for grouping related content with header, toolbar, and footer sections
- [Progress Bar](https://mintlify.wiki/shopware/meteor/components/layout/progress-bar.md): A visual indicator component for showing progress or completion status with customizable labels and error states
- [Tabs](https://mintlify.wiki/shopware/meteor/components/layout/tabs.md): A horizontal or vertical tab navigation component with support for error states, badges, and priority-plus overflow handling
- [Breadcrumbs (Link)](https://mintlify.wiki/shopware/meteor/components/navigation/breadcrumbs.md): Navigation component for creating breadcrumb trails using the Link component
- [Action Menu](https://mintlify.wiki/shopware/meteor/components/navigation/menu.md): Dropdown menu component for creating action menus with items, groups, and keyboard shortcuts
- [Pagination](https://mintlify.wiki/shopware/meteor/components/navigation/pagination.md): A pagination control component for navigating through large datasets with first, previous, next, and last page buttons
- [Modal](https://mintlify.wiki/shopware/meteor/components/overlay/modal.md): A dialog overlay component that displays content in a centered modal window with backdrop.
- [Popover](https://mintlify.wiki/shopware/meteor/components/overlay/popover.md): A floating UI component that displays contextual content in a dismissible overlay, with support for nested views and rich interactions.
- [Tooltip](https://mintlify.wiki/shopware/meteor/components/overlay/tooltip.md): A floating hint component that displays helpful information when users hover over or focus on an element.
- [Component Library Overview](https://mintlify.wiki/shopware/meteor/components/overview.md): Explore 96+ Vue components built for Shopware Apps with TypeScript support and Meteor Design System integration
- [Installation](https://mintlify.wiki/shopware/meteor/design-tokens/installation.md): Install and configure Meteor Design Tokens in your project
- [Design Tokens Overview](https://mintlify.wiki/shopware/meteor/design-tokens/overview.md): Learn about Meteor Design System tokens and their structure
- [Primitives](https://mintlify.wiki/shopware/meteor/design-tokens/primitives.md): Reference guide for Meteor Design System primitive tokens
- [Theme Customization](https://mintlify.wiki/shopware/meteor/design-tokens/theme-customization.md): Learn how to customize and create themes with Meteor Design Tokens
- [Usage](https://mintlify.wiki/shopware/meteor/design-tokens/usage.md): Learn how to use Meteor Design Tokens in your CSS and components
- [Accessibility](https://mintlify.wiki/shopware/meteor/guides/accessibility.md): Learn about accessibility features and best practices in Meteor Design System
- [Contributing](https://mintlify.wiki/shopware/meteor/guides/contributing.md): Learn how to contribute to the Meteor Design System
- [Theming](https://mintlify.wiki/shopware/meteor/guides/theming.md): Customize the Meteor Design System theme to match your brand
- [Icon Library](https://mintlify.wiki/shopware/meteor/icon-kit/icon-library.md): Browse the complete collection of Meteor Icon Kit icons
- [Installation](https://mintlify.wiki/shopware/meteor/icon-kit/installation.md): Install the Meteor Icon Kit in your project
- [Overview](https://mintlify.wiki/shopware/meteor/icon-kit/overview.md): An icon library that follows a minimal, yet highly expressive style perfectly aligned with Shopware's product language
- [Usage](https://mintlify.wiki/shopware/meteor/icon-kit/usage.md): Learn how to use Meteor Icon Kit icons in your application
- [Installation](https://mintlify.wiki/shopware/meteor/installation.md): Install and configure Meteor Design System packages in your project
- [Welcome to Meteor Design System](https://mintlify.wiki/shopware/meteor/introduction.md): Shopware's open-source design system that drives our commerce solutions
- [Quickstart](https://mintlify.wiki/shopware/meteor/quickstart.md): Get up and running with Meteor Design System in minutes