Block PartsPro

Record Card

A card that stands in for a table row on small screens: who it is, a status and a few key fields.

Usage

sarah@wunderui.dev

Active

lucas@initech.dev

Trial

Tap a record to open it.

bash

npm install @wunderui/react

Then import what you need:

tsx

import { RecordCard, RecordCardProps } from "@wunderui/react"

Prop	Type	Default
title	ReactNode	—
subtitle	ReactNode	—
person	Person	—
badge	{ label: ReactNode; color?: BadgeColor }	—
fields	{ label: ReactNode; value: ReactNode }[]	—
onClick	() => void	—
className	string	—