How-To#
Welcome to the Panel Material UI how-to guides. These guides walk you through:
Fine-tuning component-level styles using
sx, class names, and reusable componentsApplying global theming or palette overrides for consistent branding
Leveraging dark mode to match user preferences or enforce a specific look
Working with the Material Design color system to craft vibrant, accessible UIs
Explore the fundamentals of customizing panel-material-ui components. Learn one-off styling with sx, overriding nested elements, global CSS overrides, and theme inheritance.
Customize the default primary, secondary, and intent-based colors. Set up advanced palette configurations including custom tokens and color schemes.
Learn how to customize fonts, sizes, and text styles.
Customize components changing default props, styles, or adding new variants—by defining a components key within your theme_config.
Seamlessly toggle between light and dark palettes, or enforce one mode across your application. Perfect for low-light usage and user preference support.
Dive into the Material Design color system. Create harmonious palettes, pick accessible shades, and apply them to your Panel components.
Learn how to use icons in panel-material-ui.
Learn how to build custom components extending panel-material-ui.
Learn how to brand your panel-material-ui apps.
Integrations#
Discover panel-material-ui integrates with different libraries to create beautiful, theme-aware plots, tables and more.
Integrate panel-material-ui with Bokeh, hvPlot and HoloViews to create beautiful, theme-aware plots.
Integrate panel-material-ui with Plotly to create beautiful, theme-aware plots.
Where to go next?#
If you’re new to Panel, check out the Getting Started guides to learn the basics.
Already confident with Panel? Dive deeper into advanced theming and usage within these customization guides, or reference Material UI’s design principles for additional inspiration.