Skip to content
UI Kit
Accent color

Projects

Project screens for apps: a list with health, one project at a glance, a Gantt timeline, milestones, a portfolio and the weekly update.

6 variants
Switch category

Projects

Project list

Health filters with counts, search and sorting. A row shows its latest status on the side, on phones right below the row.

Project overview

Progress, goal with key results, status posts, team, risks and the next milestones. Phones switch between three sections.

Gantt timeline

Grouped tasks with progress bars, dependency lines, milestones and a today marker, zoom by weeks or months. Phones get a weekly agenda.

Milestone track

Reached, next and later on one track, each with its date, owner and a deliverables checklist that counts along.

Portfolio

Every project grouped by initiative or quarter, with budget spent against plan, health and owner. The summary strip filters by health.

Weekly status update

A full screen composer with health, summary, picked highlights, blockers and next steps, and a live preview of the post.

Details

What Projects brings along, read from the registry and the source.

Area
App
Variants
6
Version
1.0.2 · since 1.0.0
File
components/ui/projects.tsx
Brings along
utilskitbuttoniconsidebar
npm packages
None
Languages
English and German, 123 texts of its own
Studio
Adjust in code
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The ProjectsProps interface from components/ui/projects.tsx, with the comments from the code.

  • variantoptional
    ProjectsVariant

    listoverviewtimelinemilestonesportfoliostatus-update

  • sidebaroptional
    Omit<SidebarProps, 'children'>

    The app frame. Leave it out for a standalone screen (status-update is one by default).

  • titlerequired
    string
  • subtitleoptional
    string
  • actionsoptional
    React.ReactNode

    Buttons next to the title

  • currencyoptional
    string
  • todayoptional
    string

    ISO date that counts as today

  • projectsoptional
    Project[]

    list, portfolio

  • projectoptional
    Project

    overview, status-update: the one project on screen

  • goaloptional
    string

    overview

  • keyResultsoptional
    KeyResult[]
  • teamoptional
    TeamMember[]
  • updatesoptional
    StatusPost[]
  • risksoptional
    Risk[]
  • milestonesoptional
    Milestone[]

    overview, milestones

  • groupsoptional
    TaskGroup[]

    timeline

  • tasksoptional
    GanttTask[]
  • draftoptional
    ReportDraft

    status-update

  • recipientsoptional
    string[]
  • authoroptional
    string

    The person writing the update

Built-in texts

Projects writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 123 texts
on-trackEnglish On trackGerman Im Plan
at-riskEnglish At riskGerman Gefährdet
off-trackEnglish Off trackGerman Kritisch
doneEnglish DoneGerman Abgeschlossen
allEnglish AllGerman Alle
healthEnglish HealthGerman Zustand
searchEnglish Search projectsGerman Projekte suchen
projectEnglish ProjectGerman Projekt
leadEnglish LeadGerman Leitung
progressEnglish ProgressGerman Fortschritt
targetEnglish Target dateGerman Zieltermin
sortByEnglish Sort by {col}German Nach {col} sortieren
projectsEnglish ProjectsGerman Projekte
noMatchEnglish No project matches these filters.German Kein Projekt passt zu diesen Filtern.
resetEnglish Clear filtersGerman Filter zurücksetzen
pickEnglish Pick a project to see its latest status.German Projekt wählen, um den letzten Stand zu sehen.
latestEnglish Latest updateGerman Letzter Stand
nextMilestoneEnglish Next milestoneGerman Nächster Meilenstein
tasksEnglish TasksGerman Aufgaben
openProjectEnglish Open projectGerman Projekt öffnen
overdueEnglish OverdueGerman Überfällig
sectionsEnglish SectionsGerman Bereiche
overviewEnglish OverviewGerman Überblick
updatesEnglish UpdatesGerman Updates
teamRisksEnglish Team and risksGerman Team und Risiken
completeEnglish completeGerman erledigt
tasksDoneEnglish Tasks doneGerman Aufgaben erledigt
daysLeftEnglish Days leftGerman Tage übrig
budgetUsedEnglish Budget usedGerman Budget verbraucht
ofEnglish ofGerman von
goalsEnglish Goal and key resultsGerman Ziel und Schlüsselergebnisse
startedAtEnglish Started at {v}German Start bei {v}
detailsEnglish DetailsGerman Details
clientEnglish ClientGerman Kunde
startEnglish StartGerman Start
teamEnglish TeamGerman Team
upcomingEnglish Upcoming milestonesGerman Nächste Meilensteine
risksEnglish RisksGerman Risiken
highEnglish HighGerman Hoch
mediumEnglish MediumGerman Mittel
lowEnglish LowGerman Niedrig
mitigationEnglish MitigationGerman Gegenmaßnahme
ownerEnglish OwnerGerman Verantwortlich
commentsEnglish {n} commentsGerman {n} Kommentare
reactionsEnglish {n} reactionsGerman {n} Reaktionen
showAllEnglish Show all updatesGerman Alle Updates zeigen
zoomEnglish ZoomGerman Zoom
weeksEnglish WeeksGerman Wochen
monthsEnglish MonthsGerman Monate
todayEnglish TodayGerman Heute
jumpTodayEnglish Scroll to todayGerman Zu heute scrollen
taskEnglish TaskGerman Aufgabe
chartEnglish Timeline chart, scroll sideways with the arrow keysGerman Zeitplan, mit den Pfeiltasten seitlich scrollen
collapseEnglish Show or hide {group}German {group} ein- oder ausblenden
toEnglish toGerman bis
daysEnglish {n} daysGerman {n} Tage
dependsOnEnglish Waits forGerman Abhängig von
assigneeEnglish AssigneeGerman Zuständig
durationEnglish DurationGerman Dauer
statusEnglish StatusGerman Stand
lateEnglish {n} days lateGerman {n} Tage im Verzug
onScheduleEnglish On scheduleGerman Im Zeitplan
finishedEnglish FinishedGerman Erledigt
notStartedEnglish Not startedGerman Noch nicht begonnen
thisWeekEnglish This weekGerman Diese Woche
weekOfEnglish Week of {date}German Woche ab {date}
legendTaskEnglish Task with progressGerman Aufgabe mit Fortschritt
legendMilestoneEnglish MilestoneGerman Meilenstein
legendDepEnglish DependencyGerman Abhängigkeit
weekEnglish W{n}German KW {n}
milestonesDoneEnglish {done} of {total} milestones reachedGerman {done} von {total} Meilensteinen erreicht
nextInEnglish Next: {title} {when}German Als Nächstes {title} {when}
deliverablesEnglish DeliverablesGerman Ergebnisse
showDetailsEnglish Show detailsGerman Details zeigen
hideDetailsEnglish Hide detailsGerman Details ausblenden
stateDoneEnglish ReachedGerman Erreicht
stateNextEnglish Up nextGerman Als Nächstes
stateLaterEnglish LaterGerman Später
trackEnglish Milestone trackGerman Meilensteine im Verlauf
groupByEnglish Group byGerman Gruppieren nach
initiativeEnglish InitiativeGerman Initiative
quarterEnglish QuarterGerman Quartal
activeProjectsEnglish Active projectsGerman Aktive Projekte
plannedEnglish Planned budgetGerman Geplantes Budget
spentEnglish Spent so farGerman Bisher ausgegeben
healthMixEnglish Health across projectsGerman Zustand aller Projekte
filterHealthEnglish Show only {health}German Nur {health} zeigen
budgetEnglish BudgetGerman Budget
overEnglish {amount} overGerman {amount} drüber
leftEnglish {amount} leftGerman noch {amount}
openEnglish Open {name}German {name} öffnen
closeEnglish CloseGerman Schließen
weeklyUpdateEnglish Weekly updateGerman Wochenbericht
savedEnglish Draft saved {time}German Entwurf gespeichert {time}
saveDraftEnglish Save draftGerman Entwurf speichern
publishEnglish Post updateGerman Update veröffentlichen
publishedEnglish Update posted. {n} people get an email.German Update veröffentlicht. {n} Personen bekommen eine E-Mail.
writeEnglish WriteGerman Schreiben
previewEnglish PreviewGerman Vorschau
howIsItEnglish How is the project doing?German Wie steht das Projekt?
on-track-hintEnglish Work goes as plannedGerman Alles läuft wie geplant
at-risk-hintEnglish A date or the budget may slipGerman Termin oder Budget könnten rutschen
off-track-hintEnglish Needs a decision this weekGerman Braucht diese Woche eine Entscheidung
summaryEnglish SummaryGerman Zusammenfassung
summaryHintEnglish Two or three sentences for people who only read this.German Zwei oder drei Sätze für alle, die nur das lesen.
charsEnglish {n} of {max} charactersGerman {n} von {max} Zeichen
highlightsEnglish HighlightsGerman Highlights
highlightsHintEnglish Finished this week. Pick what goes into the update.German Diese Woche erledigt. Auswählen, was ins Update kommt.
blockersEnglish BlockersGerman Hindernisse
blockersHintEnglish What holds the team up, and who can help.German Was das Team aufhält, und wer helfen kann.
nextStepsEnglish Next stepsGerman Nächste Schritte
addStepEnglish Add a stepGerman Schritt hinzufügen
addEnglish AddGerman Hinzufügen
removeEnglish Remove {item}German {item} entfernen
numbersEnglish This week in numbersGerman Die Woche in Zahlen
recipientsEnglish RecipientsGerman Empfänger
notifyEnglish Also send as emailGerman Zusätzlich als E-Mail senden
previousEnglish Earlier updatesGerman Frühere Updates
nothingEnglish Nothing picked yet.German Noch nichts ausgewählt.
byEnglish by {name}German von {name}
finishedCountEnglish {n} tasks finishedGerman {n} Aufgaben erledigt
breadcrumbEnglish BreadcrumbGerman Brotkrumen
legendEnglish LegendGerman Legende

Accessibility

Read from the source of the component.

  • Projects handles the keys Enter, Arrow up, Arrow down, Arrow left, Arrow right, Home, End and Space itself.
  • Sets aria-checked, aria-controls, aria-current, aria-describedby, aria-expanded, aria-label, aria-labelledby, aria-live, aria-pressed, aria-selected, aria-valuemax, aria-valuemin and aria-valuenow, so screen readers announce purpose and state.
  • Uses the roles group, label, listbox, option, radio, radiogroup, status and switch.
  • Announces changes through a live region without moving focus.
  • Every field has a label, visible or for screen readers.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 10 places in the code switch motion off then.

Frequent questions

How do I install Projects?

With aiw add @ai-website/projects. The command puts components/ui/projects.tsx into your project, the code is yours from then on. It brings along button, icon and sidebar. It needs no further npm packages.

Which variants does Projects have?

6 variants, Project list, Project overview, Gantt timeline, Milestone track, Portfolio and Weekly status update. You pick one with the variant prop, for example variant="overview".

Can I translate the texts of Projects?

Yes. Projects carries 123 texts of its own in English and German, such as “On track”, “At risk” and “Off track”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Projects?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Projects with aiw_components and install it with aiw_add @ai-website/projects. Name the variant in your prompt, for example variant="list", and the assistant writes your content straight into the props.

Similar components

More from App, the same area of the kit.

Often combined with

Sections that usually sit next to Projects on a page.

Often searched

Jump to

Copied to the clipboard