66 lines
1.5 KiB
Plaintext
66 lines
1.5 KiB
Plaintext
---
|
|
title: Liquid Glass
|
|
description: A component that allows you to display a liquid glass effect, inspired by iOS26.
|
|
author:
|
|
name: lucasporrini
|
|
url: https://github.com/lucasporrini
|
|
new: true
|
|
---
|
|
|
|
<ComponentPreview name="liquid-glass-demo" />
|
|
|
|
## Installation
|
|
|
|
<ComponentInstallation name="liquid-glass" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
<LiquidGlass>Hello world</LiquidGlass>
|
|
```
|
|
|
|
## Props
|
|
|
|
<TypeTable
|
|
type={{
|
|
as: {
|
|
description: 'The element or component the liquid glass should render as',
|
|
type: 'String | Component',
|
|
default: 'div',
|
|
required: false,
|
|
},
|
|
radius: {
|
|
description: 'The radius of the liquid glass',
|
|
type: 'Number',
|
|
default: '25',
|
|
required: false,
|
|
},
|
|
blur: {
|
|
description: 'The blur of the liquid glass background',
|
|
type: 'Number',
|
|
default: '0',
|
|
required: false,
|
|
},
|
|
childClassName: {
|
|
description: 'The class name of the child element',
|
|
type: 'String',
|
|
required: false,
|
|
},
|
|
className: {
|
|
description: 'The class name of the liquid glass',
|
|
type: 'String',
|
|
required: false,
|
|
},
|
|
children: {
|
|
description: 'The children of the liquid glass',
|
|
type: 'React.ReactNode',
|
|
required: true,
|
|
},
|
|
}}
|
|
/>
|
|
|
|
## Credits
|
|
|
|
- Credits to [Lucas Porrini](https://github.com/lucasporrini) for creating the component
|
|
- Credits to [@rebane2001](https://x.com/rebane2001/status/1932451851523264749?s=46&t=SBwgWoAagRgIPNE-RF4R9w) for effect inspiration
|