Updates to Dash Design Kit for Good-Looking Data Apps

We’re of the opinion that building data apps and dashboards that look good should feel easy. You've got data to wrangle, decisions to influence...the styling should just work.

That's exactly what we've been focused on with Dash Design Kit over the past year. From shiny new components to smarter defaults, our latest updates to Dash Design Kit make your apps look polished without the CSS headaches.

Here's the tour.

Dash Design Kit 3.0: Looking good with Dash 4

Dash 4 came with a visual refresh across all its core components: new dropdowns, slick date pickers, redesigned sliders, and even a brand new Button component. They look great out of the box.

Every redesigned component in Dash Design Kit automatically picks up your theme's colors, typography, and styling.

The full list of refreshed components:

Inputs, Sliders, and RangeSliders
Dropdowns (now with smoother animations)
TextAreas, RadioItems, and Checklists
DatePickers (both single and range, completely redesigned)
Tooltips (finally, readable tooltips!)
The all-new dcc.Button

Dash Design Kit 2.2: Small changes, big difference

Sometimes it's the little things. Dash Design Kit 2.2 tackled a bunch of paper cuts that had been bugging our users.

A way to opt out

Ever tried embedding a third-party component that has its own styling, only to watch Dash Design Kit CSS stomp all over it? We heard you. The new ddk.Exclude component lets you carve out zones where Dash Design Kit styles don't apply:

ddk.Exclude([
    that_fancy_widget_with_its_own_css
])

Charts that breathe

We switched chart legends to vertical by default. Before, horizontal legends were eating into your chart real estate, especially when you had more than a few series. This update shines the spotlight on your data.

Cards that respond

We swapped out media queries for container queries on cards. Translation: cards now resize based on their own container, not the browser window. Multi-column layouts finally behave the way you'd expect.

The little fixes

No more double borders on dropdowns when you hover
Tooltips are easier to read (opaque backgrounds!)
Dropdown arrows that sit where they should
Bootstrap styles that stay in their lane

Say hello to some new components

The 2.x releases brought a handful of new components:

ddk.Hero

Every app deserves a proper introduction. The Hero component gives you a polished header section with your app's title, a description, your logo, and even little metadata tags showing when the data was last updated or who owns the app.

ddk.Hero(
    title="Q4 Sales Dashboard",
    description="Everything you need to know about pipeline and revenue.",
    logo="/assets/logo.png",
    tags=[
        ddk.Tag(text="**Updated:** Today", icon="clock"),
        ddk.Tag(text="**Owner:** Sales Ops", icon="user"),
    ],
    button={"text": "Download PDF", "icon": "download"}
)

ddk.Footer

Same idea as Hero, but for the bottom of your app. Great for version numbers, environment badges, or support contact info.

ddk.Tag

Those little metadata chips you see in the Hero and Footer? You can use them anywhere. They support icons and even Markdown formatting:

ddk.Tag(text="**Status:** Live", icon="circle-check")

ddk.ControlsHeader

A horizontal bar for your global filters that sticks to the top of the page as users scroll. Primary controls stay visible; secondary controls tuck away in a drawer until needed. Clean and functional.

ddk._ControlPanel

Got a lot of controls? The ControlPanel organizes them into collapsible sections, either as tabs across the top or as an accordion on the side. It's still in alpha (hence the underscore), but it's already a game-changer for complex apps.

Ready to upgrade?

It's one command:

pip install --upgrade dash-design-kit

For Dash 4 apps:

pip install --upgrade dash dash-design-kit

Please keep in mind:

If you've written custom CSS: The Exclude component changed how specificity works across DDK. Give your overrides a quick test after upgrading.
If you liked horizontal legends: Add legend=dict(orientation="h") to your figures.
If you're mapping the globe: Geo plots now center on (0, 0) instead of the middle of the USA. International users, rejoice.

Looking to the future, you can expect more theming options, better performance, and tighter integration with the rest of the Plotly ecosystem.