Skip to content
UI Kit
Accent color

Profiles

Profile screens for people, companies and teams, a public portfolio, an editor with live preview and a contact card stack.

6 variants
Switch category

Profile

Person in an app

Cover, avatar with presence, local time, contact actions, about and skills, stats, a contribution heatmap and an activity timeline. Phones switch sections with tabs.

Company record

Logo, industry, size and locations, key facts, open deals with chance, people, documents and activity. Side cards fold on phones.

Public portfolio

A page of its own with availability, follow and email, a filterable works grid, about, experience and links.

Team directory

Members with presence and status, a strip of time zones with local times, search, group filter and an invite dialog. A list on phones.

Editor with live preview

Every change shows in the preview card next to the form, as a profile card or a hover card. Cover picker, skills, status and a save bar. Phones fold the preview on top.

Contact card stack

Contacts as a fanned stack of cards with local time, email and phone. Chips, arrows and the arrow keys bring a card to the front.

Details

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

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

Props

The ProfileProps interface from components/ui/profile.tsx, with the comments from the code.

  • 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

Built-in texts

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

Show all 127 texts
messageEnglish Send messageGerman Nachricht senden
callEnglish CallGerman Anrufen
moreEnglish More actionsGerman Weitere Aktionen
localTimeEnglish {time} local timeGerman {time} Ortszeit
sameTimeEnglish same time as youGerman gleiche Zeit wie du
aheadEnglish {n} h aheadGerman {n} Std. voraus
behindEnglish {n} h behindGerman {n} Std. zurück
joinedEnglish Joined {date}German Dabei seit {date}
overviewEnglish OverviewGerman Überblick
activityEnglish ActivityGerman Aktivität
aboutEnglish AboutGerman Über
contactEnglish ContactGerman Kontakt
skillsEnglish SkillsGerman Fähigkeiten
reportsToEnglish Reports toGerman Berichtet an
emailEnglish EmailGerman E-Mail
phoneEnglish PhoneGerman Telefon
websiteEnglish WebsiteGerman Website
contributionsEnglish ContributionsGerman Beiträge
contribTotalEnglish {n} contributions in the last yearGerman {n} Beiträge im letzten Jahr
contribTotalShortEnglish {n} in the last 26 weeksGerman {n} in den letzten 26 Wochen
lessEnglish LessGerman Weniger
moreLevelEnglish MoreGerman Mehr
dayCountEnglish {date}, {n}German {date}, {n}
viewSectionsEnglish Profile sectionsGerman Bereiche des Profils
onlineEnglish OnlineGerman Online
awayEnglish AwayGerman Abwesend
busyEnglish Do not disturbGerman Nicht stören
offlineEnglish OfflineGerman Offline
addNoteEnglish Add noteGerman Notiz anlegen
newDealEnglish Create dealGerman Deal anlegen
visitEnglish Open websiteGerman Website öffnen
employeesEnglish {n} employeesGerman {n} Mitarbeitende
foundedEnglish Founded {year}German Gegründet {year}
locationsEnglish LocationsGerman Standorte
hqEnglish HeadquartersGerman Hauptsitz
peopleEnglish PeopleGerman Personen
peopleCountEnglish {n} peopleGerman {n} Personen
dealsEnglish Open dealsGerman Offene Deals
dealsTotalEnglish {n} open, {sum} weightedGerman {n} offen, {sum} gewichtet
dealEnglish DealGerman Deal
stageEnglish StageGerman Phase
ownerEnglish OwnerGerman Betreut von
closeDateEnglish CloseGerman Abschluss
valueEnglish ValueGerman Wert
chanceEnglish {n} chanceGerman {n} Chance
documentsEnglish DocumentsGerman Dokumente
downloadEnglish Download {name}German {name} herunterladen
detailsEnglish DetailsGerman Details
industryEnglish IndustryGerman Branche
sizeEnglish SizeGerman Größe
customerSinceEnglish Customer sinceGerman Kunde seit
accountOwnerEnglish Account ownerGerman Betreut von
writeToEnglish Write to {name}German {name} schreiben
showEnglish ShowGerman Zeigen
hideEnglish HideGerman Ausblenden
followEnglish FollowGerman Folgen
followingEnglish FollowingGerman Gefolgt
followersEnglish FollowersGerman Follower
worksEnglish WorksGerman Arbeiten
appreciationsEnglish AppreciationsGerman Anerkennungen
getInTouchEnglish Get in touchGerman Kontakt aufnehmen
writeEmailEnglish Write an emailGerman E-Mail schreiben
selectedWorksEnglish Selected worksGerman Ausgewählte Arbeiten
allEnglish AllGerman Alle
filterWorksEnglish Filter worksGerman Arbeiten filtern
experienceEnglish ExperienceGerman Erfahrung
elsewhereEnglish ElsewhereGerman Anderswo
projectQEnglish Have a project in mind?German Ein Projekt im Kopf?
projectTextEnglish Tell me about it in a few lines. I answer within two working days.German Erzähl mir in ein paar Zeilen davon. Ich antworte innerhalb von zwei Werktagen.
likesEnglish {n} appreciationsGerman {n} Anerkennungen
siteNavEnglish ProfileGerman Profil
inviteEnglish Invite peopleGerman Personen einladen
searchEnglish Search peopleGerman Personen suchen
groupsEnglish GroupsGerman Gruppen
nowWorkingEnglish Working hours nowGerman Arbeitszeiten jetzt
zoneEnglish {n} hereGerman {n} hier
noMatchEnglish Nobody matches this search.German Niemand passt zu dieser Suche.
inviteTitleEnglish Invite to the teamGerman Ins Team einladen
inviteTextEnglish They get an email with a link that is valid for seven days.German Die Person bekommt eine E-Mail mit einem Link, der sieben Tage gilt.
inviteEmailEnglish Email addressGerman E-Mail-Adresse
inviteGroupEnglish GroupGerman Gruppe
inviteRoleEnglish RoleGerman Rolle
memberEnglish MemberGerman Mitglied
adminEnglish AdminGerman Admin
sendInviteEnglish Send invitationGerman Einladung senden
cancelEnglish CancelGerman Abbrechen
closeEnglish CloseGerman Schließen
invitedEnglish Invitation sent to {email}German Einladung an {email} gesendet
presenceEnglish {online} online, {away} away, {off} offlineGerman {online} online, {away} abwesend, {off} offline
editTitleEnglish Edit profileGerman Profil bearbeiten
previewEnglish Live previewGerman Live-Vorschau
showPreviewEnglish Show previewGerman Vorschau zeigen
hidePreviewEnglish Hide previewGerman Vorschau ausblenden
previewModeEnglish Preview asGerman Vorschau als
asCardEnglish Profile cardGerman Profilkarte
asHoverEnglish Hover cardGerman Hover-Karte
photoEnglish Photo and coverGerman Foto und Titelbild
photoHintEnglish Square photo, at least 400 pixels. The cover sits behind your name.German Quadratisches Foto, mindestens 400 Pixel. Das Titelbild liegt hinter deinem Namen.
changePhotoEnglish Upload new photoGerman Neues Foto hochladen
coverEnglish CoverGerman Titelbild
basicsEnglish BasicsGerman Grunddaten
basicsHintEnglish How colleagues find and address you.German Wie Kolleginnen und Kollegen dich finden und ansprechen.
nameEnglish Full nameGerman Vollständiger Name
pronounsEnglish PronounsGerman Pronomen
roleEnglish RoleGerman Rolle
teamEnglish TeamGerman Team
locationEnglish LocationGerman Ort
timeZoneEnglish Time zoneGerman Zeitzone
aboutHintEnglish A few sentences about what you work on. Up to 280 characters.German Ein paar Sätze dazu, woran du arbeitest. Bis zu 280 Zeichen.
charsLeftEnglish {n} characters leftGerman noch {n} Zeichen
skillsHintEnglish Up to eight. Press Enter to add.German Bis zu acht. Mit Enter hinzufügen.
addSkillEnglish Add skillGerman Fähigkeit hinzufügen
newSkillEnglish New skillGerman Neue Fähigkeit
removeSkillEnglish Remove {name}German {name} entfernen
contactHintEnglish Shown to people in your workspace only.German Nur für Personen in deinem Arbeitsbereich sichtbar.
statusLabelEnglish StatusGerman Status
statusTextEnglish Status messageGerman Statusnachricht
unsavedEnglish Unsaved changesGerman Ungespeicherte Änderungen
discardEnglish Discard changesGerman Änderungen verwerfen
saveEnglish Save profileGerman Profil speichern
savingEnglish SavingGerman Wird gespeichert
savedEnglish Profile savedGerman Profil gespeichert
ofEnglish {i} of {n}German {i} von {n}
previousEnglish Previous contactGerman Vorheriger Kontakt
nextEnglish Next contactGerman Nächster Kontakt
pickEnglish Pick a contactGerman Kontakt wählen
contactCardEnglish Contact cardGerman Kontaktkarte

Accessibility

Read from the source of the component.

  • Profile handles the keys Escape, Enter, Arrow up, Arrow down, Arrow left, Arrow right, Tab and Space itself.
  • Sets aria-checked, aria-controls, aria-describedby, aria-expanded, aria-haspopup, aria-label, aria-labelledby, aria-live, aria-modal, aria-pressed and aria-roledescription, so screen readers announce purpose and state.
  • Uses the roles dialog, group, img, radio, radiogroup and status.
  • 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

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 13 places in the code switch motion off then.

Frequent questions

How do I install Profile?

With aiw add @ai-website/profile. The command puts components/ui/profile.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 Profile have?

6 variants, Person in an app, Company record, Public portfolio, Team directory, Editor with live preview and Contact card stack. You pick one with the variant prop, for example variant="company".

Can I translate the texts of Profile?

Yes. Profile carries 127 texts of its own in English and German, such as “Send message”, “Call” and “More actions”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Profile?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Profile with aiw_components and install it with aiw_add @ai-website/profile. Name the variant in your prompt, for example variant="person", 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 Profiles on a page.

Often searched

Jump to

Copied to the clipboard