Hey Dash community!
Alongside releases of Plotly Cloud and Plotly Studio, we’re also working on a new major version of Dash, which will include updated designs – built from the ground up – of the set of UI components in Dash Core.
If you’re using Dash Design Kit, the components will look better and work better. Compatibility across the ecosystem is a key priority.
The Dash Core Components as they exist today wrap popular React libraries, but some have gone stale or have more dated designs, so we’ve taken a holistic approach to this redesign and are working in-house using Radix as the basis for these new components. We’re working on this iteratively, so you will see new RCs of Dash 4.0 with new components and fixes for components over time.
Our goal is for the new components to have complete backwards compatibility, so we’re asking you folks to take them for a test drive in your projects and let us know if you have any issues or commentary. All feedback is welcome! We want to build in the open for this project as these components are critical for nearly every Dash app.
You can take a look at these components in a sample app on Plotly Cloud here: Dash
You can see the release here: dash · PyPI
And you can install the new components (so far we have published redesigned dcc.Input, dcc.Slider, and dcc.RangeSlider) with:
pip install --pre dash
Next up: dcc.Dropdown.
Feel free to leave comments and feedback here!
Nathan
7 Likes
Wow – This looks amazing! 
Do the new components handle light and dark mode as well? Will they be easier to do other custom styling?
@nathandrezner Overall looks really good and a welcomed improvement! One small issue I noticed was on the slider page on your Plotly Cloud sample app, the DDK for the selector slider-tooltip-position-control seems a little off. Maybe its just my OCD, its functional however the black line that flashes and allows you to narrow your selection is drifting to the top for me from:
also why is their so much extra white space at the bottom?
No issues with any other Dash Core Components, just that one specific dropdown seems a bit odd in some aspects.
Hey @PipInstallPython - I think the dcc.Dropdown is still the one from dash V3 and hasn’t been updated yet
2 Likes
That’s right @AnnMarieW , dropdown coming soon! Only sliders and inputs so far.
@AnnMarieW no plans to add light/dark mode yet. What kind of custom styling are you thinking?
Any sort of custom styling. For example, in V3 Slider you could use the selectors from the underlying component - such as rc-slider-* and target the track, handle, dot etc etc. But those are now gone.
1 Like
Hey @nathandrezner this is very exciting news and we look forward to trying them out on Vizro! 
We’re especially interested in the refreshed Dropdown that I see is now available in Dash 4.0.0rc1 - we had already built something with the “Select All” functionality that’s similar this, but having it built into Dash already would be much better.
@petar-pejovic has been investigating these components already and might have some feedback on them. But we’re a bit confused by their status and version numbers and hope you can explain.
When you say “our goal is for the new components to have complete backwards compatibility”, presumably you don’t mean compared to the Dash 3.x line but within 4.x itself? We were actually surprised to see anything numbered as 4.x at all given the recent release of Dash 3.0.0, which is clearly still under active development given last week’s release of 3.3.0rc0.
Please could you explain what the intention is with Dash releases, compatibility, rough timelines (always hard to predict I know, but even something very vague would be great and we won’t hold you to it in any way!!), etc. For example: does Dash 4 include Dash 3.3.0rc0 and all future Dash 3.x releases? Or is there some way to use these new Dash 4 components while staying with Dash 3? Basically we don’t want to miss out on any of the new features in either Dash 3.x or 4.x but don’t know what would be the recommended approach to achieve this.
2 Likes
@antony.milne great questions:
- We’re aiming for complete API backwards compatibility between the 4.x series with new core components and 3.x series with existing core components. In essence, we will not be deprecating or removing any Python properties for existing Dash core components.
- There won’t be a way to use the redesigned components in Dash<4.0 once released.
- This is a major release because upgrading will change the look and feel of Dash apps, so it’s not visually backwards compatible. There may also be required styling upgrades for Dash developers. For example, apps heavily customized with CSS may need to be updated, as we’re updating CSS selectors in the new components, though trying to keep friction here to a minimum.
- Future releases will always be supersets of previous releases. We’re releasing 3.3.0rc in parallel with 4.0rc but we anticipate 3.3.0 GA to be released before 4.0.0 GA, and continue linearly from there. We aren’t sure yet if 3.3.0 will be the last minor release in the 3.x line but it’s possible.
- In terms of timeline, we expect 3.3.0 to be released GA in the next week or two and expect 4.0.0 before EOY.
Would love your feedback on the new components when integrated with Vizro: Since y’all are customizing heavily, you may hit more speed bumps than most. I’d encourage opening tickets so we can address those issues as part of the 4.0 RC series!
4 Likes
Awesome, thanks for all the explanation @nathandrezner, that’s very helpful. So just to check I understand…
- 4.0.0 won’t contain any API changes (removals or additions) compared to whatever’s last in the 3.x line, just redesigned components.
- GA releases in the 4.x line will always contain the latest changes from the 3.x line.
Did I get that right? 
Just for the purpose of testing it out now, what are the latest changes from 3.x that are present in 4.0.0rc1? I’m guessing either 3.3.0rc0 or 3.2.0?
Dash v4.0.0rc2 is now available, with updates to the existing components, and new designs for:
dcc.Checklistdcc.RadioItemsdcc.Loadingdcc.TextAreadcc.Tooltip
Take the new RC for a spin if you haven’t tested yet!
You can take a preview of the new components here: Dash
