Skip to content

Metro UI Components List

Components Overview

Metro UI offers a wide range of components. Here are some of the most commonly used ones:

Layout Components

Grid: A responsive 12-column grid system
Container: Centered content container with responsive widths
Splitter: Resizable split panels
Panel: Simple content containers with optional headers and footers
Box: Basic container for content
Cube: 3D cube container with rotating sides
Flip Card: Two-sided card that can be flipped
Hero: Large banner-like container for featured content
Hover Box: Container that changes appearance on hover
Resizable: Elements that can be resized by the user
Resizer: Component for resizing elements
Window: Draggable and resizable window-like container

App Bar: Top navigation bar for applications
Nav View: Side navigation panel
Tabs: Tabbed interface for content organization
Tabs Material: Material design styled tabs
Menus: Various menu styles (dropdown, context, etc.)
Breadcrumbs: Navigation path indicator
Button Group: Group of related buttons
Command Button: Button with icon and text
Context Menu: Right-click menu
D-Menu: Dropdown menu
Drop Menu: Customizable dropdown menu
Dropdown: Dropdown selection component
Dropdown Button: Button with dropdown menu
H-Menu: Horizontal menu
Hamburger: Mobile menu toggle button
Page Control: Multi-page navigation control
Pagination: Page navigation controls
Ribbon: Office-style ribbon interface
Ribbon Menu: Menu in ribbon style
Sidebar: Side panel for navigation or content
Sidenav Counter: Side navigation with counters
Sidenav M3: Metro 3 style side navigation
Sidenav Simple: Simple side navigation
Split Button: Button with primary and dropdown actions
T-Menu: Tabbed menu
Task Bar: Windows-like taskbar
V-Menu: Vertical menu
Wizard: Step-by-step navigation interface
Wizard Classic: Classic style wizard interface

Form Components

Input: Text input fields with various styles and validations
Input Common: Common input field styles
Input Material: Material design styled inputs
Input Mask: Input with formatting mask
Select: Dropdown selection fields
Checkbox: Selection control for multiple choices
Radio: Selection control for single choice
Radio Buttons: Group of radio buttons
Custom Checkbox: Styled checkbox controls
Datepicker: Date selection control
Timepicker: Time selection control
Calendarpicker: Calendar date selection
Wheelpicker: Wheel-style picker control
Color Picker: Color selection control
Color Selector: Alternative color selection interface
Double Select Box: Two-column selection interface
Double Slider: Range slider with two handles
File Input: File upload control
Form: Container for form elements
Keypad: Numeric or custom keypad input
Rating: Star rating input
Slider: Range selection control
Switch: Toggle switch control
Tag Input: Input for creating tags
Textarea: Multi-line text input
Tokenizer: Token-based input field
Validator: Form validation component

Feedback Components

Dialog: Modal dialog boxes
Toast: Brief notifications
Notify: More prominent notifications
Progress: Progress indicators
Activity: Loading animation
Adblock: Adblock detection notification
Cookie Disclaimer: Cookie usage notification
Hint: Tooltip-style help text
Info Box: Information display box
Info Button: Button with information popup
Info Panel: Panel for displaying information
Overlay: Screen overlay for modals
Popover: Popup information container
Remark: Highlighted remarks or notes
Ripple: Material design ripple effect
Spinner: Loading spinner animation

Data Display

Table: Enhanced data tables with sorting and filtering
List: Simple list display
List View: List displays with various formatting options
Cards: Content containers with flexible layouts
Timeline: Chronological content display
Accordion: Collapsible content panels
Badges: Small count or status indicators
Calendar: Month view calendar display
Carousel: Slideshow for cycling through elements
Chart Card: Card with embedded charts
Chips: Compact elements representing attributes
Collapse: Expandable/collapsible content
Countdown: Timer counting down to a date
Counter: Animated number counter
Donut: Donut chart visualization
Gauge: Gauge chart visualization
Gravatar: Globally recognized avatar
Image Box: Container for images with effects
Image Compare: Before/after image comparison
Image Grid: Grid layout for images
Image Magnifier: Image zoom functionality
Lightbox: Image gallery with lightbox effect
Marquee: Scrolling text display
Remote Table: Table with remote data source
Skill Box: Skill level visualization
Social Box: Social media links display
Sorter: Sortable list or grid
Streamer: Stream of content items
Tag: Label or category indicator
Tile: Metro-style tile display
Treeview: Hierarchical data display
Working Tree: Tree structure with checkboxes

Media Components

Audio Button: Button with audio playback
Audio Player: Audio playback control
Image Button: Button with image
Media Player: Generic media playback control
Video Player: Video playback control
Vegas: Fullscreen background slideshow

Utility Components

Action Button: Floating action button
Analog Clock: Clock with analog display
Bulls: Bullet point indicators
Charms: Windows 8 style charms bar
Clock: Digital clock display
Cloak: Element visibility control
Cookie: Cookie management
Directive: Custom directive implementation
Drag Items: Drag and drop functionality
Draggable: Make elements draggable
Eval: JavaScript evaluation component
Export: Data export functionality
Gradient Box: Box with gradient background
Hotkey: Keyboard shortcut handling
HTML Container: Container for HTML content
Icon Box: Container with icon
Image Placeholder: Placeholder for images
Master: Master-detail interface
MD5: MD5 hash generation
Package Manager: Package management interface
Remote Dataset: Remote data handling
Shortcut: Keyboard shortcut display
Storage: Local storage management
Swipe: Touch swipe detection
Template: Template rendering
Theme Switcher: Theme selection control
Typer: Typewriter text effect
Viewport Check: Viewport detection