Components
Glass
Translucent surfaces for floating controls.
Bar
<div class="grid w-full place-items-center rounded-2xl bg-[linear-gradient(135deg,var(--sky),var(--leaf)_50%,var(--berry))] p-6">
<div class="<%= glass_class(shape: :bar) %>"><span class="block px-5 py-3 text-sm font-medium">Glass</span></div>
</div>Panel
Glass
<div class="grid w-full place-items-center rounded-2xl bg-[linear-gradient(135deg,var(--sky),var(--leaf)_50%,var(--berry))] p-6">
<div class="<%= glass_class(shape: :panel) %>"><span class="block px-5 py-3 text-sm font-medium">Glass</span></div>
</div>Disc
Glass
<div class="grid w-full place-items-center rounded-2xl bg-[linear-gradient(135deg,var(--sky),var(--leaf)_50%,var(--berry))] p-6">
<div class="<%= glass_class(shape: :disc) %>"><span class="block px-5 py-3 text-sm font-medium">Glass</span></div>
</div>Menu
Glass
<div class="grid w-full place-items-center rounded-2xl bg-[linear-gradient(135deg,var(--sky),var(--leaf)_50%,var(--berry))] p-6">
<div class="<%= glass_class(shape: :menu) %>"><span class="block px-5 py-3 text-sm font-medium">Glass</span></div>
</div>Picker
Glass
<div class="grid w-full place-items-center rounded-2xl bg-[linear-gradient(135deg,var(--sky),var(--leaf)_50%,var(--berry))] p-6">
<div class="<%= glass_class(shape: :picker) %>"><span class="block px-5 py-3 text-sm font-medium">Glass</span></div>
</div>Hud
Glass
<div class="grid w-full place-items-center rounded-2xl bg-[linear-gradient(135deg,var(--sky),var(--leaf)_50%,var(--berry))] p-6">
<div class="<%= glass_class(shape: :hud) %>"><span class="block px-5 py-3 text-sm font-medium">Glass</span></div>
</div>Bar
<div class="grid w-full place-items-center rounded-2xl bg-[linear-gradient(135deg,var(--sky),var(--leaf)_50%,var(--berry))] p-6">
<div class="<%= glass_class(shape: :bar, thick: true) %>"><span class="block px-5 py-3 text-sm font-medium">Glass</span></div>
</div>API reference
glass_class
glass_class(shape: :bar, thick: false, extra: nil)| Parameter | Default | Values |
|---|---|---|
| shape | :bar | :bar · :panel · :disc · :menu · :picker · :hud |
| thick | false | true · false |
| extra | nil | Additional Tailwind classes |