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.
Installation
pnpm dlx shadcn@latest add @lumesec/px-dissolveFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/px-dissolve.jsonUsage
import { PxDissolve } from "@/components/lumesec/px-dissolve";
export function Example() {
return (
<PxDissolve />
);
}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.
deleteReact proponDeleteDetail{ 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.
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.
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.
Related
Was this page helpful?