UI Component Code Gallery for React - by Mirado Andria

Icon Frame E

Icon frame with an outline inner border.

Preview

Code

import React from "react";
import styles from "./icon-frame-e.module.css";

type Props = {
  className?: string;
  children?: React.ReactNode;
  size?: "small" | "medium" | "large";
  borderSize?: "none" | "small" | "medium" | "large";
  shadow?: "default" | "none" | "medium";
  rounded?: "none" | "small" | "medium" | "large" | "full";
  hoverAnimation?: "none" | "shadow";
  // Put additional variants here, then define them in the CSS
  variant?: "default" | "gradient-border" | "gradient-border-dark";
};

export default function IconFrameE({
  className,
  children,
  size = "medium",
  borderSize = "medium",
  shadow,
  hoverAnimation,
  rounded = "medium",
  variant = "default",
}: Props) {
  return (
    <div
      className={[
        styles["wrapper"],
        size && styles[`s-${size}`],
        rounded && styles[`r-${rounded}`],
        shadow && styles[`sh-${shadow}`],
        borderSize && styles[`bs-${borderSize}`],
        hoverAnimation && styles[`ha-${hoverAnimation}`],
        styles[`variant-${variant}`],
        className,
      ].join(" ")}
    >
      <div className={styles["gap"]}>
        <div className={styles["content"]}>{children}</div>
      </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.
  • size ("default" | "small" | "medium"): Specifies the size of the frame.
  • 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" | "gradient-border" | "gradient-border-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-blue-light {
  --fg-color: #567fef;
  --bg-color: #ebf0ff;
}