Meteor UI Component Demo

All installed shadcn/ui primitives in the Shopware Meteor look: tokens, states, forms, navigation, overlays, data display, and messaging on one page.

Press D to switch between light and dark mode.

AdministrationMeteor TokensInterDanger State
LanguageGermanEnglish

Iconography

All official Meteor Icon Kit SVGs from the installed package, searchable by name and filterable by style.

Meteor Icon Kit
144 of 906 matching icons shown.
471 regular / 435 solid
Button iconComponent-controlled sizing
Semantic success icon

Actions And Inputs

Buttons, grouped controls, fields, inputs, option sets, validation, and Meteor focus states.

Buttons
EUR
Fields

Body copy uses the Meteor `xs` rhythm.

Choice Controls
Publishing
Visible in sales channel

Switch and checkbox share the same focus treatment.

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

Overlays

Dialog, alert dialog, sheet, drawer, popover, hover card, and tooltip examples.

Feedback And Status

Alerts, empty state, skeletons, spinner, progress, badges, and toasts.

Alert
Empty
No results
Try changing your active filters.
Loading
Syncing extensions

Data Display

Tables, charts, calendar, avatars, item rows, and attachment previews.

Orders
Table and chart side by side.
Latest order summary.
OrderStatusTotal
#10041Paid129.00
#10042Open84.50
Total213.50
Calendar
July 2026
Avatar Group
MJABLK
+8
Items And Attachments
Sales channel

Storefront is connected.

Updated today
Flow Builder

3 active flows.

product-feed.csv24 KB
hero-image.webpUploading
AspectRatio And Carousel
Shopware
Slide 1
Slide 2
Slide 3

Layout

Resizable panels, scroll areas, sidebar primitives, direction provider, and separators.

Resizable And ScrollArea
Scrollable item 1
Scrollable item 2
Scrollable item 3
Scrollable item 4
Scrollable item 5
Scrollable item 6
Scrollable item 7
Scrollable item 8
Scrollable item 9
Scrollable item 10
Sidebar
Admin
Static previewInset content
RTL direction provider sample

Messaging

Message, bubble, and message scroller components for assistant-style UI.

Message And Bubble
AI
Assistant
The Meteor tokens are now wired into the UI layer.
✓
just now
Looks good. Ship it.
MessageScroller And Collapsible
Scroll message 1 with stable spacing.
Scroll message 2 with stable spacing.
Scroll message 3 with stable spacing.
Scroll message 4 with stable spacing.
Scroll message 5 with stable spacing.
Collapsible content can hold dense admin information.

Accordion

Compact disclosure pattern using the shared icon kit.

Colors, typography and radii are bridged into shadcn semantic variables.