open-index/open-npm huggingface dataset:
npm package: @kamiapp/changelog
Description: This component allow you to display your releases directly into your app.  Currently this component only provide support for [github](https://docs.github.com/en/repositories/releasing-projects-on-github/managing-releases-in-a-repository)  and [gitlab](htt
Latest version: 0.8.0

# `<kami-changelog>`

This component allow you to display your releases directly into your app. 
Currently this component only provide support for [github](https://docs.github.com/en/repositories/releasing-projects-on-github/managing-releases-in-a-repository) 
and [gitlab](https://docs.gitlab.com/ee/user/project/releases/) releases. 
If you want use an another provider you can make a PR to add it.

## Usage

Install the component using ``npm`` or ``yarn`` or ``pnpm`` :

```console
$ npm install --save @kamiapp/changelog
```

Import the component into your **main** js/ts file :

```js
import '@kamiapp/changelog';
```
And use the component directly into your html :

```html
<kami-changelog
  src="https://api.github.com/repos/Kamiapp-fr/kami-collection/releases"
  header="🚀 Releases"
  provider="github"
></kami-changelog>
```
## Documentation

To get more informations about this component you can go to the [kami-changelog](https://www.collection.kamiapp.fr/docs/changelog.html) section into the kami collection site web. See the documentation at [collection.kamiapp.fr](https://www.collection.kamiapp.fr/) to get more information about how to use each components. You will also find a playground section to test all components.
npm package: @kamiapp/collection
Description: This packages containe and declare all [Kami](https://www.kamiapp.fr/en) components.
Latest version: 0.8.0

# `<kami-collection>`

This packages containe and declare all [Kami](https://www.kamiapp.fr/en) components.

## Install 

```
$ npm install --save @kamiapp/collection
```

## Usage

You can just import the package into your main js file :

```ts
import '@kamiapp/collection';
```

> This declare all kami components using theirs default ``tag``. 

Or you can import each component and redefine it with your ``tag``.

```ts
// ES6 Modules or TypeScript
import { KamiFlash, KamiInfiniteList } from '@kamiapp/collection'

// register the component with the name you want
window.customElements.define('flash-element', KamiFlash);

// Or register the component with the default tag
window.customElements.define(KamiInfiniteList.tag, KamiInfiniteList);
```

You can get more informations about each components into the ``packages/<component-name>`` directory.
npm package: @kamiapp/flash
Description: A simple alert component for your notifications.
Latest version: 0.8.0

# `<kami-flash>`

A simple alert component for your notifications.

## Usage

Install the component using ``npm`` or ``yarn`` or ``pnpm`` :

```console
$ npm install --save @kamiapp/flash
```

Import the component into your **main** js/ts file :

```js
import '@kamiapp/flash';
```
And use the component directly into your html :

```html
<kami-flash></kami-flash>
```
## Documentation

To get more informations about this component you can go to the [kami-flash](https://www.collection.kamiapp.fr/docs/flash.html) section into the kami collection site web. See the documentation at [collection.kamiapp.fr](https://www.collection.kamiapp.fr/) to get more information about how to use each components. You will also find a playground section to test all components.
npm package: @kamiapp/infinite-list
Description: Infinite list based on web component. This component allow you to create easly an infinite list. To use it you must have an API endpoint which support pagination (for example the [wordpress](https://developer.wordpress.org/rest-api/using-the-rest-api/pagi
Latest version: 0.8.0

# `<kami-infinite-list>`

Infinite list based on web component. This component allow you to create easly an infinite list.
To use it you must have an API endpoint which support pagination (for example the [wordpress](https://developer.wordpress.org/rest-api/using-the-rest-api/pagination/) pagination).
This component have also a ``fitler`` and ``sort`` feature which allow to manage data easly. 

## Usage

Install the component using ``npm`` or ``yarn`` or ``pnpm`` :

```console
$ npm install --save @kamiapp/infinite-list
```

Import the component into your **main** js/ts file :

```js
import '@kamiapp/infinite-list';
```
And use the component directly into your html :

```html
<kami-infinite-list></kami-infinite-list>
```
## Documentation

To get more informations about this component you can go to the [kami-infinite-list](https://www.collection.kamiapp.fr/docs/infinite-list.html) section into the kami collection site web. See the documentation at [collection.kamiapp.fr](https://www.collection.kamiapp.fr/) to get more information about how to use each components. You will also find a playground section to test all components.
npm package: @kamiapp/markdown
Description: Convert markdown in html using [markdown-it](https://github.com/markdown-it/markdown-it).  This component is inspirated by this two components [wc-markdown](https://github.com/vanillawc/wc-markdown) and [zero-md](https://github.com/zerodevx/zero-md). Like
Latest version: 0.8.0

# `<kami-markdown>`

Convert markdown in html using [markdown-it](https://github.com/markdown-it/markdown-it). 
This component is inspirated by this two components [wc-markdown](https://github.com/vanillawc/wc-markdown) and [zero-md](https://github.com/zerodevx/zero-md).
Like all other elements of this collection `kami-markdown` support light and dark theme.

## Usage

Install the component using ``npm`` or ``yarn`` or ``pnpm`` :

```console
$ npm install --save @kamiapp/markdown
```

Import the component into your **main** js/ts file :

```js
import '@kamiapp/markdown';
```
And use the component directly into your html :

```html
<kami-markdown>
  <script type="text/markdown">
    # H1
    ## H2
    ### H3
    #### H4
    ##### H5
  </script>
</kami-markdown>
```
## Documentation

To get more informations about this component you can go to the [kami-markdown](https://www.collection.kamiapp.fr/docs/markdown.html) section into the kami collection site web. See the documentation at [collection.kamiapp.fr](https://www.collection.kamiapp.fr/) to get more information about how to use each components. You will also find a playground section to test all components.
npm package: @kamiapp/media
Description: This component is designed to display and play all types of media files including images, videos, and audio files. It also allow you to display pdf using ``kami-pdf``. To use it, just a ``src`` attribute is needed with your file path.
Latest version: 0.8.0

# `<kami-media>`

This component is designed to display and play all types of media files including images, videos, and audio files. It also allow you to display pdf using ``kami-pdf``. To use it, just a ``src`` attribute is needed with your file path.

## Usage

Install the component using ``npm`` or ``yarn`` or ``pnpm`` :

```console
$ npm install --save @kamiapp/media
```

Import the component into your **main** js/ts file :

```js
import '@kamiapp/media';
```
And use the component directly into your html :

```html
<kami-media src="/img/egypte.jpg"></kami-media>
```
## Documentation

To get more informations about this component you can go to the [kami-media](https://www.collection.kamiapp.fr/docs/media.html) section into the kami collection site web. See the documentation at [collection.kamiapp.fr](https://www.collection.kamiapp.fr/) to get more information about how to use each components. You will also find a playground section to test all components.
npm package: @kamiapp/pdf
Description: A simple viewer that allows users to easily read and view PDF documents directly within their browser.
Latest version: 0.8.0

# `<kami-pdf>`

 A simple viewer that allows users to easily read and view PDF documents directly within their browser.

## Usage

Install the component using ``npm`` or ``yarn`` or ``pnpm`` :

```console
$ npm install --save @kamiapp/pdf
```

Import the component into your **main** js/ts file :

```js
import '@kamiapp/pdf';
```
And use the component directly into your html :

```html
<kami-pdf src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"></kami-pdf>
```
## Documentation

To get more informations about this component you can go to the [kami-pdf](https://www.collection.kamiapp.fr/docs/pdf.html) section into the kami collection site web. See the documentation at [collection.kamiapp.fr](https://www.collection.kamiapp.fr/) to get more information about how to use each components. You will also find a playground section to test all components.
npm package: @kamiapp/progress-bar
Description: A simple horizontal progress bar.
Latest version: 0.8.0

# `<kami-progress-bar>`

A simple horizontal progress bar.

## Usage

Install the component using ``npm`` or ``yarn`` or ``pnpm`` :

```console
$ npm install --save @kamiapp/progress-bar
```

Import the component into your **main** js/ts file :

```js
import '@kamiapp/progress-bar';
```
And use the component directly into your html :

```html
<kami-progress-bar></kami-progress-bar>
```
## Documentation

To get more informations about this component you can go to the [kami-progress-bar](https://www.collection.kamiapp.fr/docs/progress-bar.html) section into the kami collection site web. See the documentation at [collection.kamiapp.fr](https://www.collection.kamiapp.fr/) to get more information about how to use each components. You will also find a playground section to test all components.
npm package: @kamiapp/search-bar
Description: Search bar component to find and sort data.
Latest version: 0.8.0

# `<kami-search-bar>`

Search bar component to find and sort data.

## Usage

Install the component using ``npm`` or ``yarn`` or ``pnpm`` :

```console
$ npm install --save @kamiapp/search-bar
```

Import the component into your **main** js/ts file :

```js
import '@kamiapp/search-bar';
```
And use the component directly into your html :

```html
<kami-search-bar></kami-search-bar>
```
## Documentation

To get more informations about this component you can go to the [kami-search-bar](https://www.collection.kamiapp.fr/docs/search-bar.html) section into the kami collection site web. See the documentation at [collection.kamiapp.fr](https://www.collection.kamiapp.fr/) to get more information about how to use each components. You will also find a playground section to test all components.
npm package: @kamiapp/theme
Description: This component contains the default theme of the collection called `kami-theme`.  It also contains a base class to create your own theme. This base class provide a support for **light** and **dark** mode.
Latest version: 0.8.0

# `<kami-theme>`

This component contains the default theme of the collection called `kami-theme`. 
It also contains a base class to create your own theme. This base class provide a support
for **light** and **dark** mode.

## Usage

Install the component using ``npm`` or ``yarn`` or ``pnpm`` :

```console
$ npm install --save @kamiapp/theme
```


Import the component into your **main** js/ts file :

```js
import '@kamiapp/markdown';
import '@kamiapp/theme';
```
And use the component directly into your html :

```html
<kami-theme mode="dark">
  <kami-markdown>
    <script type="text/markdown">
      # H1
    </script>
  </kami-markdown>
</kami-theme>
```

## Documentation

To get more informations about this component you can go to the [kami-theme](https://www.collection.kamiapp.fr/docs/theme.html) section into the kami collection site web. See the documentation at [collection.kamiapp.fr](https://www.collection.kamiapp.fr/) to get more information about how to use each components. You will also find a playground section to test all components.
npm package: @kamiapp/transition
Description: This component allow to use pre-defini transitions directly into your html without any css declaration.  If you want add more transitions just open a PR with your transition.
Latest version: 0.8.0

# `<kami-transition>`

This component allow to use pre-defini transitions directly into your html without any css declaration. 
If you want add more transitions just open a PR with your transition.


## Usage

Install the component using ``npm`` or ``yarn`` or ``pnpm`` :

```console
$ npm install --save @kamiapp/transition
```


Import the component into your **main** js/ts file :

```js
import '@kamiapp/transition';
```
And use the component directly into your html :

```html
<kami-transition show="false">
  <button>transition</button>
</kami-transition>
```

## Documentation

To get more informations about this component you can go to the [kami-transition](https://www.collection.kamiapp.fr/docs/transition.html) section into the kami collection site web. See the documentation at [collection.kamiapp.fr](https://www.collection.kamiapp.fr/) to get more information about how to use each components. You will also find a playground section to test all components.