Skip to content
A React Component library implementing the Base design language
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.buildkite docs(legacy): deploy legacy docs sites (#1277) May 14, 2019
.github chore: add CODEOWNERS (#1269) May 9, 2019
.storybook chore: consistently import React (#1290) May 16, 2019
babel chore(license): update years (#1284) May 15, 2019
docs chore: fix typos (#1193) Apr 26, 2019
documentation-site fix(border-radius): use the proper long-hand prop (#1319) May 23, 2019
e2e chore(license): update years (#1284) May 15, 2019
flow-typed chore(license): update years (#1284) May 15, 2019
flow build: flow fix me markdown imports (again) (#617) Dec 5, 2018
proposals feat(heading): add component Heading (#1311) May 23, 2019
scripts chore(license): update years (#1284) May 15, 2019
src fix(border-radius): use the proper long-hand prop (#1319) May 23, 2019
.babelrc.js chore: remove redundant conditional expressions and consistently use … May 2, 2019
.dockerignore Run e2e tests in docker (#95) Aug 10, 2018
.eslintignore feat: blog (#1069) Apr 2, 2019
.eslintrc.js feat(puppeteer): adding the test runner (#780) Jan 24, 2019
.flowconfig feat(docs-site): adds example component (#692) Jan 3, 2019
.gitignore feat: blog (#1069) Apr 2, 2019
.markdownlint.json feat(docs): add shoutout for browserstack (#862) Feb 7, 2019
.npmignore feat: blog (#1069) Apr 2, 2019
.npmrc feat: textarea component initial implementation (#99) Aug 10, 2018
.prettierignore docs: update rfc constant syntax, rename rfcs folder to 'proposals' (#… Dec 7, 2018
.prettierrc chore: fix prettier setting (#35) Aug 10, 2018
CODE_OF_CONDUCT.md docs(coc): adopt a code of conduct (#278) Sep 19, 2018
CONTRIBUTING.md docs(contrib): update (#1097) Mar 28, 2019
Dockerfile chore: bump screener-storybook (#1107) Apr 4, 2019
LICENSE chore(license): update years (#1284) May 15, 2019
LICENSE-HEAD chore(license): update years (#1284) May 15, 2019
README.md docs(providers): use baseprovider in the docs (#1249) May 8, 2019
TESTING.md Update TESTING.md (#856) Feb 7, 2019
commitlint.config.js chore(license): update years (#1284) May 15, 2019
docker-compose.yml chore(project): add fossa (#1238) May 6, 2019
jest-puppeteer.config.js chore(license): update years (#1284) May 15, 2019
jest.config.js chore(license): update years (#1284) May 15, 2019
jest.e2e.config.js chore(license): update years (#1284) May 15, 2019
netlify.toml feat(docs): swap documentation site (#770) Jan 22, 2019
now.json feat: auto alias the now deployment (#816) Jan 30, 2019
package.json Release v6.20.0 (#1317) May 23, 2019
renovate.json chore(project): add renovate Aug 21, 2018
screener.config.js chore(license): update years (#1284) May 15, 2019
webpack.e2e.config.js fix(avatar): use a single pic in the screener test (#1240) May 7, 2019
yarn.lock fix(datepicker): formatting (#1303) May 22, 2019

README.md

Base Web React Components

Build status

Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base.

Usage

On npm, you can find Base Web as baseui.

Add baseui and its peer dependencies to your project:

# using yarn
yarn add baseui styletron-react styletron-engine-atomic

# using npm
npm install baseui styletron-react styletron-engine-atomic
import {Client as Styletron} from 'styletron-engine-atomic';
import {Provider as StyletronProvider} from 'styletron-react';
import {LightTheme, BaseProvider, styled} from 'baseui';
import {StatefulInput} from 'baseui/input';

const engine = new Styletron();

const Centered = styled('div', {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  height: '100%',
});

export default function Hello() {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={LightTheme}>
        <Centered>
          <StatefulInput />
        </Centered>
      </BaseProvider>
    </StyletronProvider>
  );
}

Docs

To read the documentation, please visit baseweb.design.

Contributing

Contributing

Shoutouts 🙏

BrowserStack Logo

Big thanks to BrowserStack for letting the maintainers use their service to debug browser issues.

You can’t perform that action at this time.