Section Row - Admin Components
Archived: Medusa exports a
SectionRow component from the @medusajs/dashboard package since v2.21.0. Use the exported component instead of building your own. This guide is kept for reference only.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:
import { Text, clx } from "@medusajs/ui"
export type SectionRowProps = {
title: string
value?: React.ReactNode | string | null
actions?: React.ReactNode
}
export const SectionRow = ({ title, value, actions }: SectionRowProps) => {
const isValueString = typeof value === "string" || !value
return (
<div
className={clx(
`text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4`,
{
"grid-cols-[1fr_1fr_28px]": !!actions,
}
)}
>
<Text size="small" weight="plus" leading="compact">
{title}
</Text>
{isValueString ? (
<Text
size="small"
leading="compact"
className="whitespace-pre-line text-pretty"
>
{value ?? "-"}
</Text>
) : (
<div className="flex flex-wrap gap-1">{value}</div>
)}
{actions && <div>{actions}</div>}
</div>
)
}
The SectionRow component shows a title and a value in the same row.
It accepts the following props:
titlestringvalueReact.ReactNode | string | nullOptionalactionsReact.ReactNodeOptionalExample#
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:
import { defineWidgetConfig } from "@medusajs/admin-sdk"
import { Container } from "../components/container"
import { Header } from "../components/header"
import { SectionRow } from "../components/section-row"
const ProductWidget = () => {
return (
<Container>
<Header title="Product Widget" />
<SectionRow title="Name" value="John" />
</Container>
)
}
export const config = defineWidgetConfig({
zone: "product.details",
})
export default ProductWidget
This widget also uses the Container and Header custom component.