Strato Arsenal

The Strato Arsenal

Strato is Dynatrace's design system — a component library that makes your app look native to the platform. Everything imports from @dynatrace/strato-components.

Import Paths

// Layouts
import { Page, AppHeader, Flex, TitleBar } from "@dynatrace/strato-components/layouts";

// Typography
import { Heading, Text } from "@dynatrace/strato-components/typography";

// Buttons
import { Button, IntentButton } from "@dynatrace/strato-components/buttons";

// Tables
import { DataTable, convertToColumns } from "@dynatrace/strato-components/tables";

// Charts
import { TimeseriesChart, convertToTimeseries } from "@dynatrace/strato-components/charts";

// Content
import { ProgressCircle, Chip } from "@dynatrace/strato-components/content";

// Icons
import { CpuIcon, MemoryIcon } from "@dynatrace/strato-icons";

ProgressCircle

Show a percentage value as a circular gauge:

import { ProgressCircle } from "@dynatrace/strato-components/content";

<ProgressCircle value={73.5} max={100}>
  <ProgressCircle.Label>CPU</ProgressCircle.Label>
  <ProgressCircle.Value>73.5%</ProgressCircle.Value>
</ProgressCircle>

Chips

Status indicators and tags:

import { Chip } from "@dynatrace/strato-components/content";

<Chip color="success">Running</Chip>
<Chip color="warning">Degraded</Chip>
<Chip color="critical">Down</Chip>

Custom DataTable Columns

Override column rendering for rich content:

const columns = [
  {
    accessor: "entity.name",
    header: "Host",
  },
  {
    accessor: "state",
    header: "Status",
    cell: ({ value }) => (
      <Chip color={value === "RUNNING" ? "success" : "critical"}>
        {value}
      </Chip>
    ),
  },
  {
    accessor: "cpuUsage",
    header: "CPU",
    cell: ({ value }) => (
      <ProgressCircle value={value} max={100} size="small">
        <ProgressCircle.Value>{value?.toFixed(1)}%</ProgressCircle.Value>
      </ProgressCircle>
    ),
  },
];

Design Tokens

Strato provides CSS custom properties for consistent theming:

/* Colors */
var(--dt-colors-text-primary)
var(--dt-colors-text-secondary)
var(--dt-colors-background-surface)
var(--dt-colors-charts-categorical-1)

/* Spacing */
var(--dt-spacing-4)   /* 4px */
var(--dt-spacing-8)   /* 8px */
var(--dt-spacing-16)  /* 16px */

Use these in custom CSS to stay consistent with the Dynatrace theme, including dark mode support.

Flex Layout Patterns

// Horizontal row with gap
<Flex flexDirection="row" gap={8} alignItems="center">
  <CpuIcon />
  <Text>4 cores</Text>
</Flex>

// Vertical stack
<Flex flexDirection="column" gap={16} padding={32}>
  <TitleBar>...</TitleBar>
  <DataTable ... />
</Flex>

// Grid-like layout
<Flex flexDirection="row" gap={16} flexWrap="wrap">
  <Flex flex={1} minWidth={300}>Card 1</Flex>
  <Flex flex={1} minWidth={300}>Card 2</Flex>
</Flex>

What's Next

In Module 6, we add charts — timeseries visualizations that turn raw metrics into something you can actually read at a glance.