The thumbnails component provides an interface with image thumbnails with study and series information by a specific patient.

You can use this component to show image thumbnails with study and series information per patient in a custom worklist.


  1. Import the thumbnails component
import MedkenThumbnails from '@medken/react-medken-thumbnails';
  1. Render the thumbnails component with props
render() {
return (

Mandatory Props

patientId [string]

A value of Patient ID (MRN) of a specific patient to display thumbnails

dicomWebUrl [string]

A value of base DICOMweb URL of a specific DICOM image archive to retrieve and load thumbnails and studies metadata

Optional Props

viewerUrl [string]

A value of base URL of a specific DICOM viewer to open DICOM images when thumbnails are clicked

accessToken [string]

A value of access token to authenticate with the DICOM image archive and viewer if configured

mode [number]

A value of appearance mode with different layout and study / series information displaying with thumbnails.

  • 1: Basic (default)
  • 2: Advanced

limitThumbnails [string]

A value of max number of visible thumbnails

dateFormat [string]

A value of date format such as yyyy-MM-dd

theme [object]

An object containing the following properties to customize thumbnail styling

  • primaryColor [string] is primary color of UI elements
  • secondaryColor [string] is secondary color of UI elements
  • highlightColor [string] is highlight color of UI elements
  • fontFamily [string] is font family of UI text elements
  • fontSize [number] is font size of UI text elements
  • spacing [number] is spacing between thumbnails, a number between 0 and 10 inclusive
  • verticalTextMargin [number] is vertical margin between UI text elements in pixels
  • additionalThumbnailFontSize [number] is font size of the additional thumbnail indicator when exceeded the limit