Tailwind

<Sheet.Content className="bg-white shadow-2xl dark:bg-zinc-900">
  <Sheet.Handle className="bg-zinc-300 dark:bg-zinc-600" />
</Sheet.Content>

Utilities apply directly: no plugin, no config, works with Tailwind v4 out of the box.

Set the library’s own variables with arbitrary properties, or in your stylesheet:

<Sheet.Content className="[--scrollsheet-radius:24px] [--scrollsheet-backdrop:rgb(0_0_0/0.6)]" />

State attributes live on the <dialog> ancestor, so match them with v4’s in-* variant:

<Sheet.Content className="in-data-[scrollsheet-at-max]:rounded-none" />

The mechanics stylesheet only wins where it must (position, transform). Everything visual sits in zero-specificity :where() rules, so a Tailwind utility always overrides it.