open-index/open-npm huggingface dataset:
npm package: @pitam/floating-chatbot
Description: easy to integrate chatbot
Latest version: 0.2.7

# react-component-module-frame
## What is this project about?
#### This template was built to make publishing react-components easy. All the basic settings such as tsconfig.json and package.json are done. It is up to you to modify the setting for your own taste.

-----------------------------------------------------------------------------------------------------------------------

#### To download this project  
```
git clone https://github.com/tofusoup429/react-component-module-frame.git
```
-----------------------------------------------------------------------------------------------------------------------
npm package: @pitangoo/models-lib
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.9.
Author: Moventes SAS
Latest version: 2.1.4

# ModelsLib

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.9.

## Code scaffolding

Run `ng generate component component-name --project models-lib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project models-lib`.

> Note: Don't forget to add `--project models-lib` or else it will be added to the default project in your `angular.json` file.

## Build

Run `ng build models-lib` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build models-lib`, go to the dist folder `cd dist/models-lib` and run `npm publish`.

## Running unit tests

Run `ng test models-lib` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
npm package: @pitaya-components/accordion
Description: Pitaya-Framework Component Accordion.
Author: Pitaya Solutions
Latest version: 0.0.13

<h1 align="center">Accordion Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-accordion.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/accordion?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/accordion"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/accordion"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/accordion"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/accordion"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/accordion"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Accordions display a list of high-level options that can expand/contract to reveal more detailed information.

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-accordion.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/accordion?component=only)
npm package: @pitaya-components/card
Description: Pitaya-Framework Card Component.
Author: Pitaya Solutions
Latest version: 0.0.8

<h1 align="center">Card Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-card.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/card?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/card"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/card"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/card"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/card"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/card"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Cards contain content and actions about a single subject.<br>
[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-card.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/card?component=only)
npm package: @pitaya-components/checkbox
Description: Pitaya-Framework Component Checkbox.
Author: Pitaya Solutions
Latest version: 0.0.21

<h1 align="center">Checkbox Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-checkbox.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/checkbox?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/checkbox"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/checkbox"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/checkbox"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/checkbox"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/checkbox"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Checkboxes allow the user to select one or more items from a set.

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-checkbox.png "Screenshot")

## [Demo](https://demo.pitaya-framework.com/#/checkbox?component=only)
npm package: @pitaya-components/chips
Description: Pitaya-Framework Component Chips.
Author: Pitaya Solutions
Latest version: 0.0.8

<h1 align="center">Chips Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-chips.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/chips?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/chips"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/chips"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/chips"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/chips"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/chips"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.
[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-chips.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/chips?component=only)
npm package: @pitaya-components/drawer
Description: Pitaya Drawer Component.
Author: Pitaya Solutions
Latest version: 0.0.10

<h1 align="center">Drawer Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-drawer.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/drawer?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/drawer"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/drawer"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/drawer"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/drawer"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/drawer"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
The navigation drawer slides in from the left and contains the navigation destinations for your app.

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-drawer.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/drawer?component=only)
npm package: @pitaya-components/elevation
Description: Pitaya-Framework Component Elevation.
Author: Pitaya Solutions
Latest version: 0.0.4

<h1 align="center">Elevation Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-elevation.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/elevation?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/elevation"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/elevation"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/elevation"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/elevation"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/elevation"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Shadows provide important visual cues about objects’ depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object’s elevation determines the appearance of its shadow.

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-elevation.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/elevation?component=only)
npm package: @pitaya-components/form-field
Description: Pitaya-Framework Form Field.
Author: Pitaya Solutions
Latest version: 0.0.11

<h1 align="center">Form-Field Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-form-field.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/form-field?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/form-field"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/form-field"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/form-field"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/form-field"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/form-field"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Form-field element used to wrap any combination of adjacent input and label elements of Web form controls, such as Checkbox or Radio.

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-form-field.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/form-field?component=only)
npm package: @pitaya-components/grid
Description: Pitaya-Framework Component Grid.
Author: Pitaya Solutions
Latest version: 0.0.13

<h1 align="center">Grid Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-grid.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/grid?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/grid"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/grid"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/grid"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/grid"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/grid"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Responsive UI is based on a column-variate grid layout. It has 12 columns on desktop, 8 columns on tablet and 4 columns on phone.

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-grid.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/grid?component=only)
npm package: @pitaya-components/icon-button
Description: Pitaya-Framework Component Icon Button.
Author: Pitaya Solutions
Latest version: 0.0.10

<h1 align="center">Icon Button Component</h1>
<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-icon-button.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/icon-button?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/icon-button"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/icon-button"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/icon-button"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/icon-button"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/icon-button"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Icons are appropriate for buttons that allow a user to take actions or make a selection, such as adding or removing a star to an item.
[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-icon-button.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/icon-button?component=only)
npm package: @pitaya-components/image-list
Description: Pitaya-Framework Component Image-List.
Author: Pitaya Solutions
Latest version: 0.0.6

<h1 align="center">Image List Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-image-list.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/image-list?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/image-list"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/image-list"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/image-list"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/image-list"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/image-list"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Image lists display a collection of images in an organized grid. List consists of several items, each containing an image and optionally supporting content (i.e. a text label).

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-image-list.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/image-list?component=only)
npm package: @pitaya-components/image-placeholder
Description: Pitaya-Framework Image Placeholder.
Author: Pitaya Solutions
Latest version: 0.0.6

<h1 align="center">Image Placeholder Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-image-placeholder.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/image-placeholder?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/image-placeholder"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/image-placeholder"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/image-placeholder"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/image-placeholder"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/image-placeholder"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Image Placeholder generate data URIs for placeholder img elements.

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-image-placeholder.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/image-placeholder?component=only)
npm package: @pitaya-components/list
Description: Pitaya-Framework Component List.
Author: Pitaya Solutions
Latest version: 0.0.23

<h1 align="center">List Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-list.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/list?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/list"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/list"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/list"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/list"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/list"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Lists are continuous, vertical indexes of text or images.

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-list.png "Screenshot")

## [Demo](https://demo.pitaya-framework.com/#/list?component=only)
npm package: @pitaya-components/menu
Description: Pitaya-Framework Component Menu.
Author: Pitaya Solutions
Latest version: 0.0.8

<h1 align="center">Menu Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-menu.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/menu?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/menu"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/menu"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/menu"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/menu"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/menu"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
A menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-menu.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/menu?component=only)
npm package: @pitaya-components/progress-tracker
Description: Pitaya-Framework Component Progress Tracker.
Author: Pitaya Solutions
Latest version: 0.0.5

<h1 align="center">Progress Tracker Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-progress-tracker.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/progress-tracker?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/progress-tracker"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/progress-tracker"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/progress-tracker"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/progress-tracker"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/progress-tracker"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Progress tracker illustrate the steps in a multi step process e.g. a multi step form, a timeline or a quiz.

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-progress-tracker.png "Screenshot")

## [Demo](https://demo.pitaya-framework.com/#/progress-tracker?component=only)
npm package: @pitaya-components/radio
Description: Pitaya-Framework Component Radio.
Author: Pitaya Solutions
Latest version: 0.0.9

<h1 align="center">Radio Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-radio.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/radio?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/radio"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/radio"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/radio"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/radio"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/radio"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Radio buttons allow the user to select one option from a set while seeing all available options.

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-radio.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/radio?component=only)
npm package: @pitaya-components/range-slider
Description: Pitaya-Framework Component Range-Slider.
Author: Pitaya Solutions
Latest version: 0.0.3

<h1 align="center">Range Slider Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-range-slider.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/range-slider?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/range-slider"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/range-slider"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/range-slider"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/range-slider"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/range-slider"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Sliders let users select from a range of values by moving the slider thumb.
[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-range-slider.png "Screenshot")

## [Demo](https://demo.pitaya-framework.com/#/range-slider?component=only)
npm package: @pitaya-components/ripple
Description: Pitaya-Framework Component Ripple.
Author: Pitaya Solutions
Latest version: 0.0.7

<h1 align="center">Ripple Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-ripple.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/ripple?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/ripple"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/ripple"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/ripple"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/ripple"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/ripple"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Ripples are visual representations used to communicate the status of a component or interactive element.

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-ripple.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/ripple?component=only)
npm package: @pitaya-components/slider
Description: Pitaya-Framework Slider Component.
Author: Pitaya Solutions
Latest version: 0.0.9

<h1 align="center">slider Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-slider.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/slider?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/slider"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/slider"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/slider"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/slider"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/slider"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Slider is used for a slide-show and usually load images and the content in the slides.

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-slider.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/slider?component=only)
npm package: @pitaya-components/snackbar
Description: Pitaya-Framework Snackbar Component.
Author: Pitaya Solutions
Latest version: 0.0.8

<h1 align="center">Snackbar Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-snackbar.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/snackbar?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/snackbar"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/snackbar"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/snackbar"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/snackbar"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/snackbar"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Snackbars provide brief messages about app processes at the bottom of the screen.

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-snackbar.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/snackbar?component=only)
npm package: @pitaya-components/switch
Description: Pitaya-Framework Component Switch.
Author: Pitaya Solutions
Latest version: 0.0.13

<h1 align="center">Switch Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-switch.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/switch?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/switch"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/switch"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/switch"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/switch"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/switch"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Switches toggle the state of a single setting on or off. Switches communicate an action a user can take. They are typically placed throughout your UI, in places like dialogs, forms, cards, and toolbars.

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-switch.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/switch?component=only)
npm package: @pitaya-components/tab-bar
Description: Pitaya-Framework Component Tab-Bar.
Author: Pitaya Solutions
Latest version: 0.0.10

<h1 align="center">Tab-bar Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-tabbar.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/tab-bar?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/tab-bar"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/tab-bar"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/tab-bar"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/tab-bar"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/tab-bar"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. The Tab Bar contains the Tab Scroller and Tab components.

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-tabbar.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/tabs?component=only)
npm package: @pitaya-components/text-field
Description: Pitaya-Framework Text-field Component.
Author: Pitaya Solutions
Latest version: 0.0.15

<h1 align="center">Text-field Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-textfield.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/textfield?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/textfield"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/textfield"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/textfield"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/textfield"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/textfield"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Text fields allow users to input, edit, and select text.

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-textfield.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/textfield?component=only)
npm package: @pitaya-components/textfield
Description: Pitaya-Framework Textfield Component.
Author: Pitaya Solutions
Latest version: 0.0.9
Deprecated: Package no longer supported. Please use @pitaya-components/text-field instead

<h1 align="center">Textfield Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-textfield.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/textfield?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/textfield"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/textfield"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/textfield"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/textfield"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/textfield"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Text fields allow users to input, edit, and select text.

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-textfield.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/textfield?component=only)
npm package: @pitaya-components/topbar
Description: Pitaya-Framework Component Topbar.
Author: Pitaya Solutions
Latest version: 0.0.41

<h2>Package no longer supported. <br>Please use [@pitaya-components/top-bar](https://github.com/pitaya-components/top-bar) instead</h2>
<br><br>
<h1 align="center">Topbar Component</h1>
<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-topbar.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/topbar?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/topbar"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/topbar"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/topbar"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/topbar"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/topbar"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Topbars are a container for items such as application title, navigation icon, and action items.

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-topbar.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/topbar?component=only)
npm package: @pitaya-components/typography
Description: Pitaya-Framework Component Typography.
Author: Pitaya Solutions
Latest version: 0.0.6

<h1 align="center">Typography Component</h1>

<p align="center"><img height="250" src="https://demo.pitaya-framework.com/media/readme/logo-typography.svg"></p>

<p align="center">
<a href="https://npmcharts.com/compare/@pitaya-components/typography?minimal=true"><img alt="npm" src="https://img.shields.io/npm/dw/@pitaya-components/typography"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/typography"><img alt="npm" src="https://img.shields.io/npm/v/@pitaya-components/typography"></a>
<a href="https://www.npmjs.com/package/@pitaya-components/typography"><img alt="NPM" src="https://img.shields.io/npm/l/@pitaya-components/typography"></a>
</p>
<!-- https://shields.io -->

## Description <a name="description"></a>
Typography is a module that applies text sizes and styles to our components, developed to balance content density and reading comfort under typical usage conditions.

[Pitaya-framework](https://github.com/pitaya-foundation/pitaya-framework) template component.

_This documentation assumes you are at least slightly familiar with [aurelia](https://aurelia.io/) and its usage. If not, we highly suggest you take a look at its [Quick Start](https://aurelia.io/docs/tutorials/creating-a-todo-app) section first to get a better understanding of the approaches that are presented it here._

## Screenshot
![Screenshot](https://demo.pitaya-framework.com/media/readme/screenshot-typography.png "Screenshot")


## [Demo](https://demo.pitaya-framework.com/#/typography?component=only)