Projects

Preview

Install

1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.

   npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"

2. 2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.

   npx shadcn@latest add @txbrendan/theme

3. 3. Add the template. It also adds every component it uses. Its own files go in your components folder, and they are yours to edit.

   npx shadcn@latest add @txbrendan/projects

Props

• projects

  The records. Default is a worked example.

  Project[]

• today

  The date the page treats as today, YYYY-MM-DD. Omit it and the page uses 2026-10-27 and says that date is a fixed example. A project due before the date, and not done, is overdue.

  string

• loading

  Shows a skeleton in the current layout's shape instead of the records.

  boolean · default false

• error

  Replaces the records with this message. Say what to do next.

  string

• embedded

  Renders a div instead of a main, for a preview inside another page.

  boolean · default false

• titleLevel

  Heading level of the title. Default h1, or h2 when embedded.

  "h1" | "h2"

• defaultLayout

  The layout on first paint, when layout is not set.

  "board" | "list" | "timeline" · default "board"

• layout

  The layout that is showing. Use with onLayoutChange.

  "board" | "list" | "timeline"

• onLayoutChange

  Called with the layout that was just chosen.

  (layout: "board" | "list" | "timeline") => void

• defaultQuery

  The search box on first paint.

  string · default ""

• defaultPriority

  The priority filter on first paint.

  "all" | "urgent" | "high" | "medium" | "low" · default "all"

• interactive

  When false, the project controls leave the tab order. The layout switch stays.

  boolean · default true

• className

  Classes on the root, which holds the container query.

  string

• Part. Project

  One project. id is stable across layouts. start and due are YYYY-MM-DD. roles are job names, such as Lead, not people.

  { id: string; name: string; client: string; summary: string; stage: "todo" | "progress" | "review" | "done"; priority: "urgent" | "high" | "medium" | "low"; done: number; total: number; start: string; due: string; roles: string[] }

Accessibility

• The page is a main, unless embedded. The title is an h1, or an h2 when embedded, unless titleLevel says otherwise.
• The layout control is a tab list. The morph is the tab panel, named by the active tab.
• The board is a list of lists: one list named Board, and a list named for each stage. The list is a table. The timeline groups its rows, and each group is a list named for its stage.
• Each project has one button, named with the project, the client, and the priority. The card, the row, and the timeline name are that button. The priority pill is named with its level. A tooltip carries the summary, the priority, the roles, and the task count. Enter or Space selects it. A layout change that drops focus puts it back on that button.
• Set interactive to false to take those buttons out of the tab order. The layout switch stays in it.
• A timeline bar's text equivalent is the name, the priority, the start, the due date, and the percent. The row shows that priority once, on the pill.
• A status outside the busy region says when the page is loading, empty, or filtered to nothing.
• The move follows the motion tokens. Motion off and reduced motion do not translate the shells.

Examples

<Projects />

<Projects embedded interactive={false} titleLevel="h1" />