Liquid Glass
Liquid Glass inspired by @Apple
Installation
Usage
import { LiquidGlassCard } from "viora-ui";import { LiquidGlassCard } from "viora-ui";
export default function LiquidGlassCardDemo() {
return (
<div className="flex min-h-[350px] w-full items-center justify-center p-6">
<LiquidGlassCard />
</div>
);
}API Reference
GlassFilter
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | - | Configuration for id. |
| scale? | number | - | Configuration for scale. |
VolumeBars
| Prop | Type | Default | Description |
|---|---|---|---|
| isPlaying | boolean | false | Configuration for isPlaying. |
ProgressBar
| Prop | Type | Default | Description |
|---|---|---|---|
| currentTime | number | - | Configuration for currentTime. |
| totalDuration | number | - | Configuration for totalDuration. |
| onSeek | (newTime: number) => void | - | Callback fired on seek event. |
Built by Otis
Last updated: 10/12/2026
