Identity document

Displays a supplied credential, masked identifier, issuer, dates, and verification status without exposing a raw identifier.

Preview

Residence document

Verification pending

Robin Ellis

Document number: •••• 2048
Issuer: Example civic office
Issued: 12 June 2025
Expires: 12 June 2030

In action

Your document record

A fictional credential. Only the already-masked identifier reaches this view.

Residence document

Verification pending

Robin Ellis

Document number: •••• 2048
Issuer: Example civic office
Issued: 12 June 2025
Expires: 12 June 2030

The issuing authority has not supplied a verification decision.

When to use

Use it for

Identity documents, professional credentials, and permit records using an already-masked display identifier.
Supply verification status and date labels from the host; add real links or actions as children.

Not for

Passing a full identifier and expecting this component to redact it. It renders maskedIdentifier exactly as supplied.
Inferring validity from an expiry date, or providing a cosmetic reveal button without an authorized source.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { IdentityDocument } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/identity-document.

2. Vendor the source

npx @noorddev/vlak-cli add identity-document

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/identity-document.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { IdentityDocument } from "@noorddev/vlak-react";

<IdentityDocument documentTitle="Residence document" holderName="Robin Ellis" maskedIdentifier="•••• 2048" issuer="Example civic office" issuedLabel="12 June 2025" expiresLabel="12 June 2030" status="Verification pending" statusDetail="Status supplied by the example record service" />

Props

IdentityDocument

A credential record using only the supplied, display-safe identity information.

Prop	Type	Default	Description
`documentTitle`required	`string`
`holderName`required	`ReactNode`
`maskedIdentifier`	`string \| null`		A display-safe, already-masked identifier. This component does not mask raw data.
`identifierLabel`	`string`	`"Document number"`
`issuer`	`ReactNode`
`issuedLabel`	`ReactNode`
`expiresLabel`	`ReactNode`
`status`required	`ReactNode`		Supplied record or verification status. Expiry is never calculated.
`statusDetail`	`ReactNode`
`children`	`ReactNode`		Working links or application-owned actions. No reveal or copy action is generated.

Also accepts HTMLAttributes<HTMLDivElement>.

Keyboard

Keys	Does
`Tab, Enter, Space`	Supplied native links and buttons keep their keyboard behavior. The document adds no tab stop.

Accessibility

A named group and description list preserve document fields in reading order.
Missing identifier, issuer, and dates are explicitly labelled as not supplied. Status is visible text.
Root attributes, className, style, and the div ref pass through. Supply child controls with at least 44px targets.

Markup

<div class="rs-identity-document" role="group" aria-label="Residence document"><div class="rs-identity-document-header"><p class="rs-identity-document-title">Residence document</p><span class="rs-identity-document-status">Verification pending</span></div><p class="rs-identity-document-holder">Robin Ellis</p><dl class="rs-identity-document-fields"><div class="rs-identity-document-field"><dt class="rs-identity-document-label">Document number</dt><dd class="rs-identity-document-value">•••• 2048</dd></div></dl></div>

Classes

.rs-identity-document.rs-identity-document-header.rs-identity-document-title.rs-identity-document-status.rs-identity-document-holder.rs-identity-document-fields.rs-identity-document-field.rs-identity-document-label.rs-identity-document-value.rs-identity-document-detail.rs-identity-document-actions