Welcome to the comprehensive reference for Material Design Components by BOLTUIX! This document links to detailed guidelines for all 33 components, interactive building blocks for user interfaces. Components are categorized by purpose: Action, Containment, Communication, Navigation, Selection, and Text Input. Click the links to explore and implement these in your projects! 🚀 https://www.boltuix.com/2025/06/material-3-guidelines-2025.html
Components that trigger actions or interactions in the UI.
| Component | Description | Reference Link |
|---|---|---|
| Buttons | Core components for triggering actions in a UI | 📖 Material 3: Buttons |
| Icon and Segmented Buttons | Buttons with icons or segmented options | 📖 Material 3: Icon and Segmented Buttons |
| FAB | Floating action buttons for primary actions | 📖 Material 3: FAB |
| FAB Menus | Menus expanding from FABs for related actions | 📖 Ultimate Guide to Material 3: FAB Menus |
| Chips | Enter info, make selections, filter, or trigger actions | 📖 Ultimate Guide to Material 3: Chips |
Components that group or hold content together.
| Component | Description | Reference Link |
|---|---|---|
| Cards | Display content and actions for a single subject | 📖 Material 3: Cards |
| Dividers | Thin lines to group content in containers | 📖 Material 3: Dividers |
| Bottom Sheets | Secondary content anchored to the bottom of the screen | 📖 Ultimate Guide to Material 3: Bottom Sheets |
| Side Sheets | Secondary content anchored to the side of the screen | 📖 Ultimate Guide to Material 3: Side Sheets |
Components for feedback, updates, or prompts.
| Component | Description | Reference Link |
|---|---|---|
| Snackbars | Brief updates about app processes at screen bottom | 📖 Ultimate Guide to Material 3: Snackbars |
| Dialogs | Important prompts in a user flow | 📖 Ultimate Guide to Material 3: Dialogs |
| Progress Indicators | Show unspecified wait times or process duration | 📖 Ultimate Guide to Material 3: Progress Indicators |
| Loading Indicators | Visual cues for short loading processes | 📖 Ultimate Guide to Material 3: Loading Indicators |
| BadgeDrawable | Badges for notifications or status on UI elements | 📖 Material 3: BadgeDrawable |
Components for switching between views or screens.
| Component | Description | Reference Link |
|---|---|---|
| Top App Bars | Navigation bars at the top of the screen | 📖 Ultimate Guide to Material 3: Top App Bars |
| Bottom App Bars | Navigation and action bars at the bottom | 📖 Material 3: Bottom App Bars |
| Bottom Navigation | Switch between UI views at the bottom | 📖 Material 3: Bottom Navigation |
| Navigation Drawers | Switch between UI views on larger devices | 📖 Ultimate Guide to Material 3: Navigation Drawers |
| Navigation Rail | Switch between UI views on mid-sized devices | 📖 Ultimate Guide to Material 3: Navigation Rail |
| Tabs | Organize content across different screens and views | 📖 Ultimate Guide to Material 3: Tabs |
| Menus | Display a list of choices on a temporary surface | 📖 Ultimate Guide to Material 3: Menus |
| Docked Toolbar | Fixed toolbars for frequent actions | 📖 Ultimate Guide to Material 3: Docked Toolbar |
| Floating Toolbar | Dynamic toolbars for contextual actions | 📖 Ultimate Guide to Material 3: Floating Toolbar |
Components for selecting options or values.
| Component | Description | Reference Link |
|---|---|---|
| Checkboxes | Select one or more items or toggle on/off | 📖 Material 3: Checkboxes |
| Radio Buttons | Select one option from a set | 📖 Ultimate Guide to Material 3: Radio Buttons |
| Switches | Toggle the selection of an item on or off | 📖 Ultimate Guide to Material 3: Switches |
| Sliders | Make selections from a range of values | 📖 Ultimate Guide to Material 3: Sliders |
Components for entering or displaying text.
| Component | Description | Reference Link |
|---|---|---|
| Text Fields | Allow users to enter and edit text in a UI | 📖 Ultimate Guide to Material 3: Text Fields |
| Search Bar | Enter keywords or phrases for relevant information | 📖 Ultimate Guide to Material 3: Search Bar |
| Date Pickers | Select a date or range of dates | 📖 Ultimate Guide to Material 3: Date Pickers |
| Time Pickers | Help users select and set a specific time | 📖 Ultimate Guide to Material 3: Time Pickers |
| MaterialTextView | Enhanced text display component for Material 3 | 📖 Ultimate Guide to Material 3: MaterialTextView |
Specialized components for enhanced UI experiences.
| Component | Description | Reference Link |
|---|---|---|
| Carousel | Scrollable collection of items on and off screen | 📖 Material 3: Carousel |
| Material Kit UI | Modern App Template for Compose, Kotlin, and Flutter | 📖 BOLTUIX on CodeCanyon |
- Purpose: These links direct to detailed Material 3 guidelines by BOLTUIX, updated for 2025, to help developers and designers implement components effectively.
- Implementation: Refer to each linked guide for usage, best practices, and code examples. Combine with source code and official Material 3 docs for full context.
- Professional Tip: Ensure accessibility (e.g., ARIA labels, contrast ratios) and test on multiple devices for a seamless user experience! ✅
- Developed By: BOLTUIX
- Year: 2025
- Goal: Empower developers to build modern, intuitive UIs with Material 3 components.
- Explore More: Visit BOLTUIX for additional resources and updates! 🌍
╔════════════════════════════════════╗
║ Material 3 by BOLTUIX - 2025 ║
║ Build Beautiful, Functional UIs! ║
╚════════════════════════════════════╝