Krizaka UI
Krizaka UI
ComponentsIdentity & people

Identity card

The identity of a business or a person at the top of a sheet: a mark, the name and what it is called, chips for its status and registration number, and a QR code that hands the contact to a phone.

Web · ✓Mobile · n/aDesktop · ✓BetaData display
Support level
Beta
Size
Not measured
Who uses it
No live product imports it yet Counted in the dated inventory of 2026-10-28.
import { IdentityCard } from "@krizaka/ui/identity-card";

Web only — React, from @krizaka/ui/identity-card. Beta: its API may still change in a minor version.

  • Mobile · n/a. A phone shows its own identity in the profile screen; the QR code is meant to be scanned from another screen.

Why it is here. Akinaza's business sheet: the shop's legal and trade names, registration number and a vCard QR code, above the numbers an owner copies (krizaka/akinaza#497).

When to use

  • At the top of a business sheet or a profile page, above the facts a person copies (tax numbers, address, links).
  • When a phone should be able to add the contact: pass qr with a vCard(…) text.

When not to use

  • For a person at a glance with gauges and stats.Use instead: Profile card
  • For the head of a collection or a shop in a switcher.Use instead: Entity header

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { IdentityCard } from "@krizaka/ui/identity-card";

Examples

A business

Mark, names, status and registration number, and the contact as a QR code.

Props

The identity of a business or a person: mark, name, subtitle, chips and a contact QR code. Wraps to one column on a phone.

PropTypeDefaultDescription
markrequiredReactNode—The mark: a logo, an avatar. Decorative — the name carries the meaning.
namerequiredReactNode—The name: the legal name of the business, the person's name. It is the card's heading.
chipsReactNode—Under the subtitle, in a row that wraps: a status chip, the registration number as a mono chip, the city.
eyebrowReactNode—A small line above the name (“Business card”), passed translated.
nameAs"h1" | "h2" | "h3" | "p"h2The level of the name.
qrIdentityCardQr—A QR code at the end (under the text on a phone): the contact as a phone can read it.
subtitleReactNode—What it is called day to day, its legal form: “Salon Cèdre & Ciseaux · Incorporated”.

Accessibility

  • name is the heading (h2 by default; h1 when the card is the page's title). The mark is decorative and hidden from assistive technology.
  • The QR code is an image named by qr.label.

Keyboard

KeysAction
Tab, EnterReaches and activates the QR code's copy button, when there is one.

Best practices

  • Put the legal name in name (the heading) and the day-to-day name in subtitle; the registration number goes in a mono chip.
  • Pass the text of the QR code translated, and copyLabel so a person on the computer can paste the vCard.
  • Put only public facts in the vCard: it is drawn in the page and copied to the clipboard.

Generated from the code of @krizaka/ui 3.78.1: its meta.ts, its examples and its types.Edit this documentation on GitHub

Captcha

Previous

Notification preferences

Next

On this page

When to useInstallationExamplesPropsAccessibilityBest practicesRelated components