When building apps you should use Deskpro's UI. We've exposed a set of UI components from the Deskpro UI library as a part of our Apps SDK. We also provide a Storybook of our app UI components for you to reference.

We advise you to use our app skeleton template as it includes the SDK, setup and configuration so you can start using the UI library and associated theme immediately.

UI Components

We provide a wide array of React components via the Deskpro UI library (imported by the Apps SDK). You can view the pallette of UI components via our Storybook and ready the type information and technical notes in Typedoc

Basic Example

Navigate to the src/pages/Main.tsx file and open in your favourite IDE or code editor.

import { Button } from "@deskpro/app-sdk";

export const Main = () => {
    return (
        <>
            <Button text="My App" />
        </>
    );
};
 copy

In this page we're using one of the Deskpro UI components, imported from the apps SDK.

Deskpro Theme

When building your app UI it may be necessary to include colors from the Deskpro theme. To do this we've provided a hook to return the theme object. From the theme object you can access things like the color palette.

Building on the previous example, let's give the button a colour from the Deskpro theme.

import { Button, useDeskproAppTheme } from "@deskpro/app-sdk";

export const Main = () => {

    const { theme } = useDeskproAppTheme();

    return (
        <>
            <Button text="My App" color={theme.colors.cyan100} />
        </>
    );
};
 copy