# 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-react` (React 18/19 + 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/react/src/components/dim-siblings

## Import

```tsx
import { DimSiblings } from 'fancy-ui-react';
```

Setup (once per project): `npm install fancy-ui-react`, then put these lines in your main CSS file (the stylesheet import goes right after `@import "tailwindcss";`):

```css
@import "tailwindcss";
@import "fancy-ui-react/tailwind.css";
```

and import the component styles once in the app entry: `import "fancy-ui-react/styles.css";`. Full guide: https://fancy-ui.rama.app/llms.txt

The names below are the ones to write in React; when one differs from the Svelte name, the Svelte name follows in parentheses. `class` becomes `className`, a callback takes the name the React port declares (`onclick` becomes `onClick`), snippets become `ReactNode` props (render functions when they take arguments) and the default snippet is `children`. Divergences: https://github.com/RamaHerbin/fancy-ui/tree/main/react#divergences-from-the-svelte-api

## 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 |
| `className` (Svelte `class`) | `string` | — | Additional CSS classes |
| `ref` | `HTMLElement \| null` | `null` | Bindable reference to the root element |

## Node props

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

## Example

No React example is published for this component yet: start from the import above and the props table. The full examples are Svelte-only, on https://fancy-ui.rama.app/docs/components/dim-siblings.md.