Package Exports

react-ios-liquid-glass
react-ios-liquid-glass/dist/index.js
react-ios-liquid-glass/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-ios-liquid-glass) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Liquid Glass Component

A lightweight React component that applies a liquid glass effect to its children, providing a frosted glass aesthetic with customizable properties.

Live Editor

Try the component interactively: https://react-ios-liquid-glass-doc-2ej2.vercel.app

Installation

You can install the react-liquid-glass package using one of the following package managers:

npm

npm install react-ios-liquid-glass

Yarn

yarn add react-ios-liquid-glass

pnpm

pnpm add react-ios-liquid-glass

Usage

Import the LiquidGlass component and its CSS file, then wrap your content with the component.

import "react-ios-liquid-glass/dist/index.css";
import { LiquidGlass } from "react-ios-liquid-glass";

function App() {
  return (
    <LiquidGlass>
      <div>Your content here</div>
    </LiquidGlass>
  );
}

Props

The LiquidGlass component accepts the following props:

Prop	Type	Description	Default Value
`children`	`React.ReactNode`	The content to be wrapped with the liquid glass effect.	Required
`width`	`string`	Sets the width of the component.	`"auto"`
`height`	`string`	Sets the height of the component.	`"auto"`
`borderRadius`	`string`	Defines the border radius of the liquid glass effect.	`"20px"`
`blur`	`string`	Controls the blur intensity of the glass effect.	`"10px"`
`brightness`	`string`	Adjusts the brightness of the glass effect.	`"1.1"`
`padding`	`string`	Sets the padding inside the component.	`"10px"`
`style`	`React.CSSProperties`	Additional CSS styles to apply to the component.	`undefined`

Prop Details

children: The content you want to apply the liquid glass effect to. This is a required prop.
width and height: Define the dimensions of the component. Accepts any valid CSS length unit (e.g., "100px", "50%", "auto").
borderRadius: Controls the corner radius of the glass effect. Accepts valid CSS border-radius values (e.g., "10px", "50%").
blur: Sets the blur effect intensity. Higher values create a more frosted appearance (e.g., "5px", "20px").
brightness: Adjusts the brightness of the effect. Values greater than 1 increase brightness, while values less than 1 decrease it (e.g., "1.2", "0.8").
padding: Adds inner spacing around the children. Accepts valid CSS padding values (e.g., "15px", "1rem").
style: Allows custom CSS properties to be applied to the component, overriding default styles where applicable.

Example

import "react-ios-liquid-glass/dist/index.css";
import { LiquidGlass } from "react-ios-liquid-glass";

function App() {
  return (
    <LiquidGlass
      width="300px"
      height="200px"
      borderRadius="15px"
      blur="12px"
      brightness="1.3"
      padding="20px">
      <h1>Hello, Liquid Glass!</h1>
      <p>This is a frosted glass effect.</p>
    </LiquidGlass>
  );
}

Notes

Ensure the CSS file (react-ios-liquid-glass/dist/index.css) is imported to apply the liquid glass styling.
The component inherits all standard HTML div attributes, as it extends React.HTMLAttributes<HTMLDivElement>.
For optimal visual results, use a semi-transparent background or place the component over a visually rich background to enhance the frosted glass effect.

License

This project is licensed under the MIT License.