open-index/open-npm huggingface dataset:
npm package: @material-docs/react-components-docs-extension
Description: Material Docs framework extension for creating React components API pages.
Author: Andrieiev Danil
Latest version: 0.2.0

<div align="center">
    <img alt="Material Docs logo" src="https://github.com/DanilAndreev/material-docs/blob/master/images/MaterialDocsLogoOverview.png"/>
</div>
<div align="center">
</div>

# Material Docs - React components API extension
### An official extension for the Material Docs documentation framework.
This _extension_ designed to help to create API pages for ___React___ components. It includes __props__ and __styles__ tables and other info blocks. 
## Installation.
With __npm__:  
```
npm install @material-docs/react-components-docs-extension
```
With __yarn__:  
```
yarn add @material-docs/react-components-docs-extension
```
[Read installation guide]()
## Usage
```jsx
<ReactComponentApiPage name={"Docs Api page"}>
    <ReactComponentApiPageSummary>
        <H3>The API documentation of the React component.</H3>
    </ReactComponentApiPageSummary>
    <ReactComponentApiPageImport>
        <Code theme={"darcula"}>
            import Component from "./lib/MyComponent";  
            import {Component} from "./lib";
        </Code>
        <Markdown>
            You can learn more about the difference by [reading this guide](https://...).
        </Markdown>
    </ReactComponentApiPageImport>
    <ReactComponentApiPageProps>
        <Prop name={"children"} type={"node"} def={"null"}>Children of an element</Prop>
        <Prop name={"name"} type={"string"} def={"\"\""}>Your name</Prop>
    </ReactComponentApiPageProps>
    <ReactComponentApiPageStyles>
        <Style name={"root"} global={"Mui-root"}>Styles applied to the root element</Style>
        <Style name={"link"} global={"Mui-link"}>Styles applied to the link element</Style>
    </ReactComponentApiPageStyles>
    <ReactComponentApiPageFooter>
        More information...
    </ReactComponentApiPageFooter>
</ReactComponentApiPage>
```
[Explore the docs]()
## Support
You can ask for support by email: help.materialdocs@gmail.com

## Author
Danil Andreev | danssg08@gmail.com | https://github.com/DanilAndreev
npm package: @material-editor/link-plugin
Description: SlateJS link node plugin.
Author: Nossas
Latest version: 5.1.0

<div align="center">
  <a href="https://www.en.nossas.org" rel="noopener" target="_blank">
    <img
      width="200"
      src="https://s3.amazonaws.com/hub-central/uploads/logo-nossas-20170517185909.svg"
      alt="Nossas logo"
      title="Nossas"
    />
  </a>
</div>
<div align="center">
  <img
    src="https://www.psdmockups.com/wp-content/uploads/2016/07/slatejs-520x292.jpg"
    alt="Nossas Cidades logo"
    title="Nossas Cidades"
    height="50"
  />
</div>

<h1 align="center">@slate-editor/link-plugin</h1>

<div align="center">

[SlateJS](https://github.com/ianstormtaylor/slate) link plugin.

[![npm package](https://img.shields.io/npm/v/@slate-editor/link-plugin.svg?maxAge=60)](https://www.npmjs.com/package/@slate-editor/link-plugin)
[![npm downloads](https://img.shields.io/npm/dt/@slate-editor/link-plugin.svg?maxAge=60)](https://www.npmjs.com/package/@slate-editor/link-plugin)

</div>

## Installation
The **@slate-editor/link-plugin** is available as an [npm package](https://www.npmjs.com/package/@slate-editor/link-plugin).

```
yarn add @slate-editor/link-plugin
```

## Usage
Here is a quick example to get you started:

```js
import React from 'react'
import { SlateEditor, SlateToolbar, SlateContent } from 'slate-editor'
import { LinkPlugin, LinkButton } from '@slate-editor/link-plugin'

const plugins = [
  LinkPlugin()
]

const SlateRichTextEditor = () => (
  <SlateEditor plugins={plugins}>
    <SlateToolbar>
      <LinkButton />
    </SlateToolbar>

    <SlateContent />
  </SlateEditor>
)

export default SlateRichTextEditor
```

## Keyboard Shortcut

| OS                       | Shortcut                    |
|--------------------------|-----------------------------|
| ![Apple Logo][apple]     | <kbd>⌘</kbd> + <kbd>k</kbd> |
| ![Windows Logo][windows] | <kbd>^</kbd> + <kbd>k</kbd> |

## API

| Name                 | Description                                                               |
|----------------------|---------------------------------------------------------------------------|
| LinkNode             | Component that holds the html that will wrap the content with link.       |
| LinkKeyboardShortcut | Keyboard shortcut file that manipulates `onKeyDown` event inside SlateJS. |
| LinkUtils            | Generic file that holds the util common functions.                        |
| LinkButton           | Button component that have behaviour to wrap content with link.           |

## TODO

- Make keyboard shortcut accepts customization;
- Add behaviour to catch onPaste command and identify if it is an url and ask if wants to link it;

[apple]: https://cdn2.iconfinder.com/data/icons/designer-skills/128/apple-ios-system-platform-os-mac-linux-48.png
[windows]: https://cdn2.iconfinder.com/data/icons/designer-skills/128/windows-48.png
npm package: @material-extra/spinner
Description: Material spinner component
Author: Giao Ho
Latest version: 1.0.1

# Spinner

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.5.

## Code scaffolding

Run `ng generate component component-name --project spinner` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project spinner`.
> Note: Don't forget to add `--project spinner` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build spinner` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build spinner`, go to the dist folder `cd dist/spinner` and run `npm publish`.

## Running unit tests

Run `ng test spinner` 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 README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @material-extra/timepicker
Description: Material timepicker component
Author: Giao Ho
Latest version: 1.0.8

# Timepicker

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.5.

## Code scaffolding

Run `ng generate component component-name --project timepicker` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project timepicker`.
> Note: Don't forget to add `--project timepicker` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build timepicker` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build timepicker`, go to the dist folder `cd dist/timepicker` and run `npm publish`.

## Running unit tests

Run `ng test timepicker` 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 README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @material-git/checkbox
Description: Angular 2 Material checkbox
Latest version: 2.0.0-git.20160919

# md-checkbox

`md-checkbox` is a Material Design selection control that allows users to make a binary choice for
a predetermined conditioned. It is modeled after the browser's native checkbox element, and behaves
in the same way. Similar to the native checkbox element, it supports an indeterminate state for
"mixed" checkboxes.

A demo of the checkbox can be found at https://plnkr.co/edit/P7qce8lN9n2flS6kBhDy?p=preview.

## Usage

### Basic Usage

`md-checkbox` can be used anywhere a normal checkbox would be used, and in the same way.

```html
<ul>
  <li *ngFor="let todo of todos">
    <md-checkbox [checked]="todo.completed"
                 (change)="todo.completed = $event">
      {{todo.name}}
    </md-checkbox>
  </li>
</ul>
```

### Usage within Forms

In addition to supporting native checkbox functionality, `md-checkbox` also supports `[(ngModel)]`
for use within forms.

```html
<form (submit)="saveUser()">
  <!-- Form fields... -->
  <div>
    <md-checkbox [(ngModel)]="user.agreesToTOS">
      I have read and agree to the terms of service.
    </md-checkbox>
  </div>
  <button type="submit" [disabled]="!user.agreesToTOS">Sign Up</button>
</form>
```

### Indeterminate Checkboxes

Indeterminate checkboxes are useful when a checkbox needs to be in a "mixed" state

```html
<md-checkbox [checked]="false"
             [indeterminate]="isIndeterminate"
             (change)="isIndeterminate = false">
  Click the Button Below to Make Me Indeterminate.
</md-checkbox>
<button type="button" (click)="isIndeterminate = true">
  Make Indeterminate
</button>
```

### Alignment

Note that checkboxes can be aligned to come at the "start" or the "end" of its corresponding label.

```html
<md-checkbox [checked]="true" align="end">
  I come after my label.
</md-checkbox>
```

Note that this alignment is preserved within RTL layouts.

### Accessibility

By default, `md-checkbox` provides all the accessibility attributes needed. It also supports
keyboard navigation and toggling via the spacebar. However, you can provide an `aria-label` to the
checkbox if you do not wish to have any label text.

```html
<md-checkbox [checked]="false" aria-label="My standalone checkbox"></md-checkbox>
```
npm package: @material-git/progress-bar
Description: Angular 2 Material progress-bar
Latest version: 2.0.0-git.20160919

# md-progress-bar

`md-progress-bar` is a component for indicating progress and activity, matching the spec of 
[Material Design Progress & Activity](https://www.google.com/design/spec/components/progress-activity.html).

### Progress Modes

There are four modes:
 1. Determinate - `<md-progress-bar mode="determinate">`
    * Indicates how long an operation will take when the percentage complete is detectable. 
 2. Indeterminate - `<md-progress-bar mode="indeterminate">`
    * Indicates the user must wait while something finishes when it’s not necessary or possible to indicate how long it will take.
 3. Buffer - `<md-progress-bar mode="buffer">`
    * Indicates how long an operation will take when the percentage complete is detectable, also provides a value of the preloading for the operation.
 4. Query - `<md-progress-bar mode="query">`
    * Indicates the user must wait while something finishes when it is not yet possible to indicate how long it will take, but will be possible.  Once possible, the progress mode should be moved to buffer or determinate.
      

Example:

 ```html
<md-progress-bar mode="determinate" value="myValue"></md-progress-bar>
<md-progress-bar mode="indeterminate"></md-progress-bar>
<md-progress-bar mode="buffer" value="myValue" bufferValue="myBufferValue"></md-progress-bar>
<md-progress-bar mode="query"></md-progress-bar>
 ```

### Theming

All progress indicators can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the appropriate class.

Example:

 ```html
<md-progress-bar mode="indeterminate" color="primary"></md-progress-bar>
<md-progress-bar mode="indeterminate" color="accent"></md-progress-bar>
<md-progress-bar mode="indeterminate" color="warn"></md-progress-bar>
 ```

### Accessibility

 * ARIA attributes are applied to the indicator defining the valuemin, valuemax and valuenow attributes.


### API Summary

Properties:

| Name            | Type                                                     | Description |
| ---             | ---                                                      | --- |
| `color`         | `"primary" | "accent" | "warn"`                          | The color palette of the progress indicator |
| `mode`          | `"determinate" | "indeterminate" | "buffer" | "query"`   | The mode of the progress indicator |
| `value`         | number                                                   | The current progress percentage for determinate indicators |
| `bufferValue`   | number                                                   | The current progress percentage for buffer secondary indicators |
npm package: @material-git/progress-circle
Description: Angular 2 Material progress-circle
Latest version: 2.0.0-git.20160919

# md-progress-circle

`md-progress-circle` is a component for indicating progress and activity, matching the spec of 
[Material Design Progress & Activity](https://www.google.com/design/spec/components/progress-activity.html).

### Progress Modes

There are two modes:
 1. Determinate - `<md-progress-circle mode="determinate">`
    * Indicates how long an operation will take when the percentage complete is detectable. 
 2. Indeterminate - `<md-progress-circle mode="indeterminate">` or `<md-spinner>`
    * Indicates the user must wait while something finishes when it’s not necessary or possible to indicate how long it
      will take.

Example:

 ```html
<md-progress-circle mode="determinate" value="myValue"></md-progress-circle>
<md-progress-circle mode="indeterminate"></md-progress-circle>
<md-spinner></md-spinner>
 ```

### Theming

All progress indicators can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the appropriate class.

Example:

 ```html
<md-progress-circle mode="indeterminate" color="primary"></md-progress-circle>
<md-progress-circle mode="indeterminate" color="accent"></md-progress-circle>
<md-progress-circle mode="indeterminate" color="warn"></md-progress-circle>
 ```

### Accessibility

 * ARIA attributes are applied to the indicator defining the valuemin, valuemax and valuenow attributes.

### Upcoming work

 * Adding ARIA attribute for progressbar "for".

### API Summary

Properties:

| Name      | Type                              | Description |
| ---       | ---                               | --- |
| `color`   | `"primary"|"accent"|"warn"`       | The color palette of the progress indicator |
| `mode`    | `"determinate"|"indeterminate"`   | The mode of the progress indicator |
| `value`   | number                            | The current progress percentage for determinate indicators |
npm package: @material-git/radio
Description: Angular 2 Material radio
Latest version: 2.0.0-git.20160919

# MdRadio
Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.

![Preview](https://material.angularjs.org/material2_assets/radio/radios.png)

### Setup
Importing the symbols:
```ts
import { MdRadioModule } from '@material-git/radio';
```

Adding providers and directives:
```ts
@NgModule({
  imports: [MdRadioModule],
  ...
})
export class MyAppModule { }
```

### Examples
A basic radio group would have the following markup.
```html
<md-radio-group>
  <md-radio-button value="option_1">1</md-radio-button>
  <md-radio-button value="option_2">2</md-radio-button>
</md-radio-group>
```

A dynamic example, populated from a `data` variable:
```html
<md-radio-group [(value)]="groupValue">
  <md-radio-button *ngFor="let d of data" [value]="d.value">
    {{d.label}}
  </md-radio-button>
</md-radio-group>
```

A dynamic example for use inside a form showing support for `[(ngModel)]`:
```html
<md-radio-group [(ngModel)]="chosenOption">
  <md-radio-button *ngFor="let o of options" [value]="o.value">
    {{o.label}}
  </md-radio-button>
</md-radio-group>
```

## `<md-radio-group>`
### Properties

| Name | Type | Description |
| --- | --- | --- |
| `selected` | `MdRadioButton` | The currently selected button. |
| `value` | `any` | The current value for this group. |
| `disabled` | `boolean` | Whether the group is disabled. |

When selection is changed, an event is emitted from the `change` EventEmitter property.

### Notes
The `md-radio-group` component has no button initially selected.

## `<md-radio-button>`
### Properties

| Name (attribute) | Type | Description |
| --- | --- | --- |
| `id` | `string` | The unique ID of this radio button. |
| `name` | `string` | Group name, defaults to parent radio group if present. |
| `value` | `any` | The value of this radio button. |
| `checked` | `boolean` | Whether the radio is checked. |
| `disabled` | `boolean` | Whether the radio is disabled. |
| `aria-label` | `string` | Used to set the `aria-label` attribute of the underlying input element. |
| `aria-labelledby` | `string` | Used to set the `aria-labelledby` attribute of the underlying input element.
                                 If provided, this attribute takes precedence as the element's text alternative. |

When checked, an event is emitted from the `change` EventEmitter property.

### Notes
* The `md-radio-button` component by default uses the accent color from the theme palette.
npm package: @material-git/slide-toggle
Description: Angular 2 Material Slide Toggle
Latest version: 2.0.0-git.20160919

# MdSlideToggle
`MdSlideToggle` is a two-state control, which can be also called `switch`

### Screenshots
![image](https://material.angularjs.org/material2_assets/slide-toggle/toggles.png)

## `<md-slide-toggle>`
### Bound Properties

| Name | Type | Description |
| --- | --- | --- |
| `disabled` | boolean | Disables the `slide-toggle` |
| `color` | `"primary" | "accent" | "warn"` | The color palette of the `slide-toggle` |
| `checked` | boolean | Sets the value of the `slide-toggle` |

### Events
| Name | Type | Description |
| --- | --- | --- |
| `change` | boolean | Event will be emitted on every value change.<br/>It emits the new `checked` value. |

### Examples
A basic slide-toggle would have the following markup.
```html
<md-slide-toggle [(ngModel)]="slideToggleModel">
  Default Slide Toggle
</md-slide-toggle>
```

Slide toggle can be also disabled.
```html
<md-slide-toggle disabled>
  Disabled Slide Toggle
</md-slide-toggle>
```

The `slide-toggle` can be also set to checked without a `ngModel`
```html
<md-slide-toggle [checked]="isChecked">
  Input Binding
</md-slide-toggle>
```

You may also want to listen on changes of the `slide-toggle`<br/>
The `slide-toggle` always emits the new value to the event binding `(change)`
```html
<md-slide-toggle (change)="printValue($event)">
  Prints Value on Change
</md-slide-toggle>
```

## Theming
A slide-toggle is default using the `accent` palette for its styling.

Modifying the color on a `slide-toggle` can be easily done, by using the following markup.
```html
<md-slide-toggle color="primary">
  Primary Slide Toggle
</md-slide-toggle>
```

The color can be also set dynamically by using a property binding.
```html
<md-slide-toggle [color]="myColor">
  Dynamic Color
</md-slide-toggle>
```
npm package: @material-git/slider
Description: Angular 2 Material Slider
Latest version: 2.0.0-git.20160919

# md-slider

`MdSlider` is a component that allows users to select from a range of values by moving the slider
thumb.
You can read more about the slider in the
[Material Design spec](https://material.google.com/components/sliders.html).

## Not Yet Implemented

* Thumb Label
* Color
* Invert
* NgModel
* Keyboard Movement
* Focus Ring
* Smaller/grey thumb at minimum value

## Usage

### Setup

Importing the module:
```ts
 @NgModule({
    imports: [MdSliderModule],
    ...
 })
 export class MyAppModule { }
```

### Basic Usage

`md-slider` can be used on its own as a slider with a min of `0`, a max of `100`, and a step of `1`.

```html
<md-slider></md-slider>
```

### Slider with Minimum and Maximum Values

The min and max on a `md-slider` can be set to give a different range of values.
These can be set individually and do not need to both be set.

```html
<md-slider min="1" max="5"></md-slider>
```

### Disabled Slider

`md-slider` can be disabled so that the value cannot be changed and the thumb cannot be moved.

```html
<md-slider disabled></md-slider>
```

### Slider with Value

`md-slider` can have a value defined so that it starts at a specific value on the slider.

```html
<md-slider value="24"></md-slider>
```

### Slider with Step

`md-slider` can have the step defined which declares where the thumb can snap to.

```html
<md-slider step="5"></md-slider>
```

### Slider with Tick Interval

`md-slider` can have a tick interval set to a number or to `auto`.
`auto` will automatically draw tick marks on steps that are at least 30px apart and will always draw
tick marks at the beginning and end of the slider.
Setting `tick-interval` to a number will draw a tick mark at every `tick-interval` steps. An example
of this is a `tick-interval` of `3` with a `step` of `4` will draw tick marks at every `3` steps,
which is the same as every `12` values.

```html
<md-slider tick-interval="auto"></md-slider>
<md-slider tick-interval="3" step="4"></md-slider>
```

## `<md-slider>`

### Bound Properties

| Name | Type | Description |
| --- | --- | --- |
| `min` | number | Optional, the minimum number for the slider. Default = `0`. |
| `max` | number | Optional, the maximum number for the slider. Default = `100`. |
| `value` | number | Optional, the value to start the slider at. |
| `tick-interval` | `"auto" | number` | Optional, how many steps between tick marks. |
| `step` | number | Optional, declares where the thumb will snap to. Default = `1`. |
| `disabled` | boolean | Optional, whether or not the slider is disabled. Default = `false`. |
npm package: @material-git/tabs
Description: Angular 2 Material Tabs
Latest version: 2.0.0-git.20160919

# MdTabGroup
Tab groups allow the user to organize their content by labels such that only one tab is visible at any given time.

## `<md-tab-group>`
### Properties

| Name | Type | Description |
| --- | --- | --- |
| `selectedIndex` | `number` | The index of the currently active tab. |

### Events

| Name | Type | Description |
| --- | --- | --- |
| `focusChange` | `Event` | Fired when focus changes from one label to another |
| `selectChange` | `Event` | Fired when the selected tab changes |

### Examples
A basic tab group would have the following markup.
```html
<md-tab-group>
  <md-tab>
    <template md-tab-label>One</template>
    <template md-tab-content>
      <h1>Some tab content</h1>
      <p>...</p>
    </template>
  </md-tab>
  <md-tab>
    <template md-tab-label>Two</template>
    <template md-tab-content>
      <h1>Some more tab content</h1>
      <p>...</p>
    </template>
  </md-tab>
</md-tab-group>
```

It is also possible to specifiy the active tab by using the `selectedIndex` property.

```html
<md-tab-group [selectedIndex]="1">
  ...
</md-tab-group>
```

**Note**: The index always starts counting from `zero`.
npm package: @material-git/toolbar
Description: Angular 2 Material toolbar
Latest version: 2.0.0-git.20160919

# MdToolbar
`MdToolbar` is a vertical aligned bar, which can hold the application title or actions.

### Screenshots
![Preview](https://cloud.githubusercontent.com/assets/4987015/13727769/6d952c78-e900-11e5-890a-ccfd46996812.png)

## `<md-toolbar>`
### Bound Properties

| Name | Type | Description |
| --- | --- | --- |
| `color` | `"primary" | "accent" | "warn"` | The color palette for the toolbar |

### Notes
The `md-toolbar` component will use by default the background palette.

### Examples
A basic toolbar would have the following markup.
```html
<md-toolbar [color]="myColor">
  <span>My Application Title</span>
</md-toolbar>
```

Toolbars can also have multiple rows.<br/>
Multiple rows inside of a `md-toolbar` can be added by appending as many as needed `<md-toolbar-row>` elements.

```html
<md-toolbar [color]="myColor">
  <span>First Row</span>
  
  <md-toolbar-row>
    <span>Second Row</span>
  </md-toolbar-row>
  
  <md-toolbar-row>
    <span>Third Row</span>
  </md-toolbar-row>
</md-toolbar>
```

### Alignment
The alignment inside of a toolbar row can be easily done by using the flexbox layout.<br/>
For example, the following markup aligns the items on the `right`.

Custom HTML
```html
<md-toolbar color="primary">
  <span>Application Title</span>
  
  <!-- This fills the remaining space of the current row -->
  <span class="example-fill-remaining-space"></span>
  
  <span>Right Aligned Text</span>
</md-toolbar>
```

Custom SCSS
```scss
.example-fill-remaining-space {
  // This fills the remaining space, by using flexbox. 
  // Every toolbar row uses a flexbox row layout.
  flex: 1 1 auto;
}
```

Output
![image](https://cloud.githubusercontent.com/assets/4987015/13730760/0864894e-e959-11e5-9312-7f3cb990d80a.png)
npm package: @material-git/tooltip
Description: Angular 2 Material tooltip
Latest version: 2.0.0-git.20160919

# MdTooltip
Tooltip allows the user to specify text to be displayed when the mouse hover over an element.

### Setup
For alpha.7, you need to include the overlay styles in your app via a `link` element. This will
look something like
```html
<link href="vendor/@material-git/core/overlay/overlay.css" rel="stylesheet">
```


### Examples
A button with a tooltip
```html
<button md-tooltip="some message" tooltip-position="below">Button</button>
```

## `[md-tooltip]`
### Properties

| Name | Type | Description |
| --- | --- | --- |
| `md-tooltip` | `string` | The message to be displayed. |
| `tooltip-position` | `"above"|"below"|"before"|"after"` | The position of the tooltip. |

### Methods

| Name | Description |
| --- | --- | --- |
| `show` | Displays the tooltip. |
| `hide` | Removes the tooltip. |
| `toggle` | Displays or hides the tooltip. |
npm package: @material-inborn/ui
Description: a material design component for react native (MDC ReactNative).
Author: Quadri Adekunle
Latest version: 0.0.4-6

# Material Component for React Native (MDC React Native)

MDC React is an essential cross-platform UI components for React Native implementing Material Guidelines aiming for the component to provide a great ui library for your next project.

## Components

The following is a list of the components that are ready to be used, with corresponding links to the material.io design spec.

## Getting Started
npm package: @material-kit/lib
Description: UI toolkit for building web apps with Material Design
Author: Webdenim
Latest version: 0.7.0
Deprecated: WARNING: This project has been renamed to `material-components-kit`. Install using `npm i material-components-kit` instead.

# Material Kit

[Material Kit by Webdenim](https://www.webdenim.io/material-kit/) is a UI toolkit
for building web apps with Material Design.
Material Kit is built on top of Material Components for the Web and complements it with useful
components and utilities.

## Documentation

See [official Material Kit documentation site](https://www.webdenim.io/material-kit/)
for detailed installation instructions, demos and more.

## License

Material Kit is a free and open-source project licensed under the MIT.
npm package: @material-lite/angular
Description: Material Lite Components for Angular
Latest version: 2.5.4

# Material Lite Components for Angular
[`Angular material`](https://material.angular.io/)を参考に制作している`MaterialDesign`コンポーネントです。
レンダリングを抑えることと使いやすさに重きをおいています。

## Web Documents
<h3><a href="https://material-lite.web.app/angular">https://material-lite.web.app/angular</a></h3>

## React版
### NPM
実装中です。（未実装）

### Web Documents
<h3><a href="https://material-lite.web.app/react">https://material-lite.web.app/react</a></h3>

## Vue3版
製作中。。。
npm package: @material-lite/angular-cdk
Description: Material Lite Components for Angular
Latest version: 2.5.0
Deprecated: Deprecated as it has been made for private use

# Material Lite CDK for Angular

[`Material Lite Components for Angular`](https://www.npmjs.com/package/@material-lite/angular)で使用されるCDK。

単体で用いることも可能です。


## Web Documents
<h3><a href="https://material-lite.web.app/angular">https://material-lite.web.app/angular</a></h3>


## React版
### NPM
実装中です。（未実装）

### Web Documents
<h3><a href="https://material-lite.web.app/react">https://material-lite.web.app/react</a></h3>
npm package: @material-lite/react
Description: Material Lite Components for Angular
Latest version: 2.4.3
Deprecated: Deprecated as it has been made for private use

# Material Lite Components for React

> Made with create-react-library

## Links
- [Web documents](https://material-lite.web.app/react)
- [Github documents](https://github.com/junpei10/material-lite/tree/main/react#readme)


## License
MIT © [Material Lite](https://github.com/junpei10)
npm package: @material-lite/react-cdk
Description: Material Lite CDK for Angular
Latest version: 2.4.5
Deprecated: Deprecated as it has been made for private use

# Material Lite CDK for React

> Made with create-react-library

## Links
- [Web documents](https://material-lite.web.app/react)
- [Github documents](https://github.com/junpei10/material-lite/tree/main/react#readme)


## License
MIT © [Material Lite (junpei10)](https://github.com/junpei10)
npm package: @material-lite/theming
Description: Theming SCSS files for Material Lite
Latest version: 2.5.6

# Theming SCSS files for Material Lite
Material Lite シリーズで用いられる共通のSCSSの集合体です。


## Links
### Angular
- [Web documents](https://material-lite.web.app/angular)
- [Github documents](https://github.com/junpei10/material-lite/tree/main/angular#readme)
- [npm (components)](https://www.npmjs.com/package/@material-lite/angular)
- [npm (cdk)](https://www.npmjs.com/package/@material-lite/angular-cdk)


### React
- [Web documents](https://material-lite.web.app/react)
- [Github documents](https://github.com/junpei10/material-lite/tree/main/react#readme)
<!-- - [npm (components)](https://www.npmjs.com/package/@material-lite/react) -->
<!-- - [npm (cdk)](https://www.npmjs.com/package/@material-lite/react-cdk) -->


### Vue3
<!-- - [Web documents](https://material-lite.web.app/vue3) -->
- [Github documents](https://github.com/junpei10/material-lite/tree/main/vue3#readme)
<!-- - [npm (components)](https://www.npmjs.com/package/@material-lite/vue3) -->
<!-- - [npm (cdk)](https://www.npmjs.com/package/@material-lite/vue3-cdk) -->
npm package: @material-styled/card
Description: {Description for Card}
Author: Sergey Sova
Latest version: 0.0.4

# @material-styled/card

## Installation

```bash
npm install --save @material-styled/card
```

## Usage

```js
import { Card, CardHeader, CardText, CardActions, CardMediaImage } from '@material-styled/card'
// or
import { Card, CardHeader, CardText, CardActions, CardMediaImage } from '@material-styled/core'
```