# Glide Design System

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

## Installation

---

```
npm i glide-design-system
```

## Getting Started with Glide Design

---

```
import * as React from 'react';
import {Button} from 'glide-design-system';

function App() {
  return <Button variant='outlined' color='primary'>Hello world</Button>
}

export default App;
```

## Storybook Documentation

You can checkout the storybook documentation [**Here**](https://glide-docs.dynamostack.com/?path=/docs/configure-your-project--documentation)

## Components

---

<div style="display: flex; justify-content: space-around;">

<div style="flex-basis: 45%;">
    <ul>
        <li>Accordion</li>
        <li>Address</li>
        <li>Avatar</li>
        <li>Backdrop</li>
        <li>Badge</li>
        <li>Breadcrumbs</li>
        <li>Button</li>
        <li>Card</li>
    </ul>
</div>

<div style="flex-basis: 45%;">
    <ul>
        <li>Checkbox</li>
        <li>Checkbox Group</li>
        <li>Chip</li>
        <li>DatePicker</li>
        <li>Divider</li>
        <li>Drawer</li>
        <li>Email</li>
        <li>FullName</li>
    </ul>
</div>

<div style="flex-basis: 45%;">
    <ul>
        <li>Icon Button</li>
        <li>Progress Circle</li>
        <li>Menu</li>
        <li>MenuItem</li>
        <li>Modal</li>
        <li>Multi-Select</li>
        <li>Navbar Layout</li>
        <li>Number</li>
    </ul>
</div>

<div style="flex-basis: 45%;">
    <ul>
        <li>Pagination</li>
        <li>Phone Number Input</li>
        <li>Radio Button</li>
        <li>Select</li>
        <li>Skeleton</li>
        <li>Slider</li>
        <li>Snackbar</li>
        <li>Speed Dial</li>
    </ul>
</div>

<div style="flex-basis: 45%;">
    <ul>
        <li>Stepper</li>
        <li>Table</li>
        <li>Tab</li>
        <li>Text</li>
        <li>TextField</li>
        <li>Time picker</li>
        <li>Tooltip</li>
    </ul>
</div>

</div>

<!-- ### Components

- [**Button**](http://192.168.29.181:6006/?path=/docs/components-button--documentation)
- [**TextField**](http://192.168.29.181:6006/?path=/docs/components-textField--documentation)
- [**Modal**](http://192.168.29.181:6006/?path=/docs/components-modal--documentation)
- [**Drawer**](http://192.168.29.181:6006/?path=/docs/components-button--documentation)
- [**Avatar**](http://192.168.29.181:6006/?path=/docs/components-drawer--documentation)
- [**Tabs**](http://192.168.29.181:6006/?path=/docs/components-tabs--documentation)
- [**Breadcrumbs**](http://192.168.29.181:6006/?path=/docs/components-tabs--documentation)
- [**Card**](http://192.168.29.181:6006/?path=/docs/components-tabs--documentation)
- [**Chip**](http://192.168.29.181:6006/?path=/docs/components-tabs--documentation)
- [**Drawer**](http://192.168.29.181:6006/?path=/docs/components-tabs--documentation)
- [**Pagination**](http://192.168.29.181:6006/?path=/docs/components-tabs--documentation)
- [**ProgressCricle**](http://192.168.29.181:6006/?path=/docs/components-tabs--documentation)
- [**Menu**](http://192.168.29.181:6006/?path=/docs/components-tabs--documentation)
- [**MenuItem**](http://192.168.29.181:6006/?path=/docs/components-tabs--documentation)
- [**NavbarLayout**](http://192.168.29.181:6006/?path=/docs/components-tabs--documentation)
- [**Select**](http://192.168.29.181:6006/?path=/docs/components-tabs--documentation)
- [**Snackbar**](http://192.168.29.181:6006/?path=/docs/components-tabs--documentation)
- [**Table**](http://192.168.29.181:6006/?path=/docs/components-tabs--documentation)
- [**Tab**](http://192.168.29.181:6006/?path=/docs/components-tabs--documentation)

## View Components in Story book

[**Glide story book**](http://192.168.29.181:6006) -->