Section Row - Admin Components

In this guide, you'll learn how to create a section row component that matches the Medusa Admin's design conventions.

The Medusa Admin often shows information in rows of label-values, such as when showing a product's details.

To create a component that shows information in the same structure, create the file src/admin/components/section-row.tsx with the following content:

src/admin/components/section-row.tsx
1import { Text, clx } from "@medusajs/ui"2
3export type SectionRowProps = {4  title: string5  value?: React.ReactNode | string | null6  actions?: React.ReactNode7}8
9export const SectionRow = ({ title, value, actions }: SectionRowProps) => {10  const isValueString = typeof value === "string" || !value11
12  return (13    <div14      className={clx(15        `text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4`,16        {17          "grid-cols-[1fr_1fr_28px]": !!actions,18        }19      )}20    >21      <Text size="small" weight="plus" leading="compact">22        {title}23      </Text>24
25      {isValueString ? (26        <Text27          size="small"28          leading="compact"29          className="whitespace-pre-line text-pretty"30        >31          {value ?? "-"}32        </Text>33      ) : (34        <div className="flex flex-wrap gap-1">{value}</div>35      )}36
37      {actions && <div>{actions}</div>}38    </div>39  )40}

The SectionRow component shows a title and a value in the same row.

It accepts the following props:

Example#

Use the SectionRow component in any widget or UI route.

For example, create the widget src/admin/widgets/product-widget.tsx with the following content:

src/admin/widgets/product-widget.tsx
1import { defineWidgetConfig } from "@medusajs/admin-sdk"2import { Container } from "../components/container"3import { Header } from "../components/header"4import { SectionRow } from "../components/section-row"5
6const ProductWidget = () => {7  return (8    <Container>9      <Header title="Product Widget" />10      <SectionRow title="Name" value="John" />11    </Container>12  )13}14
15export const config = defineWidgetConfig({16  zone: "product.details",17})18
19export default ProductWidget

This widget also uses the Container and Header custom component.