# Dissolve to delete
> Chat list where deleting a row turns it into pixels sampled from its own text, which drift away left to right before the gap closes.
- Element: `<px-dissolve>`
- React: `import { PxDissolve } from "@/components/lumesec/px-dissolve"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-dissolve.json
- Page: https://elements.lumesec.ai/components/pixel-lab/dissolve



Live preview: https://elements.lumesec.ai/view/px-dissolve

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-dissolve.js"></script>

<px-dissolve></px-dissolve>
```

## Installation

```bash
npx shadcn@latest add @lumesec/px-dissolve
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-dissolve.json
```

## Usage

React:

```tsx
import { PxDissolve } from "@/components/lumesec/px-dissolve";

export function Example() {
  return (
    <PxDissolve />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-dissolve.js"></script>

<px-dissolve></px-dissolve>
```

## Behaviour

Deleting a chat turns the row into its own pixels, sampled from the real text, and they drift away left to right before the gap closes.

## API reference

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event    | React prop | Detail              | Description                                                       |
| -------- | ---------- | ------------------- | ----------------------------------------------------------------- |
| `delete` | `onDelete` | `{ title: string }` | Fires when a row's delete button is pressed, with the chat title. |

### Methods

Call them on the element, for example through a React ref.

| Method      | Description                                            |
| ----------- | ------------------------------------------------------ |
| `restore()` | Puts every deleted chat back in its original position. |

## Accessibility

* The list has `aria-label="Recent chats"`.
* Each delete control is a native button labelled `Delete “<title>”`; it is shown on hover or keyboard focus, and always on devices without hover.
* The chat count below the list is an `aria-live="polite"` region.
* The particle canvas is decorative and ignores pointer input.
* Reduced motion: a deleted row disappears and collapses at once without particles, and restored rows appear without expanding.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--destructive`, `--foreground`, `--lumesec` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-danger`, `--ui-fg`, `--ui-mono` and `--ui-muted`.

## Notes

* The five chats are built-in demo data; there is no attribute for your own rows. Deleting only removes the row inside the component.
* The particle canvas overhangs the list by 24px on every side, so pixels can drift past its edges.