Koori UI
Components

GlassPanel

A glassmorphism-styled layout container for wrapping content in a frosted-glass surface.

Preview

Subtle

Default

Elevated

Usage

import { GlassPanel } from "koori-ui";
 
<GlassPanel>
  <p>Frosted glass container.</p>
</GlassPanel>

Variants

<GlassPanel variant="default">Default surface</GlassPanel>
<GlassPanel variant="subtle">Subtle surface</GlassPanel>
<GlassPanel variant="elevated">Elevated surface</GlassPanel>

As a Layout Section

import { GlassPanel, GlassH3, GlassText } from "koori-ui";
 
<GlassPanel variant="elevated" className="max-w-md">
  <GlassH3>Welcome back</GlassH3>
  <GlassText muted className="mt-2">
    Here is an overview of your recent activity.
  </GlassText>
</GlassPanel>

Props

PropTypeDefaultDescription
variant"default" | "subtle" | "elevated""default"Glass intensity level
classNamestring—Additional CSS classes

All native <div> props are also accepted.

Previous

GlassCard

Next

GlassTable

On this page