About
A read-only name/value list rendered on a semantic definition list, for showing an object's facts (like a run's status, commit, or timestamp) with names in a shared, aligned column.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Key Value List to your project and fits it to your theme.
Code
How Key Value List is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import KeyValueList from "@/components/ui/key-value-list";
/** One nightly run, told as its facts. */
const runFacts = [
{ label: "Pipeline", value: "nightly" },
{ label: "Started", value: "02:14:07" },
{ label: "Runner", value: "eu-west-3" },
{ label: "Commit", value: "2f8a1c04-9b7e-4d31-a5f0-c6e2" },
];
export default function KeyValueListTightDemo() {
return (
<div className="flex w-full items-center justify-center bg-background p-10 text-foreground">
<div className="w-full max-w-xs rounded-lg border border-border bg-card p-6">
<KeyValueList items={runFacts} tight />
</div>
</div>
);
}
More by keshon
View all
List
1
Thinking
Lanes
Status Dot
Spinner
Note
Split