Task List — Uai

Install

Install manually View source on GitHub

Anatomy

TaskList
TaskListItem
TaskListTitle
TaskListDescription

Accessibility6 checks

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.

Project checklist

Review the component interfaceProps and public behaviorComplete
Check keyboard interactionFocus and submit pathsIn progress
Build the registry itemFiles and dependenciesPending
Publish to the registryTag v0.4.0 and update the changelogPending

Code example

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>  );}

Manual installation

task-list.tsx

Loading component source…