percona · fabio-silva · Aug 4, 2026 · Aug 4, 2026 · Aug 5, 2026
@@ -105,7 +105,7 @@ These differ from generic Go/React advice. Match **surrounding code** in the fil
 - **Mocks (Go):** small interfaces in `deps.go` + mockery — not hand-rolled fakes for every dependency
 - **UI server state:** TanStack Query hooks in `ui/apps/pmm/src/hooks/api/` — not `useEffect` + `fetch` in components ([`ui/AGENTS.md`](ui/AGENTS.md))
 - **UI client state:** React Context for auth/settings — not Redux or another global store
-- **UI components:** MUI + `@percona/percona-ui`, theme-aware `sx` — not ad-hoc CSS
+- **UI components:** MUI + `@percona/peak-ui`, theme-aware `sx` — not ad-hoc CSS
 - **UI wire format:** camelCase in TypeScript; JSON on the wire is snake_case (`axios-case-converter` in `ui/apps/pmm/src/api/api.ts`)
 - **Generated code:** edit `.proto` / reform models / interfaces — run `make gen`; never hand-edit `*.pb.go`, `*_reform.go`, swagger clients
 

@@ -25,7 +25,7 @@ The UI uses a **Yarn workspaces + Turborepo** monorepo with three packages:
 | **TypeScript**                   | Type-safe development                                |
 | **Vite**                         | Dev server and production build (main app)           |
 | **MUI (Material UI)**            | Component library                                    |
-| **@percona/percona-ui**          | Percona's shared UI component library and theme      |
+| **@percona/peak-ui**             | Percona's shared UI component library and theme      |
 | **TanStack Query (React Query)** | Server state management (API caching, mutations)     |
 | **React Context**                | UI/auth state (AuthProvider, SettingsProvider, etc.) |
 | **Vitest**                       | Unit testing (main app)                              |
@@ -75,7 +75,7 @@ Query keys follow the pattern: `['domain:action', params]` (e.g., `['services:li
 
 ### UI/Auth State (React Context)
 
-Providers are composed in `Providers.tsx`, all wrapped by `ThemeContextProvider` (theme from `@percona/percona-ui`) in `App.tsx`:
+Providers are composed in `Providers.tsx`, all wrapped by `ThemeContextProvider` (theme from `@percona/peak-ui`) in `App.tsx`:
 
 - `AuthProvider` — authentication state
 - `UserProvider` — current user info
@@ -91,7 +91,7 @@ API calls are organized in `src/api/` using axios. Each API module provides type
 
 ## UI Component Library
 
-`@percona/percona-ui` ("Peak Design") is PMM's shared component library — MUI v7-based themed components, design tokens, and `react-hook-form`-integrated inputs, exposing a `pmmThemeOptions` theme variant. **Browse the catalog before hand-rolling a component:**
+`@percona/peak-ui` ("Peak Design") is PMM's shared component library — MUI v7-based themed components, design tokens, and `react-hook-form`-integrated inputs, exposing a `pmmThemeOptions` theme variant. **Browse the catalog before hand-rolling a component:**
 
 - **Storybook (component catalog):** https://percona.github.io/percona-ui
 - **Source & theme options:** https://github.com/percona/percona-ui
@@ -104,7 +104,7 @@ The app is wrapped in `ThemeContextProvider` (see `App.tsx`); style with the the
 
 - Use TanStack Query (`useQuery`, `useMutation`) for all server state
 - Create custom hooks per API domain in `src/hooks/`
-- Use MUI and `@percona/percona-ui` components for consistent styling — browse the [Storybook catalog](https://percona.github.io/percona-ui) before building a component from scratch
+- Use MUI and `@percona/peak-ui` components for consistent styling — browse the [Storybook catalog](https://percona.github.io/percona-ui) before building a component from scratch
 - Use TypeScript strict mode — define types in `src/types/`
 - Co-locate test files next to components (`*.test.tsx`)
 - Use `CrossFrameMessenger` for communication with the Grafana iframe

@@ -11,28 +11,28 @@ See the [PMM Documentation](https://www.percona.com/doc/percona-monitoring-and-m
 
 See detailed information about prerequisites and setup [here](../../README.md)
 
-# Locally testing @percona/percona-ui
+# Locally testing @percona/peak-ui
 
-`@percona/percona-ui` is a normal npm dependency (see `package.json`). To iterate on the library and PMM together, `yarn link` an in-progress checkout against this app. The recipe depends on whether you're running `make dev` on the host or `make run-ui` inside the PMM devcontainer.
+`@percona/peak-ui` is a normal npm dependency (see `package.json`). To iterate on the library and PMM together, `yarn link` an in-progress checkout against this app. The recipe depends on whether you're running `make dev` on the host or `make run-ui` inside the PMM devcontainer.
 
 In both cases:
 
 - Check out the lib from https://github.com/percona/percona-ui.
 - After linking, **uncomment** the `exclude` block in `vite.config.ts` so Vite stops pre-bundling the linked package:
   ```ts
-  // exclude: ['@percona/percona-ui'],
+  // exclude: ['@percona/peak-ui'],
   ```
 - When you're done, **comment the `exclude` block back**, then from `ui/apps/pmm`:
   ```bash
-  yarn unlink @percona/percona-ui
+  yarn unlink @percona/peak-ui
   yarn install --force
   ```
 - Restarting the dev server between linking/unlinking is advised.
 
 ## Host-local flow (`make dev`)
 
 - From the lib folder on the host: `pnpm build:watch` and `yarn link`.
-- From `ui/apps/pmm` on the host: `yarn link @percona/percona-ui`.
+- From `ui/apps/pmm` on the host: `yarn link @percona/peak-ui`.
 - Any change in the lib triggers a rebuild and HMR in PMM.
 
 ## Devcontainer flow (`make run-ui`)
@@ -51,6 +51,6 @@ The host's `yarn link` global registry isn't visible inside the devcontainer, so
    yarn link
    pnpm build:watch &       # leave the watcher running
    cd /root/go/src/github.com/percona/pmm/ui/apps/pmm
-   yarn link @percona/percona-ui
+   yarn link @percona/peak-ui
    ```
 5. Uncomment the `exclude` block in `vite.config.ts`, then back at the repo root: `make run-ui`.
@@ -26,7 +26,7 @@
     "@mui/icons-material": "^7.3.7",
     "@mui/material": "^7.3.7",
     "@mui/x-date-pickers": "^7.5.0",
-    "@percona/percona-ui": "1.0.23",
+    "@percona/peak-ui": "1.0.25",
     "@pmm/shared": "*",
     "@reactour/tour": "^3.8.0",
     "@tanstack/react-query": "^5.45.1",

@@ -8,7 +8,7 @@ import {
   ThemeContextProvider,
   pmmThemeOptions,
   NotistackMuiSnackbar,
-} from '@percona/percona-ui';
+} from '@percona/peak-ui';
 import { ThemeClass } from 'components/theme-class';
 import { useEffect } from 'react';
 import type { ComponentType } from 'react';

@@ -1,7 +1,7 @@
 import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-import { Tooltip } from '@percona/percona-ui';
+import { Tooltip } from '@percona/peak-ui';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { FC, PropsWithChildren } from 'react';
 import Box from '@mui/material/Box';

@@ -1,7 +1,7 @@
 import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-import { Card } from '@percona/percona-ui';
+import { Card } from '@percona/peak-ui';
 import { Page } from 'components/page';
 import { useUser } from 'contexts/user';
 import { FC } from 'react';

@@ -5,7 +5,7 @@ import { NavItemProps } from './SidebarNavItem.types';
 import { NavItem as NavTreeItem } from 'types/navigation.types';
 import { collapseClasses } from '@mui/material/Collapse';
 import { MemoryRouterProps } from 'react-router-dom';
-import { ThemeContextProvider, pmmThemeOptions } from '@percona/percona-ui';
+import { ThemeContextProvider, pmmThemeOptions } from '@percona/peak-ui';
 
 const TEST_NAV_TREE: NavTreeItem = {
   id: 'level-0',

@@ -9,7 +9,7 @@ import {
 } from './SidebarNavItem.utils';
 import { getStyles } from './SidebarNavItem.styles';
 import { useTheme } from '@mui/material/styles';
-import { NavItem } from '@percona/percona-ui';
+import { NavItem } from '@percona/peak-ui';
 import ListItemText from '@mui/material/ListItemText';
 import Stack from '@mui/material/Stack';
 import ListItem from '@mui/material/ListItem';

@@ -2,7 +2,7 @@ import { useContext, useRef } from 'react';
 import { useUpdatePreferences } from './api/useUser';
 import messenger from 'lib/messenger';
 import { ColorMode, MessageType } from '@pmm/shared';
-import { ColorModeContext } from '@percona/percona-ui';
+import { ColorModeContext } from '@percona/peak-ui';
 
 function normalizeMode(v: unknown): ColorMode {
   if (typeof v === 'string' && v.toLowerCase() === 'dark') return 'dark';

@@ -11,7 +11,7 @@ import { useAlertmanagerAlerts } from 'hooks/api/useAlertmanagerAlerts';
 import { useAlertmanagerSilences } from 'hooks/api/useAlertmanagerSilences';
 import { buildSilenceMap, flattenAlertRules } from './AlertsPage.utils';
 import { AlertStatusTable } from './table';
-import { useDetailsPaneNavigation } from '@percona/percona-ui';
+import { useDetailsPaneNavigation } from '@percona/peak-ui';
 import { AlertRow, AlertsTableRow } from './AlertsPage.types';
 import { AlertDetailsPane } from './details-pane';
 import { Messages } from './AlertsPage.messages';

@@ -14,7 +14,7 @@ import { useEscapeKey } from 'utils/keys.utils';
 import { AlertsTableRow } from '../AlertsPage.types';
 import AlertDetailsTab from './details/AlertDetailsTab';
 import { Messages } from './AlertDetailsPane.messages';
-import { UseDetailsPaneNavigationResult } from '@percona/percona-ui';
+import { UseDetailsPaneNavigationResult } from '@percona/peak-ui';
 import RawDataTab from './raw-data/RawDataTab';
 import { useAlertDetailsPane } from './AlertDetailsPane.utils';
 

@@ -3,7 +3,7 @@ import { Grid, Stack, Typography } from '@mui/material';
 import { Messages } from './AlertDetailsTab.messages';
 import DataPoint from 'components/details-pane/DataPoint';
 import ValueThreshold from './value-threshold/ValueThreshold';
-import { Chip, CodeBlock } from '@percona/percona-ui';
+import { Chip, CodeBlock } from '@percona/peak-ui';
 import { STATUS_COLOR_MAP, STATUS_LABEL_MAP } from '../../AlertsPage.constants';
 import { formatTriggeredAt } from '../../table/AlertStatusTable.utils';
 import NotificationsOffOutlinedIcon from '@mui/icons-material/NotificationsOffOutlined';

@@ -9,7 +9,7 @@ import Typography from '@mui/material/Typography';
 import { Messages } from './RawDataTab.messages';
 import TableBody from '@mui/material/TableBody';
 import { AlertDetailsPane } from '../AlertDetailsPane.types';
-import { CodeBlock } from '@percona/percona-ui';
+import { CodeBlock } from '@percona/peak-ui';
 
 interface Props {
   details: AlertDetailsPane;

@@ -1,4 +1,4 @@
-import { Chip, MRT_ColumnDef } from '@percona/percona-ui';
+import { Chip, MRT_ColumnDef } from '@percona/peak-ui';
 import { AlertsTableRow } from '../AlertsPage.types';
 import type { AlertSeverity as Severity } from 'types/alerting.types';
 import { Stack, Typography } from '@mui/material';

@@ -1,4 +1,4 @@
-import { Table, useNavigableRows } from '@percona/percona-ui';
+import { Table, useNavigableRows } from '@percona/peak-ui';
 import { type MRT_Row } from 'material-react-table';
 import { FC, useMemo, useState } from 'react';
 import { ALERT_STATUS_COLUMNS } from './AlertStatusTable.constants';

@@ -7,7 +7,7 @@ import NorthEast from '@mui/icons-material/NorthEast';
 import SaveAlt from '@mui/icons-material/SaveAlt';
 import MapOutlined from '@mui/icons-material/MapOutlined';
 import { FC, ReactNode, useCallback } from 'react';
-import { semanticTokensLight, semanticTokensDark } from '@percona/percona-ui';
+import { semanticTokensLight, semanticTokensDark } from '@percona/peak-ui';
 import { CARD_IDS, START_ICON } from '../HelpCenter.constants';
 import { HelpCenterCardProps } from './HelpCenterCard.types';
 import { Link } from 'react-router-dom';

@@ -1,4 +1,4 @@
-import type { SemanticTokens } from '@percona/percona-ui';
+import type { SemanticTokens } from '@percona/peak-ui';
 
 export type HelpCardChartKey = keyof SemanticTokens['charts'];
 

@@ -5,7 +5,7 @@ import {
   Link as RouterLink,
   useSearchParams,
 } from 'react-router-dom';
-import { useDetailsPaneNavigation } from '@percona/percona-ui';
+import { useDetailsPaneNavigation } from '@percona/peak-ui';
 import { RealtimePage } from '../components/rta-page';
 import { useRealtimeQueries, useRealtimeSessions } from 'hooks/api/useRealtime';
 import OverviewTable from './table/OverviewTable';

@@ -15,7 +15,7 @@ import { QueryData } from 'types/rta.types';
 import { useEscapeKey } from 'utils/keys.utils';
 import { Messages } from './DetailsPane.messages';
 import QueryAndDetails from './QueryAndDetails';
-import { CodeBlock } from '@percona/percona-ui';
+import { CodeBlock } from '@percona/peak-ui';
 
 interface Props {
   query?: QueryData;

@@ -2,7 +2,7 @@ import Grid from '@mui/material/Grid';
 import { FC } from 'react';
 import { format, formatDuration } from 'date-fns';
 import { tz } from '@date-fns/tz';
-import { CodeBlock } from '@percona/percona-ui';
+import { CodeBlock } from '@percona/peak-ui';
 import { QueryData } from 'types/rta.types';
 import DetailsMetric from 'components/details-pane/DataPoint';
 import BigNumberMetric from './BigNumberMetric';

@@ -2,7 +2,7 @@ import {
   type MRT_Row,
   type MaterialReactTableProps,
 } from 'material-react-table';
-import { Table, useNavigableRows } from '@percona/percona-ui';
+import { Table, useNavigableRows } from '@percona/peak-ui';
 import type { FC } from 'react';
 import type { QueryData } from 'types/rta.types';
 import { OVERVIEW_TABLE_COLUMNS } from './OverviewTable.constants';

@@ -1,5 +1,5 @@
 import Box from '@mui/material/Box';
-import { CodeBlock } from '@percona/percona-ui';
+import { CodeBlock } from '@percona/peak-ui';
 import { FC } from 'react';
 
 export interface Props {

@@ -4,7 +4,7 @@ import { FC, useMemo, useState } from 'react';
 import { Messages } from './SessionsTable.messages';
 import StopCircleOutlinedIcon from '@mui/icons-material/StopCircleOutlined';
 import AddOutlinedIcon from '@mui/icons-material/AddOutlined';
-import { Table } from '@percona/percona-ui';
+import { Table } from '@percona/peak-ui';
 import { boxClasses, Skeleton, Typography } from '@mui/material';
 import { SESSIONS_TABLE_COLUMNS } from './SessionsTable.constants';
 import { useRealtimeSessions, useStopSessions } from 'hooks/api/useRealtime';

@@ -1,6 +1,6 @@
 import DialogContent from '@mui/material/DialogContent';
 import Typography from '@mui/material/Typography';
-import { Dialog, DialogTitle } from '@percona/percona-ui';
+import { Dialog, DialogTitle } from '@percona/peak-ui';
 import { FC } from 'react';
 import { Messages } from './NewSessionModal.messages';
 import { Messages as RtaMessages } from '../../../messages';

@@ -1,7 +1,7 @@
 import Button from '@mui/material/Button';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
-import { Dialog, DialogTitle } from '@percona/percona-ui';
+import { Dialog, DialogTitle } from '@percona/peak-ui';
 import { FC, useState } from 'react';
 import { Messages } from './StopMultipleSessionsModal.messages';
 

@@ -1,7 +1,7 @@
 import Button from '@mui/material/Button';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
-import { Dialog, DialogTitle } from '@percona/percona-ui';
+import { Dialog, DialogTitle } from '@percona/peak-ui';
 import { Messages } from './StopSessionModal.messages';
 import { FC, useState } from 'react';
 

@@ -12,7 +12,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import WarningIcon from '@mui/icons-material/Warning';
-import { TextInput, SwitchInput } from '@percona/percona-ui';
+import { TextInput, SwitchInput } from '@percona/peak-ui';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { FC, useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';

@@ -1,6 +1,6 @@
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
-import { TextInput, RadioGroup } from '@percona/percona-ui';
+import { TextInput, RadioGroup } from '@percona/peak-ui';
 import { FC, useEffect, useMemo } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { FormProvider, useForm } from 'react-hook-form';

@@ -1,5 +1,5 @@
 import Stack from '@mui/material/Stack';
-import { TextInput } from '@percona/percona-ui';
+import { TextInput } from '@percona/peak-ui';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { FC, useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';

@@ -24,7 +24,7 @@ import { PMM_DOCS_UPDATE_CLIENT_URL } from 'lib/constants';
 import { Messages } from './UpdateClients.messages';
 import { TextSelect } from 'components/text-select';
 import { FILTER_OPTIONS } from './UpdateClients.constants';
-import { Table } from '@percona/percona-ui';
+import { Table } from '@percona/peak-ui';
 import { type MRT_ColumnDef } from 'material-react-table';
 import { HomeLink } from 'components/home-link';
 

@@ -1,4 +1,4 @@
-import { CodeBlock as PerconaCodeBlock } from '@percona/percona-ui';
+import { CodeBlock as PerconaCodeBlock } from '@percona/peak-ui';
 import { FC, PropsWithChildren } from 'react';
 
 type Props = PropsWithChildren<{

@@ -2,7 +2,7 @@ import { AuthContext, AuthContextProps } from 'contexts/auth';
 import { UserContext, UserContextProps } from 'contexts/user';
 import { FC, PropsWithChildren } from 'react';
 import { MemoryRouter, MemoryRouterProps } from 'react-router-dom';
-import { pmmThemeOptions, ThemeContextProvider } from '@percona/percona-ui';
+import { pmmThemeOptions, ThemeContextProvider } from '@percona/peak-ui';
 import { TEST_USER_ADMIN } from './testStubs';
 
 interface TestWrapperProps extends PropsWithChildren {

@@ -33,8 +33,8 @@ export default defineConfig({
     ],
   },
   optimizeDeps: {
-    // Uncomment when using yarn link for @percona/percona-ui locally
-    // exclude: ['@percona/percona-ui'],
+    // Uncomment when using yarn link for @percona/peak-ui locally
+    // exclude: ['@percona/peak-ui'],
     force: true,
   },
   server: {
@@ -43,7 +43,7 @@ export default defineConfig({
       : undefined,
     watch: {
       // Watch the linked package for changes (negated pattern means "don't ignore")
-      ignored: ['!**/node_modules/@percona/percona-ui/**'],
+      ignored: ['!**/node_modules/@percona/peak-ui/**'],
     },
     proxy: {
       '/v1': {

@@ -54,7 +54,7 @@ export default defineConfig({
     server: {
       deps: {
         fallbackCJS: true,
-        inline: ['@percona/percona-ui'],
+        inline: ['@percona/peak-ui'],
       },
     },
   },