Help

Listicle - Admin Components

Note: This component is available since Medusa v2.21.0.

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
import { defineWidgetConfig } from "@medusajs/admin-sdk"
import {
  ActionMenu,
  Listicle,
} from "@medusajs/dashboard/components"
import { Trash } from "@medusajs/icons"
import { Container, Heading } from "@medusajs/ui"
import { useTranslation } from "react-i18next"

const AddressesWidget = () => {
  const { t } = useTranslation()
  const addresses = [
    { id: "addr_1", name: "Home", street: "1 Main St" },
  ]

  return (
    <Container className="p-0">
      <Heading level="h2" className="px-6 py-4">
        Addresses
      </Heading>
      {addresses.map((address) => (
        <Listicle
          key={address.id}
          labelKey={address.name}
          descriptionKey={address.street}
        >
          <ActionMenu
            groups={[
              {
                actions: [
                  {
                    icon: <Trash />,
                    label: t("actions.delete"),
                    onClick: () => {},
                  },
                ],
              },
            ]}
          />
        </Listicle>
      ))}
    </Container>
  )
}

export const config = defineWidgetConfig({
  zone: "customer.details.after",
})

export 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
import { useTranslation } from "react-i18next"

const { t } = useTranslation()

return (
  <Listicle
    labelKey={t("stockLocations.sidebar.label")}
    descriptionKey={t(
      "stockLocations.sidebar.description"
    )}
  />
)

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

Props#

labelKeystring

The item's label, shown as the card's title.

descriptionKeystring

The item's description, shown under the label.

childrenReact.ReactNodeOptional

An element shown at the end of the item, such as an ActionMenu.

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

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

Was this page helpful?