1 | <p align="center">
|
2 | <a href="https://baseweb.design">
|
3 | <img width="250px" src="https://res.cloudinary.com/dawr8pobn/image/upload/v1556920604/base-web.svg">
|
4 | </a>
|
5 | </p>
|
6 |
|
7 | <h1 align="center">Base Web React Components</h1>
|
8 |
|
9 | [![Build status](https://badge.buildkite.com/92a7500cd98f619621c4801833d8b358c2fd79efc9b98f1b98.svg?branch=master)](https://buildkite.com/uberopensource/baseui)
|
10 |
|
11 | **Base** is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base.
|
12 |
|
13 | <p align="center">
|
14 | <a href="https://baseweb.design">
|
15 | <img width="500px" src="https://i.imgur.com/UaRZdTq.png">
|
16 | </a>
|
17 | </p>
|
18 |
|
19 | ## Usage
|
20 |
|
21 | On npm, you can find Base Web as `baseui`.
|
22 |
|
23 | Add `baseui` and its peer dependencies to your project:
|
24 |
|
25 | ```bash
|
26 | # using yarn
|
27 | yarn add baseui styletron-react styletron-engine-atomic
|
28 |
|
29 | # using npm
|
30 | npm install baseui styletron-react styletron-engine-atomic
|
31 | ```
|
32 |
|
33 | ```javascript
|
34 | import {Client as Styletron} from 'styletron-engine-atomic';
|
35 | import {Provider as StyletronProvider} from 'styletron-react';
|
36 | import {LightTheme, BaseProvider, styled} from 'baseui';
|
37 | import {StatefulInput} from 'baseui/input';
|
38 |
|
39 | const engine = new Styletron();
|
40 |
|
41 | const Centered = styled('div', {
|
42 | display: 'flex',
|
43 | justifyContent: 'center',
|
44 | alignItems: 'center',
|
45 | height: '100%',
|
46 | });
|
47 |
|
48 | export default function Hello () {
|
49 | return (
|
50 | <StyletronProvider value={engine}>
|
51 | <BaseProvider theme={LightTheme}>
|
52 | <Centered>
|
53 | <StatefulInput />
|
54 | </Centered>
|
55 | </BaseProvider>
|
56 | </StyletronProvider>
|
57 | );
|
58 | }
|
59 | ```
|
60 |
|
61 | Both Base Web and Styletron come with [flow types](https://flow.org/) and [TypeScript](https://www.typescriptlang.org/index.html). All our components are typed and examples have Vanilla, Flow and TypeScript versions. For Styletron + TS, you need to add some additional packages:
|
62 |
|
63 | ```bash
|
64 | yarn add @types/styletron-standard @types/styletron-react @types/styletron-engine-atomic
|
65 | ```
|
66 |
|
67 | ## Example
|
68 |
|
69 | An example of an application using Base Web can be found [here](https://github.com/tajo/fusion-baseui). You can also check how it works on [CodeSandbox](https://codesandbox.io/s/patient-sky-nn8t7).
|
70 |
|
71 | ## Docs
|
72 |
|
73 | To read the documentation, please visit [baseweb.design](https://baseweb.design).
|
74 |
|
75 | ## Contributing
|
76 |
|
77 | [Contributing](CONTRIBUTING.md)
|
78 |
|
79 | ## Shoutouts 🙏
|
80 |
|
81 | <img src="https://raw.githubusercontent.com/tajo/react-movable/master/assets/browserstack-logo.png?raw=true" height="80" title="BrowserStack Logo" alt="BrowserStack Logo" />
|
82 |
|
83 | Big thanks to [BrowserStack](https://www.browserstack.com) for letting the maintainers use their service to debug browser issues.
|