Label

Text

About

A text element with preset typographic roles (engraved, title, heading, value, readout, dark on graphite, etc.) for naming, measuring and labelling objects in a skeuomorphic "soft hardware" interface, that can also become an inline-editable field.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Label to your project and fits it to your theme.

Code

How Label is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Label } from "@/components/ui/label";

export default function LabelDemo() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center bg-[#F3F3F1] p-10">
      <div
        className="flex w-full max-w-sm flex-col gap-6 rounded-3xl bg-[#F6F5F2] p-8"
        style={{
          boxShadow:
            "inset 0 0 6px 2px rgba(255,255,255,.75), inset 2px 3px 3px -1px rgba(255,255,255,.95), 0 1px 2px rgba(24,22,16,.05), 0 8px 18px -6px rgba(24,22,16,.08)",
        }}
      >
        <div className="flex flex-col gap-1">
          <Label variant="title">Trip to Lisbon</Label>
          <Label variant="engraved">5 days · 14 notes</Label>
        </div>

        <div className="flex items-center justify-between">
          <Label variant="heading">Itinerary</Label>
          <Label variant="query">#lisbon</Label>
        </div>

        <div className="flex items-center gap-6">
          <Label variant="value">22</Label>
          <Label variant="value-small">4</Label>
          <Label variant="count">3</Label>
        </div>

        <div className="flex flex-col gap-1">
          <Label variant="display">An empty pocket.</Label>
          <Label variant="display-quiet">Nothing saved here yet.</Label>
        </div>

        <div className="flex items-center gap-2 self-start rounded-full bg-[#1B1B1D] px-4 py-2">
          <Label variant="readout">320 × 214</Label>
          <Label as="i" variant="readout-dim">
            ·
          </Label>
          <Label variant="on-graphite">Live</Label>
        </div>

        <div className="rounded-2xl bg-[#252527] p-4">
          <Label variant="dark">Engraved on dark chrome</Label>
        </div>

        <Label variant="engraved" tone="accent">
          Drop to mark done
        </Label>
      </div>
    </div>
  );
}