Shadow not working

[Alshathry]

can you please tell how can i fix this , shadow not taking effect when applied to

[bring-shrubbery]

Since this is package is not a native CSS implementation but instead a JS workaround to achieve the squircle effect, I wouldn't ever expect it to work with native CSS properties like shadow, outline and so on. I will work on a solution for this though javascript, but at the moment it's not available at all.

There's a discussion open on this repo that I invite you to participate in, together we can find a good solution for having shadows in this project :) Link here: #9

[Alshathry]

of course thanks

[KrazyManJ]

Hey I would like to contribute to this issue with my own solution for making shadow behind Squircle component.

First approach

So my solution is to use drop-shadow on the Squircle component by the parent element. For this you could just make div as container (for now I will call it as SquircleContainer) with padding inside and then apply the drop-shadow and put Squircle in it, but there is a catch!

Second approach

Due to strange behavior of drop-shadow on text (making it blurry on animations and ruining some aspects of HTML rendering) I made SquircleContainer absolute and set the size of it to the size of siblings content. So now i can render anything that should this contain and apply anything to it.

ShadowSquircle component

So here is my approach to make ShadowSquircle component, hope it helps to understand my solution and helps in developing your websites. It could be extended but this is fine for me, feel free to make it more reusable and compact!
Also feel free to tell me some improvements, right now I've just started learning next.js/react/tailwind so I appreciate any kind of feedback!

I am using nextjs, tailwindcss and squircle-js (ofc 😅)

import React from 'react';
import {Squircle, SquircleProps} from "@squircle-js/react";

//interface for compact typing, just copied it from src of squircle-js
interface ShadowSquircleProps extends SquircleProps<"div">, Omit<React.ComponentPropsWithoutRef<"div">, keyof SquircleProps<"div">> {
    squircleClassName?: string //styling for tailwindcss of squircle, could be added style attribute for squircle also
}

const ShadowSquircle = ({
    children,
    cornerSmoothing,
    cornerRadius,
    squircleClassName,
    className,
    ...props
}:ShadowSquircleProps) => {
    return (
        <div className={"relative "+(className ?? "")} {...props}> //
            <div className="-z-10 m-5 -top-5 -left-5 absolute h-full w-full drop-shadow-lg"> {//SquircleContainer}
                <Squircle
                    cornerSmoothing={cornerSmoothing}
                    cornerRadius={cornerRadius}
                    className={"absolute inset-0 "+(squircleClassName ?? "")}
                />
            </div>
            {children} {//children - siblings of squircle container}
        </div>
    );
};

export default ShadowSquircle;