Apply a Design#
This guide addresses how to select a design system to apply to the components to achieve a consistent design language.
New in version 1.0.0: The design feature was added in 1.0.0 and is actively being developed and improved.
Applying different design systems in Panel can be achieved globally or per component. To select a
design globally set it via the extension:
import panel as pn pn.extension(design='material')
Alternatively you can also explicitly import and set a
design on the config:
from panel.theme import Material pn.config.design = Material
Any component that is rendered will now inherit this design. However, alternatively we can also set a
design explicitly on a particular component, e.g.:
from panel.theme import Bootstrap, Material, Native def create_components(design): return pn.Column( pn.widgets.FloatSlider(name='Slider', design=design), pn.widgets.TextInput(name='TextInput', design=design), pn.widgets.Select( name='Select', options=['Biology', 'Chemistry', 'Physics'], design=design ), pn.widgets.Button( name='Click me!', icon='hand-click', button_type='primary', design=design ) ) pn.Tabs( ('Bootstrap', create_components(Bootstrap)), ('Material', create_components(Material)), ('Native', create_components(Native)), )