ProjectList

Code

import { ProjectList, type Project } from "@fadymondy/nasaq/web";const projects: Project[] = [  { id: "1", name: "Website redesign", key: "WEB", client: "Acme", status: "active", progress: 62, dueDate: "2026-12-01", members: [{ name: "Sara Ali" }, { name: "Omar Nasser" }] },];export function Projects() {  return <ProjectList projects={projects} />;}

Projects & Work · beta

Live examples and controls: ProjectList in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/project-list.json

A portfolio of projects: status, progress, who works on it, the lead, when it is due and its tags. It is EntityList with the columns, cards and filters set up, plus an overdue highlight on the due date.

When to useCopy Anchor Link

• A projects overview, portfolio or client project list.

When not to useCopy Anchor Link

• Tasks on a board: use KanbanBoard.
• Other records: build on EntityList.

ImportCopy Anchor Link

import { ProjectList } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { ProjectList, type Project } from "@fadymondy/nasaq/web";

const projects: Project[] = [
  { id: "1", name: "Website redesign", key: "WEB", client: "Acme", status: "active", progress: 62, dueDate: "2026-12-01", members: [{ name: "Sara Ali" }, { name: "Omar Nasser" }] },
];

export function Projects() {
  return <ProjectList projects={projects} />;
}

AnatomyCopy Anchor Link

ProjectList renders EntityList. Columns: name (logo, name, key and client), status, progress, members, lead (hidden by default), due, tags (hidden by default), last activity. Facets: status, client, member, tag.

APICopy Anchor Link

ProjectListProps extends the EntityList props (view, pageSize, selectable, toolbar, bulkActions, rowActions, onRowClick, loading, error, onRetry, empty, defaultSort, className).

ProjectStatus is "planning" | "active" | "on-hold" | "completed" | "archived".

ExamplesCopy Anchor Link

Cards only

<ProjectList projects={projects} defaultView="cards" views={["cards"]} />

AccessibilityCopy Anchor Link

Inherited from EntityList. Each progress bar is named ("Progress: Website redesign") and reads its value; status is text plus an icon, never colour alone. Overdue dates say "Overdue" in text.

RTL & i18nCopy Anchor Link

• English and Arabic strings ship, including status names. Percentages and dates follow the locale; project keys are set left-to-right.
• Progress bars fill from the inline start, so they run right to left in Arabic.

Styling & tokensCopy Anchor Link

• Status tones and progress tones come from Status and Progress. Overdue uses text-nq-danger-text.

Do / Don'tCopy Anchor Link

• Do keep progress between 0 and 100.
• Don't use colour alone to tell statuses apart in your own cells; reuse Status.

RelatedCopy Anchor Link

• EntityList
• KanbanBoard
• ExportButton

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-projects-work-project-list--docs