ai-components

Todo List

A collapsible agent plan inside the liquid-metal ring: a dotted thought orb leads while work is in flight, and monochrome marks morph from dotted ring to progress arc to tick.

  1. In progress: Inspect the current data flow25%
  2. Pending: Update the response schema
  3. Pending: Add coverage for edge cases
  4. Pending: Run checks and prepare the result

Install

Steps for Next.js.

  1. Install the package

    One package carries every component, the beUI base they build on, and the effect libraries.

    bun add @poulo2/ai-components

  2. Load the styles with Tailwind v4

    Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.

    @import "@poulo2/ai-components/theme.css";
@source "../node_modules/@poulo2/ai-components/dist";

  3. Or load the prebuilt stylesheet

    For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.

    import "@poulo2/ai-components/styles.css";

Props

NameTypeDefaultDescription
itemsTodoItem[]—Tasks with id, title, status, and optional progress (0–100) and detail.
titleReactNode"To-dos"Heading shown next to the orb.
metalbooleantrueWraps the card in the liquid-metal ring. It flows only while a task is in progress.
open / defaultOpenbooleantrueControlled or initial expanded state.
onOpenChange(open: boolean) => void—Called when the list is expanded or collapsed.
collapseOnCompletebooleantrueCollapses the list once every task is completed.
maxHeightnumber248Visible height of the list before it scrolls.