Assistance regarding redesigning the login page of the superset

[gautam-vaibhav302]

I have been working on superset v6.0.0 for quite a while and now i want to redesign the login page by adding some css styles and some componets to it.

I have tried adding some scripts to the /templates/tail_js_custom_extra.html as some extenstions, but that didn't work as i wasn't able to see any visible changes on the application.

Can anyone suggest me what should be the pathflow that is should follow, what all actual files shall i need to modify and what exactly shall i do?

[dosubot[bot]]

Superset v6.0.0's login page is now a React component, so changes to /templates/tail_js_custom_extra.html won't affect it—the UI is no longer rendered by Flask templates but by frontend code instead (discussion).

To redesign the login page, you should edit the React component at superset-frontend/src/pages/Login/index.tsx. You can add new UI elements or modify the layout directly in the JSX returned by the Login function. For custom CSS, use Emotion's styled function or add new styled components within this file. Superset uses Ant Design for UI components and Emotion for CSS-in-JS (style guidelines), so follow those conventions for consistency.

After making your changes, rebuild the frontend assets so your updates appear in the application.

If you want to apply global styles, you can also look at superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx, which uses Emotion's Global component for theming.

Let me know if you need more specifics on the build process or component structure!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[gautam-vaibhav302]

@dosu but i am using the apache superset as a python package, amd@ i am talking about modifying the code in that package.

And in that i don't see any folder/directory named superset-frontend .

So could you please be specific to how do i make the changes in the superset python package itself, with the above stated requirements, as told earlier in the discussion post.

[dosubot[bot]]

When you install Superset as a Python package (for example, via pip), the React frontend source code—including the login page—is not included. Instead, only the pre-built static frontend files are present, typically under superset/static/assets in your Python environment. That's why you don't see a superset-frontend directory.

To customize the login page (or any frontend component), you need to:

1. Clone the Superset source code from GitHub, which includes the superset-frontend directory.
2. Make your changes to the React code, for example in superset-frontend/src/pages/Login/index.tsx.
3. Build the frontend assets by running npm install and npm run build inside the superset-frontend directory.
4. Copy the contents of the build output (usually superset-frontend/build/) into your Python package's static assets directory (e.g., superset/static/assets/), replacing the existing files.

This process is necessary because the backend serves only the static files, not the source code. Directly editing files in superset/static/assets is not practical, since they're compiled and minified. Any changes you make will be overwritten if you upgrade or reinstall Superset, so keep that in mind. For more details, see this discussion and the Superset config.

If you're using Docker, you can automate this process in a custom Dockerfile by copying your modified frontend, rebuilding, and replacing the static assets inside the container.

Let me know if you want step-by-step commands or more details on any part of this workflow!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}