krypton-ui/README.md

<h1 align="center"> <p align="center"><a href="https://krypton-ui.com"><img src="https://user-images.githubusercontent.com/7073241/224507377-395bffc0-9ff7-4d74-865b-f734394a7e7e.png" alt="Krypton" width="200"></a></p> </h1>

<h1 align="center">
  <p align="center"><a href="https://krypton-ui.com"><img src="https://user-images.githubusercontent.com/7073241/224507377-395bffc0-9ff7-4d74-865b-f734394a7e7e.png" alt="Krypton" width="200"></a></p>
</h1>

<h4 align="center">The Comprehensive React-Based UI Toolkit built on top of <a href="https://reactjs.org/" target="_blank">React</a>.</h4>

<p align="center">
<a href="https://badge.fury.io/js/krypton-ui"><img src="https://badge.fury.io/js/krypton-ui.svg" alt="npm version" height="18"></a>
<a href="https://github.com/eugeniucozac/krypton-ui/issues"><img src="https://camo.githubusercontent.com/ca8b03b0da466c288fc28f8882afa9face8ba7a4290d0a03c3b9d7f57caf6a04/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f6d6b6f7369722f72656163742d706172616c6c61782d74696c74" alt="Open issues" data-canonical-src="https://img.shields.io/github/issues/mkosir/react-parallax-tilt" style="max-width: 100%;"></a>
  <a href="https://github.com/microsoft/TypeScript"><img src="https://camo.githubusercontent.com/1d1f56c37cf5dfd1b9c3782a8d1d6fe07f8764e8c35f53ec90460e5b38cd8f7d/68747470733a2f2f6261646765732e66726170736f66742e636f6d2f747970657363726970742f636f64652f747970657363726970742e7376673f763d313031" alt="TypeScript" data-canonical-src="https://badges.frapsoft.com/typescript/code/typescript.svg?v=101" style="max-width: 100%;"></a>
<a href="https://github.com/Redocly/redoc/blob/main/LICENSE"><img src="https://camo.githubusercontent.com/29d48040bcf3abe4eabc1089e81a82726f1beef3e2571fc67a13b97bff7df15d/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f7265646f632e737667" alt="License" data-canonical-src="https://img.shields.io/npm/l/redoc.svg" style="max-width: 100%;"></a>

</p>

<p dir="auto"><g-emoji class="g-emoji" alias="rocket" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f680.png">🚀</g-emoji> Krypton UI: The Comprehensive React-Based UI Toolkit <g-emoji class="g-emoji" alias="zap" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/26a1.png">⚡️</g-emoji> Krypton is a collection of reusable UI components for React that can assist in the development of any web application.</p>
<h3 tabindex="-1" dir="auto">List of reusable components:</h3>
<ul>
    <li>:abacus: Accordion</li>
    <li>:smiling_imp: AdvancedAlert</li>
    <li>:warning: Alert</li>
    <li>:slot_machine: Autocomplete</li>
    <li>:monkey_face: Avatar</li>
    <li>:flower_playing_cards: Badge</li>
    <li>:rotating_light: Button</li>
    <li>:bread: Breadcrumbs</li>
    <li>:black_joker: Card</li>
    <li>:carousel_horse: Carousel</li>
    <li>:white_check_mark: Checkbox</li>
    <li>:credit_card: Chip</li>
    <li>:date: Datepicker</li>
    <li>:label: FormLabel</li>
    <li>:electric_plug: Input</li>
    <li>:framed_picture: Icon</li>
    <li>:page_facing_up: Pagination</li>
    <li>:hourglass_flowing_sand: ProgressBar</li>
    <li>:cinema: Modal</li>
    <li>:link: Link</li>
    <li>:bookmark_tabs: List</li>
    <li>:cyclone: Spinner</li>
    <li>:arrow_down_small: Select</li>
    <li>:paperclips: Stepper</li>
    <li>:bulb: Switch</li>
    <li>:radio_button: Radio</li>
    <li>:star: Rating</li>
    <li>:level_slider: Range</li>
    <li>:book: Table</li>
    <li>:musical_keyboard: Tabs</li>
    <li>:ticket: Tooltip</li>
    <li>:clipboard: TransferList</li>
</ul>

<h3 tabindex="-1" dir="auto">Installation</h3>
<p dir="auto">Krypton UI is available as an <a href="https://www.npmjs.com/package/krypton-ui" rel="nofollow">npm package</a>.</p>
<p dir="auto"><strong>npm:</strong></p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto">
  <pre>npm install krypton-ui</pre>
  <div class="zeroclipboard-container position-absolute right-0 top-0"></div>
</div>
<h3 tabindex="-1" dir="auto">Getting started with Krypton UI</h3>

<p dir="auto">This is an example of a simple application that utilizes Krypton UI's <code>Button</code> component:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">

```javascript
import * as React from 'react';
import { Button } from 'krypton-ui';

const App = () => {
    return <Button variant="outline">Click Me!</Button>;
};
```

<h3 tabindex="-1" dir="auto">Contributions</h3>
 <p>Everyone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug. Totally open to any suggestions and improvements.</p>
<h3 tabindex="-1" dir="auto">License</h3>
<p>This project is licensed under the terms of the <a href="https://github.com/eugeniucozac/krypton-ui/blob/main/LICENSE">MIT license</a>.</p>