Pixel checklist

Pixel checklist where checking fills the box from the centre and draws a fizzing strike-through; finishing the list runs a green wave.

View as Markdown

<px-tasks>· loading

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <px-tasks>

Props

itemsremounts

<PxTasks
  items="Draft the launch post|Record the demo video|Review the pricing page|Ship v2.14 to production"
/>

Installation

pnpm dlx shadcn@latest add @lumesec/px-tasks

First 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}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/px-tasks.json

Usage

import { PxTasks } from "@/components/lumesec/px-tasks";

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

Behaviour

Checking a task fills its box from the centre, draws a check, then sends a strike-through across the text with a fizzing head. Finishing the list turns the bar green and runs a wave along it.

API reference

Attributes

itemsReact propitemsTypestringDefaultDraft the launch post|Record the demo video|Review the pricing page|Ship v2.14 to production

Task labels separated by |. Read once when the element first connects.

Events

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

changeReact proponChangeDetail{ done: number, total: number }

Fires each time a task is checked or unchecked.

Methods

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

toggle(index: number)

Checks or unchecks the task at index and fires change.

Accessibility

Each task is a native button with role="checkbox" and aria-checked.
The "N of M done" counter is an aria-live="polite" region.
The pixel canvas is decorative and ignores pointer input.
Reduced motion: boxes and strike-throughs appear at once, without the fizzing head, sparks or the completion wave.

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 --foreground, --lumesec, --lumesec-success and --muted-foreground.

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

Notes

With the built-in demo tasks the first one starts checked; custom items all start unchecked.
The host gets a data-all attribute when every task is checked.

<px-hourglass>

Rate-limit hourglasspx-hourglass

<px-materialize>

Materializing streampx-materialize

<px-secret>

Secret fieldpx-secret

<px-focus>

Focus timerpx-focus

Was this page helpful?

Related