# `@deskpro/deskpro-ui`

Deskpro UI component library

## Documentation

<ul>
  <li><a href="https://deskpro.github.io/deskpro-ui/storybook/?path=/story/component-gallery-1--component-gallery-1">Storybook</a></li>
  <li><a href="https://deskpro.github.io/deskpro-ui/typedoc">Typedoc</a></li>
</ul>

## Usage

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

# Add types
pnpm add -D @typescript/lib-dom@npm:@types/web @types/styled-components
```

```tsx
// 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, tippy and simplebar as direct dependencies and reference directly from node modules
import "modern-normalize/modern-normalize.css";
import "tippy.js/dist/tippy.css";
import "tippy.js/dist/border.css";
import "simplebar/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>
  );
}
```