Centrim Design System — a token-first, accessible React component system.
User profile
A single-person record: identity, actions, tabbed profile content and a quiet facts column that stays in view.
What it demonstrates
- Record identity first — Avatar, name, role, status and last-active in the PageHeader
- Secondary and destructive actions separated: primary Edit, quiet Message, destructive Deactivate behind a menu and an AlertDialog
- Tabbed record content (Overview, Activity, Security) sharing one DetailLayout
- A quiet facts column — DescriptionList, direct-report UserRows and a FileList — sticky on desktop, stacked on mobile
- Editing through the composed FormDialog with a success Toast on save
- A loading state built from the existing Skeleton and SkeletonText patterns
How to adapt it
- Keep identity in the PageHeader; do not rebuild a custom hero block.
- Facts and related people belong in the quiet aside, not competing with the tabbed content.
- Route every destructive profile action through AlertDialog — never an inline confirm.
- Use it for one person's record. For editing many people, see List & management.
Composed from
Nothing on this screen is new. Every part is an existing component, layout or pattern.