GenericViewSection

A read-only data display layout that renders a list of label/value pairs in a responsive grid. Ideal for detail/view pages where you need to show entity attributes consistently.

📖 Storybook

Preview

Live preview↗ Open in Storybook

Import

import { GenericViewSection } from "@xocialive/ui-components";

Basic usage

<GenericViewSection
  title="Personal Information"
  fields={[
    { label: "Full Name", value: user.name },
    { label: "Email", value: user.email },
    { label: "Role", value: user.role },
    { label: "Status", value: <StatusChip status={user.status} /> },
  ]}
/>

Props

Prop	Type	Default	Description
title	string	—	Section heading
fields	Array<{ label: string; value: ReactNode }>	—	List of label/value pairs to render
columns	number	2	Number of columns in the grid
sx	SxProps<Theme>	—	Root element style overrides