npm package: @jchn/preact-spectre
Description: Preact components using spectre.css
Author: John van de Water
Latest version: 0.0.1

# Preact Spectre

Preact components using [spectre.css](https://picturepan2.github.io/spectre/)

## Getting started

- [Get spectre.css](https://picturepan2.github.io/spectre/getting-started/installation.html)
- Install preact-spectre

**npm**

```
npm install @jchn/preact-spectre
```

**yarn**

```
yarn add @jchn/preact-spectre
```

## Components

View all components in [storybook](https://spectre-preact.netlify.com).

<table>
  <thead>
    <tr>
      <th>component</th>
      <th>import</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Accordion</td>
      <td><code>import { Accordion } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Avatar</td>
      <td><code>import { Avatar } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Bar</td>
      <td><code>import { Bar } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Breadcrumb</td>
      <td><code>import { Breadcrumb } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Button</td>
      <td><code>import { Button } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>ButtonGroup</td>
      <td><code>import { ButtonGroup } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Card</td>
      <td><code>import { Card } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Chip</td>
      <td><code>import { Chip } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Code</td>
      <td><code>import { Code } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Empty</td>
      <td><code>import { Empty } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Figure</td>
      <td><code>import { Figure } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Form</td>
      <td><code>import { Form } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Grid</td>
      <td><code>import { Grid } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Hero</td>
      <td><code>import { Hero } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Img</td>
      <td><code>import { Img } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Label</td>
      <td><code>import { Label } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Menu</td>
      <td><code>import { Menu } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Modal</td>
      <td><code>import { Modal } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Nav</td>
      <td><code>import { Nav } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Navbar</td>
      <td><code>import { Navbar } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Pagination</td>
      <td><code>import { Pagination } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Panel</td>
      <td><code>import { Panel } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Popover</td>
      <td><code>import { Popover } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Steps</td>
      <td><code>import { Steps } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Table</td>
      <td><code>import { Table } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Tabs</td>
      <td><code>import { Tabs } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Tile</td>
      <td><code>import { Tile } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Toast</td>
      <td><code>import { Toast } from '@jchn/preact-spectre'</code></td>
    </tr>
    <tr>
      <td>Video</td>
      <td><code>import { Video } from '@jchn/preact-spectre'</code></td>
    </tr>
  </tbody>
</table>