Metadata List

A key/value property list (a real <dl>). Compose it from MetadataItems, which each render a <dt>/<dd> pair as direct grid children of the list.

Real use · project detail panel

Status: Active
Owner: ALAda Lovelace
Created: Jan 1, 2026
Last updated: 2 hours ago
Repository: wizeworks/silicaui

layout="stack" · label above value, for narrow cards

Plan: Pro
Seats: 12 / 20
Renews: Aug 1, 2026

Using Metadata List

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Metadata List — it needs no JavaScript, so the classes below are the whole story.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class metadata-list, with 2 modifiers:

.metadata-list
.metadata-list-label
.metadata-list-value

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { MetadataList } from "@wizeworks/silicaui-react";

Props

MetadataListProps

Prop	Type	Required	Description
layout	MetadataListLayout	no	"row" (default): label left, value right. "stack": label above value.

MetadataItemProps

Prop	Type	Required	Description
label	React.ReactNode	yes	—
children	React.ReactNode	yes	—
labelClassName	string	no	Class for the <dt>.
className	string	no	Class for the <dd>.

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

import { MetadataList, MetadataItem, Badge, Avatar } from "@wizeworks/silicaui-react";
import { Section, Row } from "../lib/Section";

export function MetadataListDemo() {
    return (
        <>
            <Section title="Real use · project detail panel">
                <div className="max-w-sm rounded-box border border-base-300 p-4">
                    <MetadataList>
                        <MetadataItem label="Status">
                            <Badge color="success" variant="soft">
                                Active
                            </Badge>
                        </MetadataItem>
                        <MetadataItem label="Owner">
                            <div className="flex items-center justify-end gap-2">
                                <Avatar size="xs" alt="Ada Lovelace" color="primary">
                                    AL
                                </Avatar>
                                Ada Lovelace
                            </div>
                        </MetadataItem>
                        <MetadataItem label="Created">Jan 1, 2026</MetadataItem>
                        <MetadataItem label="Last updated">2 hours ago</MetadataItem>
                        <MetadataItem label="Repository">wizeworks/silicaui</MetadataItem>
                    </MetadataList>
                </div>
            </Section>

            <Section title="layout=&quot;stack&quot; · label above value, for narrow cards">
                <Row>
                    <div className="w-56 rounded-box border border-base-300 p-4">
                        <MetadataList layout="stack">
                            <MetadataItem label="Plan">Pro</MetadataItem>
                            <MetadataItem label="Seats">12 / 20</MetadataItem>
                            <MetadataItem label="Renews">Aug 1, 2026</MetadataItem>
                        </MetadataList>
                    </div>
                </Row>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

MetadataList — lowers to <dl>, holding its children. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("MetadataList", "metadata-list", { /* props */ }, [/* children */]);
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "metadata-list metadata-list-primary" rather than passing a colour as a prop.

Takes children: yes
Hydrated by: nothing — this one is static markup

The full API for Metadata List, on every path, is available through the Silica MCP server.