GitHub Repository: holoviz/panel
Path: blob/main/doc/tutorials/basic/design.md
²⁰¹³ views

Apply a Design

Panel empowers you to effortlessly style your apps using pre-built designs, regardless of your prior experience in frontend development. These designs offer ready-made visual themes for your applications:

"bootstrap": Embraces the elegance and responsiveness of the Bootstrap library.
"fast": Harnesses the speed and modern aesthetics of the Microsoft Fast Design library.
"material": Draws inspiration from Google's Material Design, providing a clean and intuitive user experience.
"native": Ensures compatibility and consistency with the default styling inherited from Bokeh.

Additionally, Panel supports both "default" and "dark" themes to further tailor the appearance of your application.

:::{note} In the sections below, you can run the provided code directly in the Panel documentation by utilizing the green run button, executing it in a notebook cell, or saving it in a file named app.py and serving it with panel serve app.py --dev. :::

Change the Design

Let's elevate our apps with a clean and intuitive user experience by applying the "material" design.

Run the following code:

import panel as pn

pn.extension(design="material")

pn.Column(
    pn.widgets.FloatSlider(name="Slider"),
    pn.widgets.TextInput(name="TextInput"),
    pn.widgets.Select(name="Select", options=["Wind Turbine", "Solar Panel", "Battery Storage"]),
    pn.widgets.Button(name="Click me!", icon="hand-click", button_type="primary"),
).servable()

Feel free to experiment by changing the design to "bootstrap", "fast", or "native".

Change the Theme

Choose a tab to proceed:

::::{tab-set}

:::{tab-item} Python Script :sync: script

Run the code below:

import panel as pn

pn.extension(design="fast", theme="dark")

pn.Column(
    pn.widgets.FloatSlider(name="Slider"),
    pn.widgets.TextInput(name="TextInput"),
    pn.widgets.Select(name="Select", options=["Wind Turbine", "Solar Panel", "Battery Storage"]),
    pn.widgets.Button(name="Click me!", icon="hand-click", button_type="primary"),
    styles={"background": "#181818"} # styles only necessary in the Panel docs
).servable()

:::

:::{tab-item} Notebook :sync: script

In the notebook, the theme automatically adapts to the current JupyterLab theme.

Run the code below:

import panel as pn

pn.extension(design="material")

pn.Column(
    pn.widgets.FloatSlider(name="Slider"),
    pn.widgets.TextInput(name="TextInput"),
    pn.widgets.Select(name="Select", options=["Wind Turbine", "Solar Panel", "Battery Storage"]),
    pn.widgets.Button(name="Click me!", icon="hand-click", button_type="primary"),
).servable()

Experiment by switching the JupyterLab Theme from Dark to Light or vice versa.

The experience should look something like this:

Jupyterlab Theme Switching

:::

::::

Recap

You don't need to be a frontend developer to style your Panel apps. With high-level designs, you can effortlessly tailor your applications:

"bootstrap": Based on the Bootstrap library.
"fast": Based on the Microsoft Fast Design library.
"material": Based on Material Design.
"native": The default styling inherited from Bokeh.

Panel also supports the "default" and "dark" themes.

References

How-to

Explanation

Designs and Theming