You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by "gautam-vaibhav302 (via GitHub)" <gi...@apache.org> on 2026/01/27 14:29:23 UTC
[D] Assistance regarding redesigning the login page of the superset [superset]
GitHub user gautam-vaibhav302 created a discussion: Assistance regarding redesigning the login page of the superset
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?
GitHub link: https://github.com/apache/superset/discussions/37492
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] Assistance regarding redesigning the login page of the superset [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] edited a comment on the discussion: Assistance regarding redesigning the login page of the superset
<!-- Answer -->
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](https://github.com/apache/superset/discussions/35571) and the [Superset config](https://github.com/apache/superset/blob/master/superset/config.py).
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!
<!-- Dosu Comment Footer -->
*To reply, just mention [@dosu](https://go.dosu.dev/dosubot?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=reply-with-mention&utm_term=apache%2Fsuperset).*
---
Docs are dead. Just use [Dosu](https://dosu.dev?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-tagline&utm_term=apache%2Fsuperset).
[](https://app.dosu.dev/response-feedback?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-feedback&utm_term=apache%2Fsuperset&message_id=6497b356-d6a0-4063-ba8f-2b5357138ecf) [](https://github.dosu.com/apache/superset?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-ask-repo&utm_term=apache%2Fsuperset) [](https://app.dosu.dev/signup?referrer=openSource&source=github-footer&utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-share-team&utm_term=apache%2Fsuperset)
GitHub link: https://github.com/apache/superset/discussions/37492#discussioncomment-15771739
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] Assistance regarding redesigning the login page of the superset [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] edited a comment on the discussion: Assistance regarding redesigning the login page of the superset
<!-- Answer -->
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](https://github.com/apache/superset/discussions/37057)).
To redesign the login page, you should edit the React component at [`superset-frontend/src/pages/Login/index.tsx`](https://github.com/apache/superset/blob/master/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](https://github.com/apache/superset/wiki/Frontend-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`](https://github.com/apache/superset/blob/master/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!
<!-- Dosu Comment Footer -->
*To reply, just mention [@dosu](https://go.dosu.dev/dosubot?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=reply-with-mention&utm_term=apache%2Fsuperset).*
---
Docs are dead. Just use [Dosu](https://dosu.dev?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-tagline&utm_term=apache%2Fsuperset).
[](https://app.dosu.dev/response-feedback?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-feedback&utm_term=apache%2Fsuperset&message_id=190af588-2c4c-40d4-8c38-7999d66b839f) [](https://github.dosu.com/apache/superset?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-ask-repo&utm_term=apache%2Fsuperset) [](https://app.dosu.dev/signup?referrer=openSource&source=github-footer&utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-share-team&utm_term=apache%2Fsuperset)
GitHub link: https://github.com/apache/superset/discussions/37492#discussioncomment-15618310
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] Assistance regarding redesigning the login page of the superset [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] added a comment to the discussion: Assistance regarding redesigning the login page of the superset
<!-- Answer -->
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](https://github.com/apache/superset/discussions/37057)).
To redesign the login page, you should edit the React component at [`superset-frontend/src/pages/Login/index.tsx`](https://github.com/apache/superset/blob/master/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](https://github.com/apache/superset/wiki/Frontend-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`](https://github.com/apache/superset/blob/master/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!
<!-- Dosu Comment Footer -->
*To reply, just mention [@dosu](https://go.dosu.dev/dosubot).*
---
<sup>How did I do? [Good](https://app.dosu.dev/response-feedback/190af588-2c4c-40d4-8c38-7999d66b839f?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/190af588-2c4c-40d4-8c38-7999d66b839f?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/190af588-2c4c-40d4-8c38-7999d66b839f?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/190af588-2c4c-40d4-8c38-7999d66b839f?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/190af588-2c4c-40d4-8c38-7999d66b839f?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/190af588-2c4c-40d4-8c38-7999d66b839f?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/190af588-2c4c-40d4-8c38-7999d66b839f?feedback_type=other)</sup>
[](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=Superset%20v6.0.0%27s%20login%20page%20is%20now%20a%20React%20component%2C%20so%20changes%20to%20%60/templates/tail_js_custom_extra.html%60%20won%27t%20affect%20it%E2%80%94the%20UI%20is%20no%20longer%20rendered%20by%20Flask%20templates%20but%20by%20frontend%20code%20instead%20%28%5Bdiscussion%5D%28https%3A//github.com/apache/superset/discussions/37057%29%29.%20%0A%0ATo%20redesign%20the%20login%20page%2C%20you%20should%20edit%20the%20React%20component%20at%20%5B%60superset-frontend/src/pages/Login/index.tsx%60%5D%28https%3A//github.com/apache/superset/blob/master/superset-frontend/src/pages/Login/index.tsx%29.%20You%20can%20add%20new%20UI%20elements%20or%20modify%20the%20layout%20directly%20in%20the%20JSX%20returned%20by%20the%20%60Login%60%20function.
%20For%20custom%20CSS%2C%20use%20Emotion%27s%20%60styled%60%20function%20or%20add%20new%20styled%20components%20within%20this%20file.%20Superset%20uses%20Ant%20Design%20for%20UI%20components%20and%20Emotion%20for%20CSS-in-JS%20%28%5Bstyle%20guidelines%5D%28https%3A//github.com/apache/superset/wiki/Frontend-Style-Guidelines%29%29%2C%20so%20follow%20those%20conventions%20for%20consistency.%0A%0AAfter%20making%20your%20changes%2C%20rebuild%20the%20frontend%20assets%20so%20your%20updates%20appear%20in%20the%20application.%0A%0AIf%20you%20want%20to%20apply%20global%20styles%2C%20you%20can%20also%20look%20at%20%5B%60superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx%60%5D%28https%3A//github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx%29%2C%20which%20uses%20Emotion%27s%20%60Global%60%20component%20for%20theming.%0A%0ALet%20me%20know%20if%20you%20need%20more%20specifics%20on%20the%20build%20process%20or%20compone
nt%20structure%21) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/discussions/37492)
GitHub link: https://github.com/apache/superset/discussions/37492#discussioncomment-15618310
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] Assistance regarding redesigning the login page of the superset [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] added a comment to the discussion: Assistance regarding redesigning the login page of the superset
<!-- Answer -->
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](https://github.com/apache/superset/discussions/35571) and the [Superset config](https://github.com/apache/superset/blob/master/superset/config.py).
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!
<!-- Dosu Comment Footer -->
*To reply, just mention [@dosu](https://go.dosu.dev/dosubot).*
---
<sup>How did I do? [Good](https://app.dosu.dev/response-feedback/6497b356-d6a0-4063-ba8f-2b5357138ecf?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/6497b356-d6a0-4063-ba8f-2b5357138ecf?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/6497b356-d6a0-4063-ba8f-2b5357138ecf?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/6497b356-d6a0-4063-ba8f-2b5357138ecf?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/6497b356-d6a0-4063-ba8f-2b5357138ecf?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/6497b356-d6a0-4063-ba8f-2b5357138ecf?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/6497b356-d6a0-4063-ba8f-2b5357138ecf?feedback_type=other)</sup>
[](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=When%20you%20install%20Superset%20as%20a%20Python%20package%20%28for%20example%2C%20via%20pip%29%2C%20the%20React%20frontend%20source%20code%E2%80%94including%20the%20login%20page%E2%80%94is%20not%20included.%20Instead%2C%20only%20the%20pre-built%20static%20frontend%20files%20are%20present%2C%20typically%20under%20%60superset/static/assets%60%20in%20your%20Python%20environment.%20That%27s%20why%20you%20don%27t%20see%20a%20%60superset-frontend%60%20directory.%0A%0ATo%20customize%20the%20login%20page%20%28or%20any%20frontend%20component%29%2C%20you%20need%20to%3A%0A%0A1.%20Clone%20the%20Superset%20source%20code%20from%20GitHub%2C%20which%20includes%20the%20%60superset-frontend%60%20directory.%0A2.%20Make%20your%20changes%20to%20the%20React%20code%2C%20f
or%20example%20in%20%60superset-frontend/src/pages/Login/index.tsx%60.%0A3.%20Build%20the%20frontend%20assets%20by%20running%20%60npm%20install%60%20and%20%60npm%20run%20build%60%20inside%20the%20%60superset-frontend%60%20directory.%0A4.%20Copy%20the%20contents%20of%20the%20build%20output%20%28usually%20%60superset-frontend/build/%60%29%20into%20your%20Python%20package%27s%20static%20assets%20directory%20%28e.g.%2C%20%60superset/static/assets/%60%29%2C%20replacing%20the%20existing%20files.%0A%0AThis%20process%20is%20necessary%20because%20the%20backend%20serves%20only%20the%20static%20files%2C%20not%20the%20source%20code.%20Directly%20editing%20files%20in%20%60superset/static/assets%60%20is%20not%20practical%2C%20since%20they%27re%20compiled%20and%20minified.%20Any%20changes%20you%20make%20will%20be%20overwritten%20if%20you%20upgrade%20or%20reinstall%20Superset%2C%20so%20keep%20that%20in%20mind.%20For%20more%20details%2C%20see%20%5Bthis%20discussion%5D%28https%3A//github.com/apache/s
uperset/discussions/35571%29%20and%20the%20%5BSuperset%20config%5D%28https%3A//github.com/apache/superset/blob/master/superset/config.py%29.%0A%0AIf%20you%27re%20using%20Docker%2C%20you%20can%20automate%20this%20process%20in%20a%20custom%20Dockerfile%20by%20copying%20your%20modified%20frontend%2C%20rebuilding%2C%20and%20replacing%20the%20static%20assets%20inside%20the%20container.%0A%0ALet%20me%20know%20if%20you%20want%20step-by-step%20commands%20or%20more%20details%20on%20any%20part%20of%20this%20workflow%21) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/discussions/37492)
GitHub link: https://github.com/apache/superset/discussions/37492#discussioncomment-15771739
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] Assistance regarding redesigning the login page of the superset [superset]
Posted by "gautam-vaibhav302 (via GitHub)" <gi...@apache.org>.
GitHub user gautam-vaibhav302 added a comment to the discussion: Assistance regarding redesigning the login page of the superset
@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.
GitHub link: https://github.com/apache/superset/discussions/37492#discussioncomment-15771724
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org