Sheet
The sheet is the overlay primitive. Full-bleed scrim that blurs the page behind, with a centered glass card.
Rendered
Send invitation
This will send an email to alex@matter.so with onboarding instructions.
Tokens
| Token | Use |
|---|---|
--sheet-scrim-tint | scrim background — set per-instance on the overlay |
--sheet-card-tint | card background — RGB triplet, set per-instance on the card |
Usage
.sheet-overlay is the single primitive for any "zoom in on one thing" moment:
- Modal dialogs
- Endpoint detail (docs)
- Action confirmation
- Cards-kit signing flow
<div class="sheet-overlay" data-state="open">
<div class="sheet-card glass-strong">
<h2 class="h-3">Send invitation</h2>
<p>This will send an email to alex@matter.so with onboarding instructions.</p>
<div class="sheet-actions">
<button class="btn btn-primary">Send invite</button>
<button class="btn btn-ghost">Cancel</button>
</div>
</div>
</div>The docs Try-it modal already uses this primitive.
Use
.sheet-overlay for any "zoom in on one thing" moment. One primitive, every overlay.Don't fork the sheet for a one-off animation. Tune
--sheet-*-tint instead.Blooms
Four bloom backdrops — peach / lavender / sage / amber. Full-section panels. Veil is mandatory when text sits in front; text in front of a bloom is always white. Motion-blur stripes on peach and amber are intentional.
Code
Light glass, not dark slate. `--code-bg: rgba(255,255,255,0.55)` on top of a backdrop blur. Five warm-earth syntax tokens.