https://github.com/borrow-ui/borrow-ui

A simple component library made with React.
https://github.com/borrow-ui/borrow-ui

component-library dashboards nextjs react storybook

Last synced: 3 months ago
JSON representation

A simple component library made with React.

• Host: GitHub
• URL: https://github.com/borrow-ui/borrow-ui
• Owner: borrow-ui
• License: mit
• Created: 2020-03-17T10:45:09.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-06-18T13:57:16.000Z (over 2 years ago)
• Last Synced: 2024-10-18T06:14:03.335Z (4 months ago)
• Topics: component-library, dashboards, nextjs, react, storybook
• Language: TypeScript
• Homepage:
• Size: 5.5 MB
• Stars: 7
• Watchers: 2
• Forks: 2
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# borrow-ui



  








    A simple component library made with React.





  Visit borrow-ui website to see a preview of components styles and to get started!








    

        

    

    

        

    

    

        

    











    

        

            

            Storybook

            

            

                

            

        

        

            

                Dashboard demo

            

            

                

            

        

        

            

                Website Next.js demo

            

            

                

            

        

    






# borrow-ui project

Welcome to borrow-ui repository! borrow-ui is a simple React component library, which you can extend and/or use as a starting project.

You can navigate the [presentation site](https://www.borrow-ui.dev/) or the [dashboard example](https://dashboard.borrow-ui.dev/).

You can find the [Storybook documentation here](https://docs.borrow-ui.dev/).

This repository uses [`yarn 3`](https://yarnpkg.com/) to organize the code in different packages.

The following packages are available:

- `ui`: the main package, contains the componenty library. It uses `sass` as a CSS preprocessor, `rollup` to build the code and `jest` and `@testing-library/react` for the tests;

- `documentation`: source code of the documentation, based on `storybook`;

- `dashboard`: source code of the dashboard demonstration, based on CRA;

- `website-next`: source code of a static website based on Next.js.

## Why this project?

borrow-ui has been started as a container for simple components that can be used as a base for MVPs, prototype sites and dashboards.

During time, few projects based on the core components grew diverging from each other, so the idea of having a starting point based on common components bootstrapped this project.

Often, when we work on (React) websites, we need very custom functionalities that can't be achieved with common components libraries: we need more props to be passed, having consistent styles for the custom components, passing refs to others or simply understand how a component work to replicate the same functionality on another.

borrow-ui is a set of components which are:

- consistents in styles and code;

- small enough to be understood by anyone with minimal React experience;

- easy to extend;

- tested and documented.

## Quick start

To get started with borrow-ui, understand how the project is structured and see an explanation of the development workflow, have a look at the

[Getting Started](https://www.borrow-ui.dev/getting-started/getting-started) and

[Workflow](https://www.borrow-ui.dev/workflow) pages on the project website.

If you are in a rush, you can use the following commands:

```bash

curl -LJO https://github.com/borrow-ui/borrow-ui/archive/master.zip;

unzip borrow-ui-master.zip && mv borrow-ui-master my-ui-name;

cd my-ui-name;

find . -type f -print0 | xargs -0 sed -i 's/borrow-ui/my-ui-name/g';

yarn

yarn workspace @my-ui-name/documentation run storybook

```

Ready to go! This will start Storybook development server with hot-reload.

Other commands:

- `yarn ui:dev`: develop the UI library with watch mode;

- `yarn ui:test`: run UI unit tests (you can add `--watchAll` to start watch mode);

- `yarn ui:build`: build production version of UI package;

For the full list of commands, see the main `package.json` file and the single packages.

## Roadmap

A user friendly roadmap is available in [the website](https://www.borrow-ui.dev/roadmap), however issues and milestones can be also seen in this repository Issues section.

A focus will be given to tutorials and documentation, as they are part of the main goal of this project.

## Contribute

Contribution are welcome! Any ideas, bug reports, improvements can be suggested/reported in the Issues page of this repository.