@deskpro/deskpro-ui

Deskpro UI component library

Documentation

• Storybook
• Typedoc

Usage

Supports React 18 and 19 (react / react-dom ^18 || ^19) and styled-components 5 and 6 (^5 || ^6). TypeScript consumers need TypeScript 4.7 or later.

# Add deskpro-ui and peer deps
pnpm add @deskpro/deskpro-ui react react-dom styled-components

# Add types
pnpm add -D @typescript/lib-dom@npm:@types/web
# styled-components 5 only (v6 ships its own types)
pnpm add -D @types/styled-components

// Optional CSS - depending which components are used from dp-ui and whether you have your own reset css
// Either download and save to an assets dir or install modern-normalize and simplebar-react as direct dependencies and reference directly from node modules
import "modern-normalize/modern-normalize.css";
import "simplebar-react/dist/simplebar.min.css";

// Required CSS
import "@deskpro/deskpro-ui/dist/deskpro-ui.css";
import "@deskpro/deskpro-ui/dist/deskpro-custom-icons.css";

import React from "react";

import { Stack, Button, lightTheme } from "@deskpro/deskpro-ui";
import { ThemeProvider } from "styled-components";

export function App() {
  return (
    <ThemeProvider theme={lightTheme}>
      <Stack>
        <Button text="hi" />
      </Stack>
    </ThemeProvider>
  );
}

To type theme in your own styled components, augment styled-components' DefaultTheme:

import type { DeskproTheme } from "@deskpro/deskpro-ui";

declare module "styled-components" {
  export interface DefaultTheme extends DeskproTheme {}
}

Styling props are transient ($)

Props that only style a component and aren't HTML attributes are $-prefixed transient props, e.g. <Stack $gap={4} $vertical $align="center"> and <TSpan type="p_p1" $themeColor="grey100">. styled-components never writes $ props to the DOM, so deskpro-ui needs no StyleSheetManager or other setup on styled-components 5 or 6.