> For the complete documentation index, see [llms.txt](https://docs.fostermarketplace.app/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fostermarketplace.app/docs/product-design-library/product-design-library.md).

# Product Design Library

## Installing

Our design system is written in React, and can be installed into your project via NPM or Yarn.

{% tabs %}
{% tab title="npm" %}
`npm install --save @my-product/my-design-system`
{% endtab %}

{% tab title="yarn" %}
`yarn add -S my-design-system`
{% endtab %}
{% endtabs %}

## Usage

Import the components you need:

`import {Button, ActionBar} from @my-product/my-design-system`

Then use them in your app or components:

```javascript
const header = () => (
    <div>
        <ActionBar>
            <Button kind="primary" label="Save" />
            <Button kind="secondary" label="Cancel" />
        </ActionBar>
    </div>
)
```