How to level up Plotly Dash UI aesthetics + advice on custom React/TSX components & dynamic infographic banners

Dash Python
1

Hi everyone,

I’m currently building an industrial kiosk web application hosted inside Dataiku. The app runs on a dedicated screen and features:

  • A central carousel for operational updates.

  • An alerts/notice section for real-time priority warnings.

  • Dedicated zones for KPI metrics and visual indicators (like a traffic light status).

Tech Stack History & Context: I started using dash-bootstrap-components (DBC), but recently migrated to dash-mantine-components (DMC) to give the application a more modern and clean aesthetic. I read that it would be advisable to use Tailwind CSS (via CDN).

1. Elevating Aesthetics & React-Only UI Libraries While looking for inspiration, I found many modern component libraries like Shadcn UI, DaisyUI, Aceternity UI, PrimeVue, or Unstyled UI. However, almost all of them are strictly built for React, Vue, or JS frameworks.

  • For those building Dash apps: how do you bring that level of modern polish into Python?

  • Is dash-mantine-components alone enough with custom CSS, or do you rely on extra tricks/libraries to avoid the “flat” dashboard look?

2. Central Carousel Banner: Image Template + Overlay vs. Pure HTML/CSS? Currently, our central carousel displays a static Photoshop image with blank spaces, where I place dynamic number labels using relative CSS positioning (that’s the idea; right now, it’s a static image.).

  • The Dilemma: Is sticking with an image-template + relative overlays acceptable for a fixed kiosk screen, or should I rebuild the entire banner in pure HTML/CSS?

  • Tools tested: I tried using “Screenshot to Code” AI tools to convert the design into HTML/CSS, but the output was too messy.

  • If you recommend pure HTML/CSS, what patterns/libraries (e.g., Mantine Grid + dash-iconify) would you use to build a rich infographic banner directly in Python?

3. Architecture & Dataiku Constraints Given the deployment constraints of Dataiku WebApps, is staying on Dash the right choice long-term, or have you hit a ceiling where migrating to a React frontend + FastAPI backend became necessary?

4. Custom TSX/React Components in Python Has anyone used Plotly’s dash-component-plugins to wrap modern React/TSX libraries into custom Python components for production? How heavy is the maintenance overhead?

5. Animated Split-Flap / Vento Board Easter Egg For a holiday easter egg on the kiosk, I want to add an animated split-flap (flip board / airport style) display to cycle through metrics. Has anyone built or wrapped a CSS/JS split-flap component inside Dash?

Any feedback, repo references, or UI tips would be awesome!

This is what I have so far; I removed the borders and background from the traffic light.
This is what I have so far; I removed the borders and background from the traffic light.1920×1080 95 KB

P.S. Just a quick note: I’m not a dedicated web/frontend developer. While I can comfortably read, adapt, and write code, my main priority is maximizing the effort-to-result ratio—getting the cleanest, most modern UI possible with the least friction and setup time.

2

Switching to dmc and establishing a cloudflare cdn is recommendable.

Practically anything js, ts or react can be ported over to the dash framework. I’d advise to focus on the component level prior to the overarching project.

https://boilerplate.2plot.dev this is a direct way to document and launch new components into the dash ecosystem. Forked from the dmc docs 2plot.dev is a range of components for the dash framework. Good majority of which handle image and interactivity work like 360 POV, mapping, image galleries and a handful of others.

3

Hi @pocholo and welcome to the Dash community :slightly_smiling_face:

This looks like a great project! Nice that you are using DMC (I’m the lead maintainer of that project). Here is my feedback on the questions you asked:

1.Style

For styling, it is possible to use tailwind, but I recommend using the theme prop in the MantineProvider. It makes it possible to manage the entire theme in one place which makes a more cohesive design.

Be sure to check out the Theming and Styling sections of the dmc docs for more information on styling Mantine components.

2. Carousel

For your central carousel banner, have you tried the Carousel component? You can use dmc.Image or any other components for content of each slide.

3. Architecture

I’m not familiar with Dataiku, but Dash is a great platform for the type of app you are building. Plus as of Dash 4.2 you can use Flask, FastAPI or Quart as a backend

4. Custom TSX/React Components

Plotly provides a cookiecutter to create custom components. DMC was created using this template to wrap components from the React Mantine library.

The heavy lifting is mostly in the initial development. Once the component is working, unless you are adding new features or updating dependencies, there typically isn’t a lot of ongoing maintenance that needs to be done.

5. Animated Split-Flap

I haven’t seen anyone make a custom Dash component for this. Looks like there are several React/JS components on NPM that could be wrapped as Dash components. That might be easier than creating your own with CSS.

In Mantine v10 there is a new RollingNumber component. This should be available in DMC v3.0.

6. Development

Check out the llms page for more tips on using AI. You can also get any page of the dmc docs in markdown format by adding `.txt` to the URL.

There is also an MCP server available to use with the dash docs.

Looking forward to hearing how your project is progressing. Feel free to share or ask other questions here!

4

See an example of the dmc Carousel here:

5

Hi @pipinstallpython and @AnnMarieW, apologies for replying to both of you in a single post, but both of your answers were really helpful in determining the best direction forward for this project.

@pipinstallpython, thank you for pointing me toward pre-packaged components to avoid duplicate work and for the advice on keeping the stack simple for a fixed kiosk rather than jumping into an unnecessary rewrite. I’ve also been following your resources and YouTube videos, which have been incredibly useful.

Regarding your note on establishing a Cloudflare CDN alongside DMC, could you elaborate a bit on what specific setup you would recommend here (for instance, serving static vendor assets via CDN vs. caching the kiosk backend through Cloudflare)?

@AnnMarieW, thank you for taking the time to answer following the exact structure of my questions, which made everything very easy to review. Native dmc.Carousel was actually one of the main reasons I migrated to DMC in the first place, specifically to get built-in slide rotation without managing callback boilerplate. Your feedback on the split-flap board also confirms that sticking to a lightweight CSS/JS approach is the right call instead of overcomplicating things, and I really appreciate you sharing the live carousel example along with the LLM developer resources.

Both of your inputs confirmed that the stack itself is fine and that the real priority is visual cohesion. I’m now focusing on standardizing design tokens by adjusting font scales, container dimensions, and layout gaps/spacing. Thanks again to both of you for your time and effort in reading my post and writing back.

6

a cdn isn’t alongside dmc, its alongside the root domain- it is just a specific route for your assets to take, the issue most people have with dash applications is people are trying to push everything from the same host. cdn.website.com handles the render of my assets, I use the render.com and have a postgres database and cloudflare is just a domain routing channel rather than rendering everything from 0.0.0.0:8500 it allows the dash framework to do what it does best which is handle the logic while having a separate route for the heavy payloads assets like images or video.