UI Component Code Gallery for React - by Mirado Andria

Glass Frame B

Glass style frame.

Preview

Card Content

This is a sample text content

Card Content

This is a sample text content

Code

import React from "react";
import styles from "./glass-frame-b.module.css";

type Props = {
  className?: string;
  children?: React.ReactNode;
  shadow?: "default" | "none" | "medium";
  rounded?: "none" | "small" | "medium" | "large";
  hoverAnimation?: "none" | "shadow";
  overflow?: "initial" | "hidden";
  // Put additional variants here, then define them in the CSS
  variant?: "default" | "dark" | "flat";
};

export default function GlassB({
  className,
  children,
  shadow,
  overflow,
  hoverAnimation,
  rounded = "medium",
  variant = "default",
}: Props) {
  return (
    <div
      className={[
        styles["wrapper"],
        styles[`of-${overflow}`],
        rounded && styles[`r-${rounded}`],
        shadow && styles[`sh-${shadow}`],
        hoverAnimation && styles[`ha-${hoverAnimation}`],
        styles[`variant-${variant}`],
        className,
      ].join(" ")}
    >
      <div className={styles["glass-wrapper"]}>{children}</div>
    </div>
  );
}

Design

Figma design file:

Documentation

Properties

Props of the component:

  • className (string): Specifies the CSS class of the component.
  • title (string or ReactNode): Specifies the text that will be used as the title.
  • shadow ("default" | "small" | "medium"): Specifies the size of the shadow of the frame.
  • rounded ("none" | "small" | "medium" | "large"): Specifies the border radius of the frame.
  • hoverAnimation ("none" | "shadow" ): animation on hoverA.
  • variant ("default" | "flat" | "dark" or a customized value): Specifies the color or theme variant of the component. Check out the "Sample CSS customization" below for an example of how to use it.
Sample CSS customization
.variant-dark {
    --bg-color: rgba(0, 0, 0, 0.2);
    --border-color: rgba(0, 0, 0, 0.1);
    --border-outline-color: rgba(0, 0, 0, 0.175);
}