Sheet
Free · MITHeadless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.
Install
Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).
Unstyled — behavior only, you write the CSS
npx astrocraft-ui add overlays/sheetPlain-CSS theme — no build step
npx astrocraft-ui add overlays/sheet --theme cssTailwind theme — needs Tailwind v4
npx astrocraft-ui add overlays/sheet --theme tailwindPlain-CSS theme, re-pointed onto Lumos tokens
npx astrocraft-ui add overlays/sheet --theme css --bridge lumosTailwind theme, re-pointed onto Lumos tokens
npx astrocraft-ui add overlays/sheet --theme tailwind --bridge lumosLive demo
Sheet
Attribute surface
With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.
| Component | Slots | Variants | Runtime state | Native state |
|---|---|---|---|---|
| `Sheet.astro` | `sheet` | `data-side`: `right` · `left` · `top` · `bottom` | — | `[open]` |
Source
What the command copies — 2 files, alias-free so the copy lands standing alone. This is the whole component; there is nothing else.
---
// src/components/ui/overlays/sheet/Sheet.astro — headless primitive (see ../../README.md).
// Slide-in panel (offcanvas) on a native modal <dialog> — a Dialog pinned to one edge. Open and close
// it exactly like Dialog: a DialogTrigger whose `for` equals this Sheet's `id`, a DialogClose, Escape,
// or a backdrop click (SheetTrigger / SheetClose re-export those same controls). Compose the Dialog*
// content parts inside. `side` picks the edge.
//
// structure.css pins the panel to its `data-side` and — this is the load-bearing part — defeats the
// UA `dialog:modal` size cap with `max-height`/`max-width: none`. Drop that and every sheet has a gap
// at its edge. The slide-in animation and the backdrop scrim are in `_overlay.css`.
import "../../_overlay.css";
import "../../../../styles/structure.css";
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"dialog"> & { side?: "right" | "left" | "top" | "bottom" };
const { side = "right", class: className, ...rest } = Astro.props;
---
<dialog class={className} data-slot="sheet" data-side={side} {...rest}>
<slot />
</dialog>
<script>
import "../../_dialog";
</script>
import { DialogClose as SheetClose, DialogTrigger as SheetTrigger } from "../../overlays/dialog";
import Sheet from "./Sheet.astro";
export { Sheet, SheetClose, SheetTrigger };
export default Sheet;
What you get
The component source, copied into your project by npx astrocraft-ui add overlays/sheet — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.