# devbsb-ui-kit

> ![](https://devbsb.com.br:5000/files/cbed89715269628f0880404c2d484c8a-ui-kit.png)

Latest version **1.2.0** (published 2020-05-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install devbsb-ui-kit
pnpm add devbsb-ui-kit
yarn add devbsb-ui-kit
bun add devbsb-ui-kit
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2020-05-16 |
| First published | 2020-05-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 63.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Matheus Bastos |
| Maintainers | iaematt |
| Keywords | reactjs, react, typescript, storybook, ui, ui-kit, devbsb, components, input, spinner, animation, button |

## Links

- npm: https://www.npmjs.com/package/devbsb-ui-kit
- npm.io page: https://npm.io/package/devbsb-ui-kit

## Dependencies (3)

- [polished](https://npm.io/package/polished.md) ^3.6.3
- [react-ga](https://npm.io/package/react-ga.md) ^2.7.0
- [styled-components](https://npm.io/package/styled-components.md) ^5.1.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2020-05-16
- 1.1.2 — 2020-05-15
- 1.1.1 — 2020-05-15
- 1.1.0 — 2020-05-15
- 1.0.9 — 2020-05-15
- 1.0.8 — 2020-05-15
- 1.0.7 — 2020-05-15
- 1.0.6 — 2020-05-14
- 1.0.5 — 2020-05-14
- 1.0.4 — 2020-05-14
- 1.0.3 — 2020-05-13
- 1.0.2 — 2020-05-13
- 1.0.1 — 2020-05-13
- 1.0.0 — 2020-05-13

## README

# DevBSB UI Kit 🌠

![](https://devbsb.com.br:5000/files/cbed89715269628f0880404c2d484c8a-ui-kit.png)

Esse UI kit foi criado para facilitar a criação de aplicações ReactJS, com componentes prontos para ser utilizados.
Utilizado nesse projeto: _React, Typescript, Styled-Components, Storybook e React-Icons_.

[Storybook online](https://devbsb.com.br/ui-kit/) 🌍

[Código da aplicação no GitHub](https://github.com/iaematt/ui-kit) 📝

## Instalações e uso ⚙

Crie um novo projeto com _create react-app_, ou utilize um existente e adicione o ui kit.

```
# Crie um novo projeto
$ yarn create react-app my-app

# Acesse a pasta do projeto
$ cd my-app/

# Instale o ui kit
$ yarn add devbsb-ui-kit

# Rode o projeto
$ yarn start
```

Pronto! Agora acesse nosso [storybook](https://devbsb.com.br/ui-kit/), para utilizar os components.

### Configuração e exemplo de uso ⌛

Para não ter erros de css nas notificações, radio button e checkbox é preciso ter um arquivo de reset css no seu projeto, contendo:

```
* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}
```

Exemplo de uso do componente Spinner.

```
import React from 'react';
import { Spinner } from 'devbsb-ui-kit';

function Loading() {
    return(<Spinner />);
}

export default Loading;
```

Fonte recomendada para utilização do UI kit: **Roboto e Roboto Mono**.

## Desenvolvimento 📌

Clone ou faça o download [desse repositório](https://github.com/iaematt/ui-kit).

```
# Clone o repositório
$ git clone https://github.com/iaematt/ui-kit

# Acesse a pasta
$ cd ui-kit/

# Instale as dependencias
$ yarn

# Rode a aplicação
$ yarn storybook

# Para gerar sua aplicação
$ yarn build-storybook
```

Acesse localhost:8080 em seu navegador.

## Licença

_Distribuído sob a licença MIT._

---
_Source: https://npm.io/package/devbsb-ui-kit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
