glide-design-system

Version:

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

129 lines (104 loc) • 3.82 kB

Markdown

# 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>