npm package: @serifcolakel/serif-ui
Description: <!-- PROJECT LOGO --> <br /> <div align="center">   <a href="https://github.com/serifcolakel">     <img src="https://i.hizliresim.com/a27dhrh.jpg" alt="Logo" width="80" height="80">   </a> </div>
Latest version: 0.0.6

<!-- PROJECT LOGO -->
<br />
<div align="center">
  <a href="https://github.com/serifcolakel">
    <img src="https://i.hizliresim.com/a27dhrh.jpg" alt="Logo" width="80" height="80">
  </a>
</div>

<!-- TABLE OF CONTENTS -->
<details>
  <summary>Table of Contents</summary>
  <ol>
    <li>
      <a href="#about-the-project">About The Project</a>
      <ul>
        <li><a href="#built-with">Built With</a></li>
      </ul>
    </li>
    <li>
      <a href="#getting-started">Getting Started</a>
      <ul>
        <li><a href="#prerequisites">Prerequisites</a></li>
        <li><a href="#installation">Installation</a></li>
      </ul>
    </li>
    <li><a href="#usage">Usage</a></li>
    <li><a href="#roadmap">Roadmap</a></li>
    <li><a href="#contributing">Contributing</a></li>
    <li><a href="#contact">Contact</a></li>
  </ol>
</details>
<br />

## DEV COMMIT TAGS

<em>You can access the details of the commits made by the developers here.<em>

<br />
<details>
<summary>Click for Dev Tags details.</summary>

| <p style="color: purple;">TAGS</p> | <p style="color: purple">EXPLAIN<p>                                                                                                           |
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| **ADDED (username)**                          | It gives information about newly added Component, package and files.                                                                          |
| **CREATED (username)**                        | It gives information about the Component, package and files created for the first time.                                                       |
| **CHANGED (username)**                        | It gives information about the changed function or method related to the problem or design.                                                   |
| **REMOVED (username)**                        | It gives information about the removed function or method related to the problem or design.                                                   |
| **UPDATED (username)**                        | It gives information about the updated function or method related to the problem or design.                                                   |
| **FIXED (username)**                          | It gives information about the solution of the problem caused by the problem.                                                                 |
| **TODO (username)**                           | It gives information about the planned and encountered problem in the future.                                                                 |
| **TEST (username)**                           | It is a tag created to test whether the functions added during build or for projects working in separate environments can work synchronously. |
| **INFO (username)**                            | It is a tag given to the commit to give information about the project.                                                                       |
</details>
<!-- ABOUT THE PROJECT -->
<br />

## About The Project

In this project, the basic concepts of Storybook explained with examples are included.

<br />

## **Built With**

In this section, the technologies used in the construction of the project are included.

- [TypeScript](https://www.typescriptlang.org/)
- [React](https://reactjs.org/)
- [Storybook](https://storybook.js.org/)
- [Styled-Components](https://styled-components.com/)
- [TailwindCSS](https://tailwindcss.com/)

<!-- GETTING STARTED -->

## **Getting Started**

In this section, the steps for the cloning of the project and the improvements to be made by you are shown.

## Prerequisites

By following the steps below, your project can be run after the local installation.

- npm
  ```sh
  npm install npm@latest -g
  ```

## **Installation**

_Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services._

1. Clone the repo
   ```sh
   git clone https://github.com/serifcolakel/storybook-desing.git
   ```
2. Install NPM packages
   ```sh
   npm install
   ```
3. Run the project
   ```sh
   npm run storybook
   ```

<div align="right">
  <a href="#top">
      <img src="https://i.hizliresim.com/oxq9b8i.png" alt="Logo" width="40px" height="40px">
  </a>
</div>

<!-- USAGE EXAMPLES -->

## **Usage**

In this section, you can access the documentation of the libraries used during the creation of the project.

_For more examples, please refer to the [TypeScript](
https://www.typescriptlang.org/
) and more._

<!-- ROADMAP -->

## **Roadmap**

- [ ] Try to add more components and pages.

See the [Open Issues](https://github.com/serifcolakel/storybook-desing.git) for a full list of proposed features (and known issues).

<!-- CONTRIBUTING -->

## **Contributing**

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!

<!-- CONTACT -->

## **Contact**

<p align="center">
    <a href="mailto:serifcolakel0@gmail.com">
        <img alt="Email" src="https://img.shields.io/badge/Email-serifcolakel0@gmail.com-green style=flat&logo=gmail">
    </a>
    <a href="https://www.linkedin.com/in/serifcolakel/" target="_blank">
        <img alt="LinkedIn" src="https://img.shields.io/badge/LinkedIn-@serifcolakel-blue?style=flat&logo=linkedin">
    </a>
    <a href="https://www.instagram.com/serifcolakell/">
        <img alt="Instagram" src="https://img.shields.io/badge/Instagram-serifcolakell-red?style=flat-square&logo=instagram">
    </a>
</p>

<div align="right">
  <a href="#top">
      <img src="https://i.hizliresim.com/oxq9b8i.png" alt="Logo" width="40px" height="40px">
  </a>
</div>