Pill

The floating capsule every bar in the app is built from: the chat title, the composer, the tab island. Glass, so the conversation shows through.

Preview

The bars float over the conversation

and it keeps moving underneath

frosted, so you still see the shape of it

9px for a one-line pill

18px when it grows into a panel

same recipe in light and dark

the edge on top is what makes it read as glass

Mafold DEV

Message

The glass recipe

--mf-glass-bg (the float surface at 62% light, 70% dark), blur(var(--mf-blur-glass)) saturate(1.7), a half-pixel bright edge on top, and --mf-shadow-pill. A pill that grows into a panel switches to --mf-blur-panel.

Heights

Top bars are --mf-pill-top-h (44px) and bottom bars --mf-pill-bottom-h (54px), so the four bars of the chat screen line up.

Usage

import { Pill } from "@/components/mafold";

<Pill style={{ height: "var(--mf-pill-top-h)" }}>Mafold DEV</Pill>
<Pill panel>…a pill grown into a panel…</Pill>