@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/appearance.mdx

@@ -0,0 +1,180 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+
+export const title = "appearance";
+export const description = "Utilities for suppressing native form control styling.";
+
+<ApiTable
+  rows={[
+    ["appearance-none", "appearance: none;"],
+    ["appearance-auto", "appearance: auto;"],
+  ]}
+/>
+
+## Examples
+
+### Removing default appearance
+
+Use `appearance-none` to reset any browser specific styling on an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="mx-auto max-w-sm items-center">
+      <div className="my-6 flex">
+        <select className="w-20">
+          <option>Yes</option>
+          <option>No</option>
+          <option>Maybe</option>
+        </select>
+        <div className="mx-6 text-sm font-semibold text-gray-900 dark:text-gray-200">
+          Default browser styles applied
+        </div>
+      </div>
+      <div className="my-6 flex items-center">
+        <div className="grid">
+          <svg
+            className="pointer-events-none relative right-1 z-10 col-start-1 row-start-1 h-4 w-4 self-center justify-self-end forced-colors:hidden"
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fillRule="evenodd"
+              d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+              clipRule="evenodd"
+            />
+          </svg>
+          <select className="col-start-1 row-start-1 w-20 appearance-none rounded-lg border border-gray-300 bg-gray-50 px-2 text-gray-700 hover:border-cyan-500 hover:bg-white dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:border-cyan-700 dark:hover:bg-gray-700 forced-colors:appearance-auto">
+            <option>Yes</option>
+            <option>No</option>
+            <option>Maybe</option>
+          </select>
+        </div>
+        <div className="mx-6 text-sm font-semibold text-gray-900 dark:text-gray-200">Remove default browser styles</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:appearance-none] -->
+<select>
+  <option>Yes</option>
+  <option>No</option>
+  <option>Maybe</option>
+</select>
+
+<div class="grid">
+  <select class="col-start-1 row-start-1 appearance-none bg-gray-50 dark:bg-gray-800 ...">
+    <option>Yes</option>
+    <option>No</option>
+    <option>Maybe</option>
+  </select>
+  <svg class="pointer-events-none col-start-1 row-start-1 ...">
+    <!-- ... -->
+  </svg>
+</div>
+```
+
+</Figure>
+
+This utility is often used when creating custom form components.
+
+### Restoring default appearance
+
+Use `appearance-auto` to restore the default browser specific styling on an element:
+
+<Figure hint="Try emulating `forced-colors: active` in your developer tools to see the difference">
+
+<Example>
+  {
+    <div className="mx-auto my-6 grid max-w-sm items-center justify-center gap-8">
+      <div className="flex items-center">
+        <label
+          htmlFor="checkbox_2"
+          className="mx-6 grid grid-flow-col items-center gap-3 text-sm font-semibold text-gray-900 select-none dark:text-gray-200"
+        >
+          <div className="grid items-center justify-center">
+            <input
+              type="checkbox"
+              id="checkbox_2"
+              defaultChecked
+              className="peer col-start-1 row-start-1 h-4 w-4 appearance-none rounded border border-gray-300 ring-transparent checked:border-violet-600 checked:bg-violet-600 dark:border-gray-600 dark:checked:border-violet-600 forced-colors:appearance-auto"
+            />
+            <svg
+              viewBox="0 0 14 14"
+              fill="none"
+              className="invisible col-start-1 row-start-1 stroke-white peer-checked:visible dark:text-violet-300 forced-colors:hidden"
+            >
+              <path d="M3 8L6 11L11 3.5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
+            </svg>
+          </div>
+          Falls back to default appearance
+        </label>
+      </div>
+      <div className="flex items-center">
+        <label
+          htmlFor="checkbox_1"
+          className="mx-6 grid grid-flow-col items-center gap-3 text-sm font-semibold text-gray-900 select-none dark:text-gray-200"
+        >
+          <div className="grid items-center justify-center">
+            <input
+              type="checkbox"
+              id="checkbox_1"
+              defaultChecked
+              className="peer col-start-1 row-start-1 h-4 w-4 appearance-none rounded border border-gray-300 ring-transparent checked:border-violet-600 checked:bg-violet-600 dark:border-gray-600 dark:checked:border-violet-600"
+            />
+            <svg
+              viewBox="0 0 14 14"
+              fill="none"
+              className="invisible col-start-1 row-start-1 stroke-white peer-checked:visible dark:text-violet-300"
+            >
+              <path d="M3 8L6 11L11 3.5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
+            </svg>
+          </div>
+          Keeps custom appearance
+        </label>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:forced-colors:appearance-auto,forced-colors:hidden] -->
+<label>
+  <div>
+    <input type="checkbox" class="appearance-none forced-colors:appearance-auto ..." />
+    <svg class="invisible peer-checked:visible forced-colors:hidden ...">
+      <!-- ... -->
+    </svg>
+  </div>
+  Falls back to default appearance
+</label>
+
+<label>
+  <div>
+    <input type="checkbox" class="appearance-none ..." />
+    <svg class="invisible peer-checked:visible ...">
+      <!-- ... -->
+    </svg>
+  </div>
+  Keeps custom appearance
+</label>
+```
+
+</Figure>
+
+This is useful for reverting to the standard browser controls in certain accessibility modes.
+
+### Responsive design
+
+<ResponsiveDesign
+  element="select"
+  property="appearance"
+  defaultClass="appearance-auto"
+  featuredClass="appearance-none"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/aspect-ratio.mdx

@@ -0,0 +1,98 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { UsingACustomValue, ResponsiveDesign, CustomizingYourTheme } from "@/components/content.tsx";
+
+export const title = "aspect-ratio";
+export const description = "Utilities for controlling the aspect ratio of an element.";
+
+<ApiTable
+  rows={[
+    ["aspect-<ratio>", "aspect-ratio: <ratio>;"],
+    ["aspect-square", "aspect-ratio: 1 / 1;"],
+    ["aspect-video", "aspect-ratio: var(--aspect-video); /* 16 / 9 */"],
+    ["aspect-auto", "aspect-ratio: auto;"],
+    ["aspect-(<custom-property>)", "aspect-ratio: var(<custom-property>);"],
+    ["aspect-[<value>]", "aspect-ratio: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use <code>aspect-<var>&lt;ratio&gt;</var></code> utilities like `aspect-3/2` to give an element a specific aspect ratio:
+
+<Figure desktopHint="Resize the example to see the expected behavior">
+
+<Example resizable>
+  {
+    <img
+      className="mx-auto aspect-3/2 w-full max-w-sm rounded-lg object-cover"
+      src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80"
+    />
+  }
+</Example>
+
+```html
+<!-- [!code classes:aspect-3/2] -->
+<img class="aspect-3/2 object-cover ..." src="/img/villas.jpg" />
+```
+
+</Figure>
+
+### Using a video aspect ratio
+
+Use the `aspect-video` utility to give a video element a 16 / 9 aspect ratio:
+
+<Figure desktopHint="Resize the example to see the expected behavior">
+
+<Example resizable>
+  {
+    <iframe
+      className="aspect-video w-full rounded-lg"
+      src="https://www.youtube.com/embed/dQw4w9WgXcQ"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowFullScreen
+    ></iframe>
+  }
+</Example>
+
+```html
+<!-- [!code classes:aspect-video] -->
+<iframe class="aspect-video ..." src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue
+  element="img"
+  elementAttributes={{ src: "/img/villas.jpg" }}
+  utility="aspect"
+  name="aspect ratio"
+  value="calc(4*3+1)/3"
+  variable="aspect-ratio"
+/>
+
+### Responsive design
+
+<ResponsiveDesign
+  element="iframe"
+  elementAttributes={{ src: "https://www.youtube.com/embed/dQw4w9WgXcQ" }}
+  property="aspect-ratio"
+  defaultClass="aspect-video"
+  featuredClass="aspect-square"
+/>
+
+## Customizing your theme
+
+<CustomizingYourTheme
+  element="iframe"
+  elementAttributes={{ src: "https://www.youtube.com/embed/dQw4w9WgXcQ" }}
+  utility="aspect"
+  name="aspect ratio"
+  customName="retro"
+  customValue="4 / 3"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/backdrop-filter-blur.mdx

@@ -0,0 +1,109 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+
+export const title = "backdrop-filter: blur()";
+export const description = "Utilities for applying backdrop blur filters to an element.";
+
+<ApiTable
+  rows={[
+    ["backdrop-blur-xs", "backdrop-filter: blur(var(--blur-xs)); /* 4px */"],
+    ["backdrop-blur-sm", "backdrop-filter: blur(var(--blur-sm)); /* 8px */"],
+    ["backdrop-blur-md", "backdrop-filter: blur(var(--blur-md)); /* 12px */"],
+    ["backdrop-blur-lg", "backdrop-filter: blur(var(--blur-lg)); /* 16px */"],
+    ["backdrop-blur-xl", "backdrop-filter: blur(var(--blur-xl)); /* 24px */"],
+    ["backdrop-blur-2xl", "backdrop-filter: blur(var(--blur-2xl)); /* 40px */"],
+    ["backdrop-blur-3xl", "backdrop-filter: blur(var(--blur-3xl)); /* 64px */"],
+    ["backdrop-blur-none", "backdrop-filter: ;"],
+    ["backdrop-blur-(<custom-property>)", "backdrop-filter: blur(var(<custom-property>));"],
+    ["backdrop-blur-[<value>]", "backdrop-filter: blur(<value>);"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `backdrop-blur-sm` and `backdrop-blur-lg` to control an element’s backdrop blur:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
+      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-blur-none
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-blur-none"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-blur-sm
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-blur-sm"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-blur-md
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-blur-md"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:backdrop-blur-none,backdrop-blur-sm,backdrop-blur-md] -->
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-blur-none ..."></div>
+</div>
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-blur-sm ..."></div>
+</div>
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-blur-md ..."></div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="backdrop-blur" value="2px" name="backdrop blur" />
+
+### Responsive design
+
+<ResponsiveDesign
+  property="backdrop-filter: blur()"
+  defaultClass="backdrop-blur-none"
+  featuredClass="backdrop-blur-lg"
+/>
+
+## Customizing your theme
+
+<CustomizingYourTheme utility="backdrop-blur" themeKey="blur" name="backdrop blur" customName="2xs" customValue="2px" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/backdrop-filter-brightness.mdx

@@ -0,0 +1,82 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "backdrop-filter: brightness()";
+export const description = "Utilities for applying backdrop brightness filters to an element.";
+
+<ApiTable
+  rows={[
+    ["backdrop-brightness-<number>", "backdrop-filter: brightness(<number>%);"],
+    ["backdrop-brightness-(<custom-property>)", "backdrop-filter: brightness(var(<custom-property>));"],
+    ["backdrop-brightness-[<value>]", "backdrop-filter: brightness(<value>);"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `backdrop-brightness-50` and `backdrop-brightness-100` to control an element's backdrop brightness:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
+      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-brightness-50
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-brightness-50"></div>
+            <img
+              className="h-32 w-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-brightness-150
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-brightness-150"></div>
+            <img
+              className="h-32 w-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:backdrop-brightness-50,backdrop-brightness-150] -->
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-brightness-50 ..."></div>
+</div>
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-brightness-150 ..."></div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="backdrop-brightness" value="1.75" name="backdrop brightness" />
+
+### Responsive design
+
+<ResponsiveDesign
+  property="backdrop-filter: brightness()"
+  defaultClass="backdrop-brightness-110"
+  featuredClass="backdrop-brightness-150"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/backdrop-filter-contrast.mdx

@@ -0,0 +1,82 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "backdrop-filter: contrast()";
+export const description = "Utilities for applying backdrop contrast filters to an element.";
+
+<ApiTable
+  rows={[
+    ["backdrop-contrast-<number>", "backdrop-filter: contrast(<number>%);"],
+    ["backdrop-contrast-(<custom-property>)", "backdrop-filter: contrast(var(<custom-property>));"],
+    ["backdrop-contrast-[<value>]", "backdrop-filter: contrast(<value>);"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `backdrop-contrast-50` and `backdrop-contrast-100` to control an element's backdrop contrast:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
+      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-contrast-50
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-contrast-50"></div>
+            <img
+              className="h-32 w-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-contrast-200
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-contrast-200"></div>
+            <img
+              className="h-32 w-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:backdrop-contrast-50,backdrop-contrast-200] -->
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-contrast-50 ..."></div>
+</div>
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-contrast-200 ..."></div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="backdrop-contrast" value=".25" name="backdrop contrast" />
+
+### Responsive design
+
+<ResponsiveDesign
+  property="backdrop-filter: contrast()"
+  defaultClass="backdrop-contrast-125"
+  featuredClass="backdrop-contrast-150"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/backdrop-filter-grayscale.mdx

@@ -0,0 +1,99 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "backdrop-filter: grayscale()";
+export const description = "Utilities for applying backdrop grayscale filters to an element.";
+
+<ApiTable
+  rows={[
+    ["backdrop-grayscale", "backdrop-filter: grayscale(100%);"],
+    ["backdrop-grayscale-<number>", "backdrop-filter: grayscale(<number>%);"],
+    ["backdrop-grayscale-(<custom-property>)", "backdrop-filter: grayscale(var(<custom-property>));"],
+    ["backdrop-grayscale-[<value>]", "backdrop-filter: grayscale(<value>);"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `backdrop-grayscale-50` and `backdrop-grayscale` to control the grayscale effect applied to an element's backdrop:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
+      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-grayscale-0
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-grayscale-0"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-grayscale-50
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-grayscale-50"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-grayscale
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-grayscale"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:backdrop-grayscale-0,backdrop-grayscale-50,backdrop-grayscale] -->
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-grayscale-0 ..."></div>
+</div>
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-grayscale-50 ..."></div>
+</div>
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-grayscale-200 ..."></div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="backdrop-grayscale" value="0.5" name="backdrop grayscale" />
+
+### Responsive design
+
+<ResponsiveDesign
+  property="backdrop-filter: grayscale()"
+  defaultClass="backdrop-grayscale"
+  featuredClass="backdrop-grayscale-0"
+/>