Chuyển tới nội dung
werewolf-ui
Component

Metadata

Read-only label and value pairs that describe one item: its status, owner, dates, tags. The value is a slot, so it takes text or any component (Badge, Avatar with a name, a link, a small Button). Horizontal puts the labels in one column beside the values; vertical puts each label above its value.

Xem trước

Status
Ready
Owner
Ada Lovelace
Created
Oct 6, 2026
Tags
DesignTokens

Props

  • orientation
  • icon
import { Avatar } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Metadata, MetadataItem } from "@/components/ui/metadata"

<Metadata className="w-full max-w-sm">
  <MetadataItem label="Status">
    <Badge variant="success">Ready</Badge>
  </MetadataItem>
  <MetadataItem label="Owner">
    <Avatar alt="" size="sm">AL</Avatar>
    Ada Lovelace
  </MetadataItem>
  <MetadataItem label="Created">Oct 6, 2026</MetadataItem>
  <MetadataItem label="Tags">
    <Badge variant="blue">Design</Badge>
    <Badge variant="purple">Tokens</Badge>
  </MetadataItem>
</Metadata>

Cách dùng

Khi nào dùng

  • Show read-only facts about one item, each with its name: status, owner, dates, tags, an ID.
  • A details panel beside the main content, with the names in one column and the values lined up next to them.
  • A row of key facts, each name above its value, such as the plan, seats and renewal date of a subscription.

Khi nào không dùng

  • Values the user edits. Use Field, which links the label to the control.
  • Many records that share the same names, such as a list of projects. Use Table, with the names once in its header.
  • A status alone next to an item, with no name for it. Use Badge.

Biến thể

orientation

On Metadata, sets every item. horizontal: labels in one column beside the values, for a details panel. vertical: each label above its value, for a narrow column or a row of key facts. On one MetadataItem, overrides it for that item, such as a long description under horizontal rows.

  • Status
    Ready
    Owner
    Ada Lovelace
    Created
    Oct 6, 2026
    Tags
    DesignTokens

    horizontalmặc định

  • Status
    Ready
    Owner
    Ada Lovelace
    Created
    Oct 6, 2026
    Tags
    DesignTokens

    vertical

import { Avatar } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Metadata, MetadataItem } from "@/components/ui/metadata"

<Metadata className="w-full max-w-sm">
  <MetadataItem label="Status">
    <Badge variant="success">Ready</Badge>
  </MetadataItem>
  <MetadataItem label="Owner">
    <Avatar alt="" size="sm">AL</Avatar>
    Ada Lovelace
  </MetadataItem>
  <MetadataItem label="Created">Oct 6, 2026</MetadataItem>
  <MetadataItem label="Tags">
    <Badge variant="blue">Design</Badge>
    <Badge variant="purple">Tokens</Badge>
  </MetadataItem>
</Metadata>
<Metadata orientation="vertical" className="w-full max-w-sm">
  <MetadataItem label="Status">
    <Badge variant="success">Ready</Badge>
  </MetadataItem>
  <MetadataItem label="Owner">
    <Avatar alt="" size="sm">AL</Avatar>
    Ada Lovelace
  </MetadataItem>
  <MetadataItem label="Created">Oct 6, 2026</MetadataItem>
  <MetadataItem label="Tags">
    <Badge variant="blue">Design</Badge>
    <Badge variant="purple">Tokens</Badge>
  </MetadataItem>
</Metadata>

Ví dụ

Default

Status
Ready
Owner
Ada Lovelace
Created
Oct 6, 2026
Tags
DesignTokens
import { Avatar } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Metadata, MetadataItem } from "@/components/ui/metadata"

<Metadata className="w-full max-w-sm">
  <MetadataItem label="Status">
    <Badge variant="success">Ready</Badge>
  </MetadataItem>
  <MetadataItem label="Owner">
    <Avatar alt="" size="sm">AL</Avatar>
    Ada Lovelace
  </MetadataItem>
  <MetadataItem label="Created">Oct 6, 2026</MetadataItem>
  <MetadataItem label="Tags">
    <Badge variant="blue">Design</Badge>
    <Badge variant="purple">Tokens</Badge>
  </MetadataItem>
</Metadata>

With icons

The icon names nothing on its own, so it is hidden from screen readers. Every label gets one, or none does.

Status
In review
Owner
Ada Lovelace
Due
Oct 20, 2026
Tags
Design
import { IconCalendar, IconCircleDashed, IconTag, IconUser } from "@tabler/icons-react"
import { Avatar } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Metadata, MetadataItem } from "@/components/ui/metadata"

<Metadata className="w-full max-w-sm">
  <MetadataItem label="Status" leadingIcon={<IconCircleDashed size={16} />}>
    <Badge variant="warning">In review</Badge>
  </MetadataItem>
  <MetadataItem label="Owner" leadingIcon={<IconUser size={16} />}>
    <Avatar alt="" size="sm">AL</Avatar>
    Ada Lovelace
  </MetadataItem>
  <MetadataItem label="Due" leadingIcon={<IconCalendar size={16} />}>Oct 20, 2026</MetadataItem>
  <MetadataItem label="Tags" leadingIcon={<IconTag size={16} />}>
    <Badge variant="blue">Design</Badge>
  </MetadataItem>
</Metadata>

Key facts in a row

Vertical items on a grid of three columns: each label above its value.

Plan
Pro
Seats
12 of 20
Renews
Nov 1, 2026
import { Metadata, MetadataItem } from "@/components/ui/metadata"

<Metadata orientation="vertical" className="w-full max-w-lg grid-cols-3">
  <MetadataItem label="Plan">Pro</MetadataItem>
  <MetadataItem label="Seats">12 of 20</MetadataItem>
  <MetadataItem label="Renews">Nov 1, 2026</MetadataItem>
</Metadata>

A long value under the rows

One vertical item in a horizontal list takes the full width, for a value that needs the room.

Status
Ready
Region
Europe
Description
Design tokens and components for teams that build their interface with an agent.
import { Badge } from "@/components/ui/badge"
import { Metadata, MetadataItem } from "@/components/ui/metadata"

<Metadata className="w-full max-w-sm">
  <MetadataItem label="Status">
    <Badge variant="success">Ready</Badge>
  </MetadataItem>
  <MetadataItem label="Region">Europe</MetadataItem>
  <MetadataItem label="Description" orientation="vertical">Design tokens and components for teams that build their interface with an agent.</MetadataItem>
</Metadata>

With an action

A value can hold a control. The label does not name it, so the button carries its own words.

Workspace ID
ws_4f2a9c
Created
Oct 6, 2026
import { Button } from "@/components/ui/button"
import { Metadata, MetadataItem } from "@/components/ui/metadata"

<Metadata className="w-full max-w-sm">
  <MetadataItem label="Workspace ID">
    <span className="font-mono">ws_4f2a9c</span>
    <Button variant="secondary" size="sm">Copy ID</Button>
  </MetadataItem>
  <MetadataItem label="Created">Oct 6, 2026</MetadataItem>
</Metadata>

Nên và không nên

Nên

  • Use Metadata for read-only facts about one item: status, owner, dates, tags, IDs.
  • Keep labels short: one to three words, sentence case, no colon.
  • Give every item a value. When there is none, write it: None, Not set.
  • Pick horizontal for a details panel; vertical for a narrow column, or for a row of key facts with grid-cols-* on Metadata.
  • Wrap a sentence that holds a link in a span, so it stays one line of running text instead of separate pieces.

Không nên

  • Don't put a form control in a value to edit it. A value the user fills in needs Field, with a label linked to the control.
  • Don't use Metadata for many records that share the same labels; use Table.
  • Don't make labels bold or colored. The value is what the user reads; the label only names it.
  • Don't mix items with and without icons in one list.

Props

TênKiểuGiá trịMặc địnhMô tả
orientationenumhorizontal | verticalhorizontalOn Metadata, sets every item. horizontal: labels in one column beside the values, for a details panel. vertical: each label above its value, for a narrow column or a row of key facts. On one MetadataItem, overrides it for that item, such as a long description under horizontal rows.
label bắt buộcnode--Set on MetadataItem. The name of the value: Status, Owner, Created. One to three words, sentence case, no colon.
leadingIconnode--Set on MetadataItem. Decorative Tabler icon before the label: size={16}. Leave it out for no icon. Give every item in a list an icon, or none.

Slot

TênBắt buộcMô tả
itemscóOne MetadataItem per pair.
valuecóThe children of MetadataItem: text, or components such as a Badge, an Avatar with the name after it, a link or a small Button. Several components sit in a row that wraps.

Cấu tạo

PhầnMô tả
rootMetadata: the dl. Horizontal: a two-column grid, labels in the first column as wide as the longest label (at most 40% of the list) and values in the second. Vertical: a grid of one column, items gap-lg; add grid-cols-* to lay them in a row.
itemMetadataItem: one label and value pair, a div around a dt and a dd. Horizontal: a row on the list's two columns (subgrid). Vertical: the label above the value, gap-xs.
labelThe dt: 13px secondary text, with the optional icon before it (gap-xs). Horizontal: at least one sm control tall, text centered.
iconOptional leading icon in the label: 16px, secondary icon color, level with the first line of the label, hidden from screen readers.
valueThe dd: 14px primary text in a row that wraps (gap-sm), so text and components line up. Horizontal: at least one sm control tall, content centered, so a line of text and a 28px button both sit level with the label.

Khả năng truy cập

Role: term and definition (description list)

  • Metadata is a description list: each label is a dt and its value a dd, grouped in a div, so screen readers read every label with its value and announce the number of items.
  • The leading icon is decorative and hidden from screen readers; the label text names the value.
  • To name the whole list, put a heading above it and point aria-labelledby on Metadata at the heading.
  • Controls inside a value (a link, a Button) keep their own name and focus order. A label is not a control's name: give an icon-only button its own aria-label.

Cài đặt

npx shadcn add https://werewolf-ui.vercel.app/r/metadata.json

Lệnh này thêm luôn styles/werewolf.css, bộ token mà mọi component dùng, và các component khác mà nó cần. Import file đó một lần trong CSS gốc, ngay sau @import "tailwindcss", với đường dẫn tính từ file CSS đó (từ app/globals.css là @import "../styles/werewolf.css").