Zum Inhalt springen
UI Kit
Accent

Profiles

Profilseiten für Personen, Firmen und Teams, ein öffentliches Portfolio, ein Editor mit Live-Vorschau und ein Stapel Kontaktkarten.

6 Variants
Kategorie wechseln

Profil

Person in der App

Titelbild, Avatar mit Status, Ortszeit, Kontaktaktionen, Über und Fähigkeiten, Kennzahlen, Beitrags-Heatmap und Aktivitätsverlauf. Telefone wechseln die Bereiche über Tabs.

Firmenprofil

Logo, Branche, Größe und Standorte, Eckdaten, offene Deals mit Chance, Personen, Dokumente und Aktivität. Seitenkarten klappen auf dem Telefon ein.

Öffentliches Portfolio

Eine eigene Seite mit Verfügbarkeit, Folgen und E-Mail, filterbarem Werkraster, Über, Erfahrung und Links.

Teamverzeichnis

Mitglieder mit Status und Statusnachricht, eine Leiste der Zeitzonen mit Ortszeiten, Suche, Gruppenfilter und Einladedialog. Auf dem Telefon eine Liste.

Editor mit Live-Vorschau

Jede Änderung erscheint in der Vorschaukarte neben dem Formular, als Profilkarte oder Hover-Karte. Titelbildwahl, Fähigkeiten, Status und Speicherleiste. Telefone klappen die Vorschau oben ein.

Stapel Kontaktkarten

Kontakte als aufgefächerter Kartenstapel mit Ortszeit, E-Mail und Telefon. Chips, Pfeile und Pfeiltasten holen eine Karte nach vorn.

Details

Was Profil mitbringt, aus Registry und Quellcode gelesen.

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

Props

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

  • variantoptional
    ProfileVariant

    personcompanypublicteameditcard-stack

  • sidebaroptional
    Omit<SidebarProps, 'children'>

    The app frame for person, company, team and edit. public and card-stack stand alone.

  • personoptional
    ProfilePerson

    person, public, edit

  • titleoptional
    string

    Heading for team, edit and card-stack

  • subtitleoptional
    string
  • descriptionoptional
    string

    card-stack: a sentence under the title

  • statsoptional
    ProfileStat[]
  • activityoptional
    ProfileActivity[]
  • contributionsoptional
    number[]

    person: one value per day, oldest first, the last one is today

  • nowoptional
    string

    ISO date and time of "now", so local times agree on server and browser

  • viewerTimeZoneoptional
    string

    The time zone of the viewer, for "2 h ahead"

  • currencyoptional
    string
  • companyoptional
    ProfileCompany

    company

  • peopleoptional
    ProfileMember[]
  • dealsoptional
    ProfileDeal[]
  • documentsoptional
    ProfileDocument[]
  • worksoptional
    ProfileWork[]

    public

  • followersoptional
    number
  • availableoptional
    string

    public: e.g. "Taking projects from November"

  • experienceoptional
    { org: string; role: string; years: string }[]
  • membersoptional
    ProfileMember[]

    team, card-stack

  • groupsoptional
    string[]
  • coversoptional
    React.ReactNode[]

    edit: covers to pick from

  • timeZonesoptional
    string[]
  • onSaveoptional
    (person: ProfilePerson) => void | Promise<void>
  • onInviteoptional
    (invite: { email: string; group: string; role: string }) => void

Eingebaute Texte

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

Alle 127 Texte anzeigen
messageEnglisch Send messageDeutsch Nachricht senden
callEnglisch CallDeutsch Anrufen
moreEnglisch More actionsDeutsch Weitere Aktionen
localTimeEnglisch {time} local timeDeutsch {time} Ortszeit
sameTimeEnglisch same time as youDeutsch gleiche Zeit wie du
aheadEnglisch {n} h aheadDeutsch {n} Std. voraus
behindEnglisch {n} h behindDeutsch {n} Std. zurück
joinedEnglisch Joined {date}Deutsch Dabei seit {date}
overviewEnglisch OverviewDeutsch Überblick
activityEnglisch ActivityDeutsch Aktivität
aboutEnglisch AboutDeutsch Über
contactEnglisch ContactDeutsch Kontakt
skillsEnglisch SkillsDeutsch Fähigkeiten
reportsToEnglisch Reports toDeutsch Berichtet an
emailEnglisch EmailDeutsch E-Mail
phoneEnglisch PhoneDeutsch Telefon
websiteEnglisch WebsiteDeutsch Website
contributionsEnglisch ContributionsDeutsch Beiträge
contribTotalEnglisch {n} contributions in the last yearDeutsch {n} Beiträge im letzten Jahr
contribTotalShortEnglisch {n} in the last 26 weeksDeutsch {n} in den letzten 26 Wochen
lessEnglisch LessDeutsch Weniger
moreLevelEnglisch MoreDeutsch Mehr
dayCountEnglisch {date}, {n}Deutsch {date}, {n}
viewSectionsEnglisch Profile sectionsDeutsch Bereiche des Profils
onlineEnglisch OnlineDeutsch Online
awayEnglisch AwayDeutsch Abwesend
busyEnglisch Do not disturbDeutsch Nicht stören
offlineEnglisch OfflineDeutsch Offline
addNoteEnglisch Add noteDeutsch Notiz anlegen
newDealEnglisch Create dealDeutsch Deal anlegen
visitEnglisch Open websiteDeutsch Website öffnen
employeesEnglisch {n} employeesDeutsch {n} Mitarbeitende
foundedEnglisch Founded {year}Deutsch Gegründet {year}
locationsEnglisch LocationsDeutsch Standorte
hqEnglisch HeadquartersDeutsch Hauptsitz
peopleEnglisch PeopleDeutsch Personen
peopleCountEnglisch {n} peopleDeutsch {n} Personen
dealsEnglisch Open dealsDeutsch Offene Deals
dealsTotalEnglisch {n} open, {sum} weightedDeutsch {n} offen, {sum} gewichtet
dealEnglisch DealDeutsch Deal
stageEnglisch StageDeutsch Phase
ownerEnglisch OwnerDeutsch Betreut von
closeDateEnglisch CloseDeutsch Abschluss
valueEnglisch ValueDeutsch Wert
chanceEnglisch {n} chanceDeutsch {n} Chance
documentsEnglisch DocumentsDeutsch Dokumente
downloadEnglisch Download {name}Deutsch {name} herunterladen
detailsEnglisch DetailsDeutsch Details
industryEnglisch IndustryDeutsch Branche
sizeEnglisch SizeDeutsch Größe
customerSinceEnglisch Customer sinceDeutsch Kunde seit
accountOwnerEnglisch Account ownerDeutsch Betreut von
writeToEnglisch Write to {name}Deutsch {name} schreiben
showEnglisch ShowDeutsch Zeigen
hideEnglisch HideDeutsch Ausblenden
followEnglisch FollowDeutsch Folgen
followingEnglisch FollowingDeutsch Gefolgt
followersEnglisch FollowersDeutsch Follower
worksEnglisch WorksDeutsch Arbeiten
appreciationsEnglisch AppreciationsDeutsch Anerkennungen
getInTouchEnglisch Get in touchDeutsch Kontakt aufnehmen
writeEmailEnglisch Write an emailDeutsch E-Mail schreiben
selectedWorksEnglisch Selected worksDeutsch Ausgewählte Arbeiten
allEnglisch AllDeutsch Alle
filterWorksEnglisch Filter worksDeutsch Arbeiten filtern
experienceEnglisch ExperienceDeutsch Erfahrung
elsewhereEnglisch ElsewhereDeutsch Anderswo
projectQEnglisch Have a project in mind?Deutsch Ein Projekt im Kopf?
projectTextEnglisch Tell me about it in a few lines. I answer within two working days.Deutsch Erzähl mir in ein paar Zeilen davon. Ich antworte innerhalb von zwei Werktagen.
likesEnglisch {n} appreciationsDeutsch {n} Anerkennungen
siteNavEnglisch ProfileDeutsch Profil
inviteEnglisch Invite peopleDeutsch Personen einladen
searchEnglisch Search peopleDeutsch Personen suchen
groupsEnglisch GroupsDeutsch Gruppen
nowWorkingEnglisch Working hours nowDeutsch Arbeitszeiten jetzt
zoneEnglisch {n} hereDeutsch {n} hier
noMatchEnglisch Nobody matches this search.Deutsch Niemand passt zu dieser Suche.
inviteTitleEnglisch Invite to the teamDeutsch Ins Team einladen
inviteTextEnglisch They get an email with a link that is valid for seven days.Deutsch Die Person bekommt eine E-Mail mit einem Link, der sieben Tage gilt.
inviteEmailEnglisch Email addressDeutsch E-Mail-Adresse
inviteGroupEnglisch GroupDeutsch Gruppe
inviteRoleEnglisch RoleDeutsch Rolle
memberEnglisch MemberDeutsch Mitglied
adminEnglisch AdminDeutsch Admin
sendInviteEnglisch Send invitationDeutsch Einladung senden
cancelEnglisch CancelDeutsch Abbrechen
closeEnglisch CloseDeutsch Schließen
invitedEnglisch Invitation sent to {email}Deutsch Einladung an {email} gesendet
presenceEnglisch {online} online, {away} away, {off} offlineDeutsch {online} online, {away} abwesend, {off} offline
editTitleEnglisch Edit profileDeutsch Profil bearbeiten
previewEnglisch Live previewDeutsch Live-Vorschau
showPreviewEnglisch Show previewDeutsch Vorschau zeigen
hidePreviewEnglisch Hide previewDeutsch Vorschau ausblenden
previewModeEnglisch Preview asDeutsch Vorschau als
asCardEnglisch Profile cardDeutsch Profilkarte
asHoverEnglisch Hover cardDeutsch Hover-Karte
photoEnglisch Photo and coverDeutsch Foto und Titelbild
photoHintEnglisch Square photo, at least 400 pixels. The cover sits behind your name.Deutsch Quadratisches Foto, mindestens 400 Pixel. Das Titelbild liegt hinter deinem Namen.
changePhotoEnglisch Upload new photoDeutsch Neues Foto hochladen
coverEnglisch CoverDeutsch Titelbild
basicsEnglisch BasicsDeutsch Grunddaten
basicsHintEnglisch How colleagues find and address you.Deutsch Wie Kolleginnen und Kollegen dich finden und ansprechen.
nameEnglisch Full nameDeutsch Vollständiger Name
pronounsEnglisch PronounsDeutsch Pronomen
roleEnglisch RoleDeutsch Rolle
teamEnglisch TeamDeutsch Team
locationEnglisch LocationDeutsch Ort
timeZoneEnglisch Time zoneDeutsch Zeitzone
aboutHintEnglisch A few sentences about what you work on. Up to 280 characters.Deutsch Ein paar Sätze dazu, woran du arbeitest. Bis zu 280 Zeichen.
charsLeftEnglisch {n} characters leftDeutsch noch {n} Zeichen
skillsHintEnglisch Up to eight. Press Enter to add.Deutsch Bis zu acht. Mit Enter hinzufügen.
addSkillEnglisch Add skillDeutsch Fähigkeit hinzufügen
newSkillEnglisch New skillDeutsch Neue Fähigkeit
removeSkillEnglisch Remove {name}Deutsch {name} entfernen
contactHintEnglisch Shown to people in your workspace only.Deutsch Nur für Personen in deinem Arbeitsbereich sichtbar.
statusLabelEnglisch StatusDeutsch Status
statusTextEnglisch Status messageDeutsch Statusnachricht
unsavedEnglisch Unsaved changesDeutsch Ungespeicherte Änderungen
discardEnglisch Discard changesDeutsch Änderungen verwerfen
saveEnglisch Save profileDeutsch Profil speichern
savingEnglisch SavingDeutsch Wird gespeichert
savedEnglisch Profile savedDeutsch Profil gespeichert
ofEnglisch {i} of {n}Deutsch {i} von {n}
previousEnglisch Previous contactDeutsch Vorheriger Kontakt
nextEnglisch Next contactDeutsch Nächster Kontakt
pickEnglisch Pick a contactDeutsch Kontakt wählen
contactCardEnglisch Contact cardDeutsch Kontaktkarte

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Profil reagiert selbst auf die Tasten Escape, Enter, Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts, Tab und Leertaste.
  • Setzt aria-checked, aria-controls, aria-describedby, aria-expanded, aria-haspopup, aria-label, aria-labelledby, aria-live, aria-modal, aria-pressed und aria-roledescription, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen dialog, group, img, radio, radiogroup und status.
  • 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

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 13 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Profil?

Mit aiw add @ai-website/profile. Der Befehl legt die Datei components/ui/profile.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 Profil?

6 Varianten, Person in der App, Firmenprofil, Öffentliches Portfolio, Teamverzeichnis, Editor mit Live-Vorschau und Stapel Kontaktkarten. Du wählst sie mit der Prop variant, zum Beispiel variant="company".

Kann ich die Texte von Profil übersetzen?

Ja. Profil bringt 127 eigene Texte auf Deutsch und Englisch mit, etwa „Nachricht senden“, „Anrufen“ und „Weitere Aktionen“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Profil einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Profil mit aiw_components und installieren sie mit aiw_add @ai-website/profile. Nenn im Prompt die Variante, etwa variant="person", 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 Profiles stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert