# DimSiblings

> Wraps a group of cards, links, or list items so hovering or keyboard-focusing one dims (or blurs) every other one — a pure CSS :has() affordance with zero pointer-tracking JavaScript.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Effects
- Tags: hover, focus, dim, blur, has-selector, css-only, micro-interaction
- Types: `DimSiblingsProps`
- Docs: https://fancy-ui.rama.app/docs/components/dim-siblings
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/dim-siblings

## Import

```svelte
<script lang="ts">
  import { DimSiblings } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { DimSiblings } from 'fancy-ui-react';` (`class` becomes `className`, snippets become `ReactNode`, DOM callbacks are camel-cased; exact names on https://fancy-ui.rama.app/docs/components/react/dim-siblings.md).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `effect` | `"dim" \| "blur" \| "both"` | `"dim"` | Which visual property the non-active siblings lose |
| `opacity` | `number` | `0.4` | Opacity the non-active siblings settle to — a floor, not zero |
| `blur` | `number` | `2` | Blur radius in px, applied only when effect includes blur |
| `duration` | `number` | `150` | Transition duration in ms for the opacity/blur change |
| `as` | `keyof HTMLElementTagNameMap` | `"div"` | The rendered root element — "ul"/"ol" for a list whose CSS list semantics need to survive the wrapper |
| `class` | `string` | — | Additional CSS classes |
| `ref` | `HTMLElement \| null` | `null` | Bindable reference to the root element |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | The sibling group — every direct child participates |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { DimSiblings } from "fancy-ui-svelte";

	const COLUMNS = [
		{ heading: "Product", links: ["Overview", "Pricing", "Changelog"] },
		{ heading: "Docs", links: ["Guides", "API reference", "Examples"] },
		{ heading: "Company", links: ["About", "Careers", "Blog"] },
		{ heading: "Legal", links: ["Privacy", "Terms", "Security"] },
	];
</script>

<div class="w-full p-6">
	<DimSiblings as="footer" class="grid grid-cols-2 gap-x-6 gap-y-6 sm:grid-cols-4">
		{#each COLUMNS as column}
			<div>
				<h3 class="text-foreground text-sm font-semibold">{column.heading}</h3>
				<ul class="mt-3 flex flex-col gap-2">
					{#each column.links as link}
						<li>
							<a
								href="#{link.toLowerCase().replace(/\s+/g, '-')}"
								class="text-muted-foreground hover:text-foreground text-sm">{link}</a
							>
						</li>
					{/each}
				</ul>
			</div>
		{/each}
	</DimSiblings>
	<p class="text-muted-foreground mt-4 text-xs">
		Hover any link, or Tab to it — the other three columns dim so the one you're in stands out.
	</p>
</div>
```

### With Blur

Blur non-active siblings in addition to dimming them.

```svelte
<script lang="ts">
	import { DimSiblings } from "fancy-ui-svelte";

	const PLANS = [
		{ name: "Starter", price: "$9", blurb: "For solo projects." },
		{ name: "Team", price: "$29", blurb: "For small teams." },
		{ name: "Scale", price: "$99", blurb: "For growing products." },
	];
</script>

<div class="w-full p-6">
	<DimSiblings effect="both" class="grid grid-cols-1 gap-4 sm:grid-cols-3">
		{#each PLANS as plan}
			<div class="border-border bg-card rounded-xl border p-4">
				<p class="text-foreground text-sm font-semibold">{plan.name}</p>
				<p class="text-foreground mt-1 text-2xl font-bold">{plan.price}</p>
				<p class="text-muted-foreground mt-2 text-sm">{plan.blurb}</p>
			</div>
		{/each}
	</DimSiblings>
	<p class="text-muted-foreground mt-4 text-xs">
		Hover or focus one plan — the others dim <em>and</em> blur, via
		<code class="text-xs">effect="both"</code>.
	</p>
</div>
```