Can I add custom contact roles beyond billing and procurement?

Yes, role is a plain string, so you can add Legal, Security, or Compliance contacts without any code changes to the component.

Does it support a shared team email instead of a person?

Yes, just set name to something like "Accounts Payable" and email to a shared alias like ap@company.com. That's exactly what the demo's AP row does.

How do I let users edit these contacts?

This component only displays contacts. Build a separate form (or reuse the same shape) to collect edits, then pass the updated array back into contacts.

Is there a way to mark a preferred or primary contact?

Yes, set primary: true on one contact to show a "Primary" badge next to their name.

Can I add a vCard export button per contact?

Not built in, but you can add your own button next to the email and phone links that generates and downloads a vCard from the contact's data.

Does it validate email addresses?

No, this component only renders whatever email string you pass in as a mailto link. Validate the format wherever contacts are entered or edited.

Billing Procurement Contact Details

A contact list for enterprise billing relationships, where a single account often needs separate points of contact for billing, procurement, and accounts payable. Each contact shows a name, role, avatar with initials fallback, and email and phone links. Built for enterprise account settings and billing portals where a vendor's finance team needs to know exactly who to reach for what.

By Staaarter Team

Billing

Updated May 5, 2026

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its avatar, badge dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/billing-procurement-contact-details.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing102.tsx instead.

Usage

The file also exports billing102Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing102, billing102Demo } from "@/components/blocks/billing/billing102";

export default function Page() {
  return <Billing102 {...billing102Demo} />;
}

Props

Prop	Type	Default	Description
title	string	"Procurement contacts"	Heading above the contact list.
description	string	none	Optional one-line note under the heading.
contacts	ProcurementContact[]	none	Contacts rendered in the order given, one per row.
className	string	none	Extra classes for the outer container.

Types

interface ProcurementContact {
  id: string;
  role: string;
  name: string;
  email: string;
  phone?: string;
  avatarSrc?: string;
  primary?: boolean;
}

Behavior notes

This is a read-only display, there's no built-in edit form or validation. Build your own form and pass the saved contacts back in as props.
Each contact's role is a free-text string, not a fixed union, so you can add roles like Legal or Security without changing the component.
Setting primary on a contact adds a "Primary" badge next to their name; nothing else in the component depends on it, so you can use it purely as a visual flag.
The avatar falls back to the contact's initials, computed from the first letter of up to the first two words in their name, when avatarSrc is missing or fails to load.
Email and phone are rendered as real mailto: and tel: links, so they work as tap-to-contact targets on mobile without any extra wiring.

Frequently asked questions

More Billing Blocks

View all →

Billing Invoice List

Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.

Billing Failed Payment Alert

High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.

Billing Credit Balance

Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.

Billing Payment Methods

A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.

Billing Add Card

A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.

Billing Coupon Code

An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.