Zum Inhalt springen
UI Kit
Accent

Projects

Projekt-Bildschirme für Anwendungen: Liste mit Zustand, ein Projekt im Überblick, Gantt-Zeitplan, Meilensteine, Portfolio und Wochenbericht.

6 Variants
Kategorie wechseln

Projekte

Projektliste

Zustandsfilter mit Zahlen, Suche und Sortierung. Eine Zeile zeigt ihren letzten Stand daneben, auf dem Telefon direkt darunter.

Projektüberblick

Fortschritt, Ziel mit Schlüsselergebnissen, Status-Updates, Team, Risiken und die nächsten Meilensteine. Telefone wechseln zwischen drei Bereichen.

Gantt-Zeitplan

Gruppierte Aufgaben mit Fortschrittsbalken, Abhängigkeiten, Meilensteinen und Heute-Linie, Zoom nach Wochen oder Monaten. Telefone bekommen eine Wochenagenda.

Meilensteine im Verlauf

Erreicht, als Nächstes und später auf einer Spur, jeweils mit Termin, Verantwortung und einer Ergebnisliste, die mitzählt.

Portfolio

Alle Projekte nach Initiative oder Quartal, mit Budget gegen Plan, Zustand und Verantwortung. Die Leiste oben filtert nach Zustand.

Wochenbericht

Ein Editor im Vollbild mit Zustand, Zusammenfassung, ausgewählten Highlights, Hindernissen und nächsten Schritten, dazu eine Live-Vorschau.

Details

Was Projekte mitbringt, aus Registry und Quellcode gelesen.

Bereich
App
Variants
6
Version
1.0.2 · seit 1.0.0
Datei
components/ui/projects.tsx
Bringt mit
utilskitbuttoniconsidebar
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 123 eigene Texte
Studio
Im Code anpassen
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle ProjectsProps aus components/ui/projects.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    ProjectsVariant

    listoverviewtimelinemilestonesportfoliostatus-update

  • sidebaroptional
    Omit<SidebarProps, 'children'>

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

  • titlePflicht
    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

Eingebaute Texte

Diese Texte schreibt Projekte selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 123 Texte anzeigen
on-trackEnglisch On trackDeutsch Im Plan
at-riskEnglisch At riskDeutsch Gefährdet
off-trackEnglisch Off trackDeutsch Kritisch
doneEnglisch DoneDeutsch Abgeschlossen
allEnglisch AllDeutsch Alle
healthEnglisch HealthDeutsch Zustand
searchEnglisch Search projectsDeutsch Projekte suchen
projectEnglisch ProjectDeutsch Projekt
leadEnglisch LeadDeutsch Leitung
progressEnglisch ProgressDeutsch Fortschritt
targetEnglisch Target dateDeutsch Zieltermin
sortByEnglisch Sort by {col}Deutsch Nach {col} sortieren
projectsEnglisch ProjectsDeutsch Projekte
noMatchEnglisch No project matches these filters.Deutsch Kein Projekt passt zu diesen Filtern.
resetEnglisch Clear filtersDeutsch Filter zurücksetzen
pickEnglisch Pick a project to see its latest status.Deutsch Projekt wählen, um den letzten Stand zu sehen.
latestEnglisch Latest updateDeutsch Letzter Stand
nextMilestoneEnglisch Next milestoneDeutsch Nächster Meilenstein
tasksEnglisch TasksDeutsch Aufgaben
openProjectEnglisch Open projectDeutsch Projekt öffnen
overdueEnglisch OverdueDeutsch Überfällig
sectionsEnglisch SectionsDeutsch Bereiche
overviewEnglisch OverviewDeutsch Überblick
updatesEnglisch UpdatesDeutsch Updates
teamRisksEnglisch Team and risksDeutsch Team und Risiken
completeEnglisch completeDeutsch erledigt
tasksDoneEnglisch Tasks doneDeutsch Aufgaben erledigt
daysLeftEnglisch Days leftDeutsch Tage übrig
budgetUsedEnglisch Budget usedDeutsch Budget verbraucht
ofEnglisch ofDeutsch von
goalsEnglisch Goal and key resultsDeutsch Ziel und Schlüsselergebnisse
startedAtEnglisch Started at {v}Deutsch Start bei {v}
detailsEnglisch DetailsDeutsch Details
clientEnglisch ClientDeutsch Kunde
startEnglisch StartDeutsch Start
teamEnglisch TeamDeutsch Team
upcomingEnglisch Upcoming milestonesDeutsch Nächste Meilensteine
risksEnglisch RisksDeutsch Risiken
highEnglisch HighDeutsch Hoch
mediumEnglisch MediumDeutsch Mittel
lowEnglisch LowDeutsch Niedrig
mitigationEnglisch MitigationDeutsch Gegenmaßnahme
ownerEnglisch OwnerDeutsch Verantwortlich
commentsEnglisch {n} commentsDeutsch {n} Kommentare
reactionsEnglisch {n} reactionsDeutsch {n} Reaktionen
showAllEnglisch Show all updatesDeutsch Alle Updates zeigen
zoomEnglisch ZoomDeutsch Zoom
weeksEnglisch WeeksDeutsch Wochen
monthsEnglisch MonthsDeutsch Monate
todayEnglisch TodayDeutsch Heute
jumpTodayEnglisch Scroll to todayDeutsch Zu heute scrollen
taskEnglisch TaskDeutsch Aufgabe
chartEnglisch Timeline chart, scroll sideways with the arrow keysDeutsch Zeitplan, mit den Pfeiltasten seitlich scrollen
collapseEnglisch Show or hide {group}Deutsch {group} ein- oder ausblenden
toEnglisch toDeutsch bis
daysEnglisch {n} daysDeutsch {n} Tage
dependsOnEnglisch Waits forDeutsch Abhängig von
assigneeEnglisch AssigneeDeutsch Zuständig
durationEnglisch DurationDeutsch Dauer
statusEnglisch StatusDeutsch Stand
lateEnglisch {n} days lateDeutsch {n} Tage im Verzug
onScheduleEnglisch On scheduleDeutsch Im Zeitplan
finishedEnglisch FinishedDeutsch Erledigt
notStartedEnglisch Not startedDeutsch Noch nicht begonnen
thisWeekEnglisch This weekDeutsch Diese Woche
weekOfEnglisch Week of {date}Deutsch Woche ab {date}
legendTaskEnglisch Task with progressDeutsch Aufgabe mit Fortschritt
legendMilestoneEnglisch MilestoneDeutsch Meilenstein
legendDepEnglisch DependencyDeutsch Abhängigkeit
weekEnglisch W{n}Deutsch KW {n}
milestonesDoneEnglisch {done} of {total} milestones reachedDeutsch {done} von {total} Meilensteinen erreicht
nextInEnglisch Next: {title} {when}Deutsch Als Nächstes {title} {when}
deliverablesEnglisch DeliverablesDeutsch Ergebnisse
showDetailsEnglisch Show detailsDeutsch Details zeigen
hideDetailsEnglisch Hide detailsDeutsch Details ausblenden
stateDoneEnglisch ReachedDeutsch Erreicht
stateNextEnglisch Up nextDeutsch Als Nächstes
stateLaterEnglisch LaterDeutsch Später
trackEnglisch Milestone trackDeutsch Meilensteine im Verlauf
groupByEnglisch Group byDeutsch Gruppieren nach
initiativeEnglisch InitiativeDeutsch Initiative
quarterEnglisch QuarterDeutsch Quartal
activeProjectsEnglisch Active projectsDeutsch Aktive Projekte
plannedEnglisch Planned budgetDeutsch Geplantes Budget
spentEnglisch Spent so farDeutsch Bisher ausgegeben
healthMixEnglisch Health across projectsDeutsch Zustand aller Projekte
filterHealthEnglisch Show only {health}Deutsch Nur {health} zeigen
budgetEnglisch BudgetDeutsch Budget
overEnglisch {amount} overDeutsch {amount} drüber
leftEnglisch {amount} leftDeutsch noch {amount}
openEnglisch Open {name}Deutsch {name} öffnen
closeEnglisch CloseDeutsch Schließen
weeklyUpdateEnglisch Weekly updateDeutsch Wochenbericht
savedEnglisch Draft saved {time}Deutsch Entwurf gespeichert {time}
saveDraftEnglisch Save draftDeutsch Entwurf speichern
publishEnglisch Post updateDeutsch Update veröffentlichen
publishedEnglisch Update posted. {n} people get an email.Deutsch Update veröffentlicht. {n} Personen bekommen eine E-Mail.
writeEnglisch WriteDeutsch Schreiben
previewEnglisch PreviewDeutsch Vorschau
howIsItEnglisch How is the project doing?Deutsch Wie steht das Projekt?
on-track-hintEnglisch Work goes as plannedDeutsch Alles läuft wie geplant
at-risk-hintEnglisch A date or the budget may slipDeutsch Termin oder Budget könnten rutschen
off-track-hintEnglisch Needs a decision this weekDeutsch Braucht diese Woche eine Entscheidung
summaryEnglisch SummaryDeutsch Zusammenfassung
summaryHintEnglisch Two or three sentences for people who only read this.Deutsch Zwei oder drei Sätze für alle, die nur das lesen.
charsEnglisch {n} of {max} charactersDeutsch {n} von {max} Zeichen
highlightsEnglisch HighlightsDeutsch Highlights
highlightsHintEnglisch Finished this week. Pick what goes into the update.Deutsch Diese Woche erledigt. Auswählen, was ins Update kommt.
blockersEnglisch BlockersDeutsch Hindernisse
blockersHintEnglisch What holds the team up, and who can help.Deutsch Was das Team aufhält, und wer helfen kann.
nextStepsEnglisch Next stepsDeutsch Nächste Schritte
addStepEnglisch Add a stepDeutsch Schritt hinzufügen
addEnglisch AddDeutsch Hinzufügen
removeEnglisch Remove {item}Deutsch {item} entfernen
numbersEnglisch This week in numbersDeutsch Die Woche in Zahlen
recipientsEnglisch RecipientsDeutsch Empfänger
notifyEnglisch Also send as emailDeutsch Zusätzlich als E-Mail senden
previousEnglisch Earlier updatesDeutsch Frühere Updates
nothingEnglisch Nothing picked yet.Deutsch Noch nichts ausgewählt.
byEnglisch by {name}Deutsch von {name}
finishedCountEnglisch {n} tasks finishedDeutsch {n} Aufgaben erledigt
breadcrumbEnglisch BreadcrumbDeutsch Brotkrumen
legendEnglisch LegendDeutsch Legende

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Projekte reagiert selbst auf die Tasten Enter, Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts, Pos1, Ende und Leertaste.
  • Setzt aria-checked, aria-controls, aria-current, aria-describedby, aria-expanded, aria-label, aria-labelledby, aria-live, aria-pressed, aria-selected, aria-valuemax, aria-valuemin und aria-valuenow, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen group, label, listbox, option, radio, radiogroup, status und switch.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 10 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Projekte?

Mit aiw add @ai-website/projects. Der Befehl legt die Datei components/ui/projects.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon und sidebar. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Projekte?

6 Varianten, Projektliste, Projektüberblick, Gantt-Zeitplan, Meilensteine im Verlauf, Portfolio und Wochenbericht. Du wählst sie mit der Prop variant, zum Beispiel variant="overview".

Kann ich die Texte von Projekte übersetzen?

Ja. Projekte bringt 123 eigene Texte auf Deutsch und Englisch mit, etwa „Im Plan“, „Gefährdet“ und „Kritisch“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Projekte einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Projekte mit aiw_components und installieren sie mit aiw_add @ai-website/projects. Nenn im Prompt die Variante, etwa variant="list", dann schreibt der Assistent deine Inhalte direkt in die Props.

Ähnliche Components

Mehr aus App, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Projects stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert