# Task List

> A composable progress list with card, timeline, and compact variants.

- Category: Data Display
- Kind: component
- Page: https://uaiblocks.dev/components/task-list
- Registry item: https://uaiblocks.dev/r/task-list.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/task-list.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/task-list.json
```

## Usage

```tsx
"use client";

import {
  TaskList,
  TaskListDescription,
  TaskListItem,
  TaskListTitle,
  type TaskListVariant,
} from "@/components/ui/uai/task-list";

export function TaskListPreview({ variant = "card" }: { variant?: TaskListVariant }) {
  return (
    <div className="w-full max-w-[420px]">
      <TaskList variant={variant} aria-label="Release progress">
        <TaskListItem status="complete">
          <TaskListTitle>Review the component interface</TaskListTitle>
          <TaskListDescription>Props and public behavior</TaskListDescription>
        </TaskListItem>
        <TaskListItem status="active">
          <TaskListTitle>Check keyboard interaction</TaskListTitle>
          <TaskListDescription>Focus and submit paths</TaskListDescription>
        </TaskListItem>
        <TaskListItem status="pending">
          <TaskListTitle>Build the registry item</TaskListTitle>
          <TaskListDescription>Files and dependencies</TaskListDescription>
        </TaskListItem>
        <TaskListItem status="pending">
          <TaskListTitle>Publish to the registry</TaskListTitle>
          <TaskListDescription>Tag v0.4.0 and update the changelog</TaskListDescription>
        </TaskListItem>
      </TaskList>
    </div>
  );
}
```

## Anatomy

- `TaskList`
  - `TaskListItem`
    - `TaskListTitle`
    - `TaskListDescription`

## Accessibility

- Tasks retain ordered-list semantics.
- Every state includes text in addition to color.
- The active task exposes current-step semantics.
- Active animation respects reduced-motion preferences.
- Long titles and descriptions wrap instead of being truncated.
- Card, timeline, and compact variants preserve the same semantic contract.