import {Meta} from '@storybook/blocks';
// import designSystem from './design-system.png';

<Meta title='Introduction' />

{/* <img src={designSystem} height='200px' /> */}

# Get started

Storybook Design System is a reusable component library that helps Storybook contributors build UIs faster. The goal is to make building durable UIs more productive and satisfying.

## Install

SDS components are written in React, and its stories are written in [Component Story Format](https://medium.com/storybookjs/component-story-format-66f4c32366df). It requires Storybook version 5.2-beta and up.

Add SDS to your project.

`npm install --save herein-design-system`

### **Use**

Import components you want into your UI

`import {ButtonComponent as Button} from 'herein-design-system';`

and use them like so

```
  const example = () => (
    <div>
      <Button variant='text' color='gray'>
        button
      </Button>
    </div>
  )
```

### **Run and develop SDS locally**

Clone the [SDS GitHub project](https://github.com/storybookjs/design-system) then start Storybook.

`yarn && yarn run storybook`

## Used by

-   [Storybook homepage](https://storybook.js.org/)
-   [LearnStorybook.com](https://www.learnstorybook.com/)

Note: this package is not used in Storybook's UI, but the visual design is identical.

### **Resources**

-   [Introducing Storybook Design System](https://medium.com/storybookjs/introducing-storybook-design-system-23fd9b1ac3c0)
-   [GitHub repository](https://github.com/storybookjs/design-system)