search

nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
21.83k stars 1.5k forks source link

[Feature Request] Custom Backdrop strength ( Modal ) #3833

Open Vibrant275 opened 3 weeks ago

Vibrant275 commented 3 weeks ago

Is your feature request related to a problem? Please describe.

The current blur strength in Modal Backdrop applied in the UI design is excessive, leading to an unattractive appearance. This issue detracts from the overall user experience, making it difficult for users to focus on important content.

Describe the solution you'd like

I would like to propose a modification to allow for customizable blur strength settings for the backdrop ( Modal ). Also please add an option to disable the outline glow effect in Modal.

Describe alternatives you've considered

Till now i have worked on any alternative. If this feature gets added, it would be really helpful.

Screenshots or Videos

Screenshot 2024-10-02 051907

linear[bot] commented 3 weeks ago

ENG-1422 [Feature Request] Custom Backdrop strength ( Modal )

wingkwong commented 3 weeks ago

I would like to propose a modification to allow for customizable blur strength settings for the backdrop ( Modal ).

You can customize via classNames.backdrop.

Also please add an option to disable the outline glow effect in Modal.

I don't see that effect. Which examples in docs are you referring to?

Vibrant275 commented 3 weeks ago

From classname.backdrop we can set backdrop-opacity but that's give a different effect. Adding 'blur' via tailwind in classnames, but it gives a unexpected results.

There's a little glow effect when setting backdrop to blur please zoom and look closley in the modal edges.

shaman-004 commented 1 week ago

hey can i work on this issue @wingkwong

shaman-004 commented 1 week ago

I need more info on where i can find this code could u please help me on this! ,please provide a code link @wingkwong

MarvinCorro commented 1 week ago

@wingkwong I started to look into this last night and I cannot determine what is the right way to fix this? We can either add blur strengths to the variants so right now we have something like

blur: {backdrop: "backdrop-blur-md backdrop-saturate-150 bg-overlay/30",} from: packages/core/theme/src/components/modal.ts

so rather than that we can do something like

blur-sm: {....}, blur-md: {...}, blur-lg: {...}

but this changes the current API and could break a lot of existing code. Rather if we look at the tailwind-variant docs we see we can overwrite variants (https://www.tailwind-variants.org/docs/overriding-styles#overriding-styles-on-a-single-component), which I believe is already being done (not 100% sure but it looks like its done here)

https://github.com/nextui-org/nextui/blob/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4/packages/components/modal/src/use-modal.ts#L84

So rather this issue should be treated as a bug not a feature request?

@Vibrant275 can you please show how you try to overwrite the current overlay, using the variants overwrite you should be able to overwrite the current blur styles.

Just started looking into this last night please correct me on any facts I may have gotten wrong