@aelig/fields-builder

Fields Builder

Add

pnpm dlx shadcn@latest add @aelig/fields-builder

Renders a structured read-only field summary from field metadata.

Preview

Status:Ready

Account

Plan

Pro

Website

Usage

import { FieldsBuilder } from "@/components/ui/fields-builder"

const fields = [
  {
    fieldType: "base",
    label: "Status",
    value: "Ready",
    compact: true,
  },
  {
    fieldType: "group",
    label: "Account",
    children: [
      { fieldType: "base", label: "Plan", value: "Pro" },
      { fieldType: "link", label: "Website", url: "https://aelig.art" },
    ],
  },
]

export function AccountSummary() {
  return <FieldsBuilder fields={fields} />
}

Variants and options

base

Displays a label/value pair, either compact or outlined.

group

Nests another FieldsBuilder inside a grouped item.

link

Renders an external link row with an action icon.