Listicle - Admin Components

The Listicle component shows a single card-styled list item with a label, a description, and an optional trailing element such as an action menu. The Medusa Admin uses it to list a customer's addresses in the customer details page.

Code
import { Listicle } from "@medusajs/dashboard/components"

Example#

Show a list of addresses in a widget, each with a delete action:

Code
1import { defineWidgetConfig } from "@medusajs/admin-sdk"2import {3  ActionMenu,4  Listicle,5} from "@medusajs/dashboard/components"6import { Trash } from "@medusajs/icons"7import { Container, Heading } from "@medusajs/ui"8import { useTranslation } from "react-i18next"9
10const AddressesWidget = () => {11  const { t } = useTranslation()12  const addresses = [13    { id: "addr_1", name: "Home", street: "1 Main St" },14  ]15
16  return (17    <Container className="p-0">18      <Heading level="h2" className="px-6 py-4">19        Addresses20      </Heading>21      {addresses.map((address) => (22        <Listicle23          key={address.id}24          labelKey={address.name}25          descriptionKey={address.street}26        >27          <ActionMenu28            groups={[29              {30                actions: [31                  {32                    icon: <Trash />,33                    label: t("actions.delete"),34                    onClick: () => {},35                  },36                ],37              },38            ]}39          />40        </Listicle>41      ))}42    </Container>43  )44}45
46export const config = defineWidgetConfig({47  zone: "customer.details.after",48})49
50export default AddressesWidget

Translations#

The labelKey and descriptionKey props are named after the translation keys that the Medusa Admin passes to them, but the component renders their values as they are. So, translate the values before passing them to the component using the t function of the useTranslation hook from react-i18next:

Code
1import { useTranslation } from "react-i18next"2
3const { t } = useTranslation()4
5return (6  <Listicle7    labelKey={t("stockLocations.sidebar.label")}8    descriptionKey={t(9      "stockLocations.sidebar.description"10    )}11  />12)

Learn more about translations and how to add your own keys in the Admin Translations documentation.

Props#

The ListicleProps type is also exported, so you can use it to type your own wrapper components:

Code
1import type {2  ListicleProps,3} from "@medusajs/dashboard/components"