Meteor UI Komponenten-Demo

Alle installierten shadcn/ui Primitive in der Shopware Meteor-Optik: Tokens, States, Forms, Navigation, Overlays, Data Display und Messaging auf einer Seite.

Mit der Taste D wechselst du zwischen Light- und Darkmode.

AdministrationMeteor TokensInterDanger State
SpracheDeutschEnglisch

Ikonografie

Alle offiziellen Meteor Icon Kit SVGs aus dem installierten Paket, durchsuchbar nach Name und filterbar nach Stil.

Meteor Icon Kit
144 von 906 passenden Icons werden angezeigt.
471 Regular / 435 Solid
Button-IconKomponentengesteuerte Größe
Semantisches Erfolgs-Icon

Aktionen und Eingaben

Buttons, gruppierte Controls, Felder, Inputs, Optionsgruppen, Validierung und Meteor-Fokuszustände.

Buttons
EUR
Felder

Body Copy nutzt den Meteor `xs`-Rhythmus.

Auswahl-Controls
Veröffentlichung
Im Sales Channel sichtbar

Switch und Checkbox teilen sich dieselbe Fokusbehandlung.

Selects
Combobox und OTP
2
3
0
7
0
1
Textarea, Slider, Toggle

Overlays

Dialog, Alert-Dialog, Sheet, Drawer, Popover, Hover Card und Tooltip-Beispiele.

Feedback und Status

Alerts, Empty State, Skeletons, Spinner, Progress, Badges und Toasts.

Alert
Empty
Keine Ergebnisse
Ändere deine aktiven Filter.
Loading
Erweiterungen werden synchronisiert

Datendarstellung

Tabellen, Diagramme, Kalender, Avatare, Item-Zeilen und Anhang-Vorschauen.

Bestellungen
Tabelle und Diagramm nebeneinander.
Zusammenfassung der letzten Bestellungen.
BestellungStatusGesamt
#10041Bezahlt129.00
#10042Öffnen84.50
Gesamt213.50
Kalender
July 2026
Avatar-Gruppe
MJABLK
+8
Items und Anhänge
Sales Channel

Storefront ist verbunden.

Heute aktualisiert
Flow Builder

3 aktive Flows.

product-feed.csv24 KB
hero-image.webpWird hochgeladen
AspectRatio und Carousel
Shopware
Slide 1
Slide 2
Slide 3

Layout

Resizable Panels, Scroll Areas, Sidebar-Primitive, Direction Provider und Separatoren.

Resizable und ScrollArea
Scrollbares Item 1
Scrollbares Item 2
Scrollbares Item 3
Scrollbares Item 4
Scrollbares Item 5
Scrollbares Item 6
Scrollbares Item 7
Scrollbares Item 8
Scrollbares Item 9
Scrollbares Item 10
Sidebar
Admin
Statische VorschauInset-Inhalt
RTL Direction Provider Beispiel

Messaging

Message-, Bubble- und Message-Scroller-Komponenten für assistentenartige UIs.

Message und Bubble
AI
Assistent
Die Meteor Tokens sind jetzt in der UI-Schicht verdrahtet.
✓
gerade eben
Sieht gut aus. Ship it.
MessageScroller und Collapsible
Scroll-Nachricht 1 mit stabilen Abständen.
Scroll-Nachricht 2 mit stabilen Abständen.
Scroll-Nachricht 3 mit stabilen Abständen.
Scroll-Nachricht 4 mit stabilen Abständen.
Scroll-Nachricht 5 mit stabilen Abständen.
Collapsible Content kann dichte Admin-Informationen aufnehmen.

Accordion

Kompaktes Disclosure-Pattern mit dem gemeinsamen Icon Kit.

Farben, Typografie und Radien sind in shadcn-Semantikvariablen überführt.