# @kata-kit/dashboard

> Dashboard component for Wicara.

Latest version **0.7.5** (published 2019-08-21) · Apache-2.0 license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @kata-kit/dashboard
pnpm add @kata-kit/dashboard
yarn add @kata-kit/dashboard
bun add @kata-kit/dashboard
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.7.5 |
| Published | 2019-08-21 |
| First published | 2018-10-02 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 107.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 192 |
| Author | Kata.ai |
| Maintainers | computecoholic, resir014, ybdev |

## Links

- npm: https://www.npmjs.com/package/@kata-kit/dashboard
- Repository: https://github.com/kata-ai/wicara
- Homepage: https://github.com/kata-ai/wicara#readme
- Issues: https://github.com/kata-ai/wicara/issues
- npm.io page: https://npm.io/package/@kata-kit/dashboard

## Dependencies (4)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@kata-kit/theme](https://npm.io/package/@kata-kit/theme.md) ^0.7.2
- [@kata-kit/layout](https://npm.io/package/@kata-kit/layout.md) ^0.7.5
- [@kata-kit/tooltip](https://npm.io/package/@kata-kit/tooltip.md) ^0.7.2

## Recent versions

- 0.7.5 (latest) — 2019-08-21
- 0.7.5-canary.1 (next) — 2019-08-20
- 0.7.5-canary.0 — 2019-08-19
- 0.7.4 — 2019-07-22
- 0.7.3 — 2019-07-05
- 0.7.2 — 2019-07-02
- 0.7.1 — 2019-05-21
- 0.7.1-canary.1 — 2019-05-10
- 0.7.1-canary.0 — 2019-04-19
- 0.7.0 — 2019-02-15
- 0.7.0-beta.10 — 2019-02-08
- 0.7.0-beta.9 — 2019-02-01
- 0.7.0-beta.8 — 2019-01-31
- 0.7.0-beta.7 — 2019-01-30
- 0.7.0-beta.6 — 2019-01-30
- … 13 more at https://npm.io/package/@kata-kit/dashboard/versions

## README

# @kata-kit/dashboard

> Dashboard component for Wicara.

## Install

```sh
# yarn
yarn add @kata-kit/dashboard
# npm
npm install @kata-kit/dashboard
```

## Usage

To use this component within your React app, import as follows:

```jsx
import { Dashboard } from '@kata-kit/dashboard';

const Component = () => (
  <Dashboard
    isStarter
    title="Wicara Demo"
    headerContent={
      <p>
        This project is intended to test the look and feel of the kata-kit
        component, as well as a development environment.
      </p>
    }
  >
    ...
  </Dashboard>
);
```

### Dashboard Cards

You can also render cards on a fluid grid inside a dashboard.

```jsx
import { Dashboard } from '@kata-kit/dashboard';
import { Card } from '@kata-kit/card';

const Component = () => (
  <DashboardCards>
    <Card asButton>
      <CardButton label={'Create'} icon="add" />
    </Card>
    <Card
      title="Second Card"
      avatarComponent={
        <Avatar src="https://picsum.photos/350/150/?image=821" />
      }
      action={
        <Button color="secondary" isIcon>
          <i className="icon-more" />
        </Button>
      }
    >
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book.
    </Card>
    <Card title="Third Card">
      It has survived not only five centuries, but also the leap into electronic
      typesetting, remaining essentially unchanged.
    </Card>
  </DashboardCards>
);
```

---
_Source: https://npm.io/package/@kata-kit/dashboard · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._