Skip to content
A React Component library implementing the Base design language
JavaScript TypeScript Other
Branch: master
Clone or download

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.buildkite build: remove link checker script from ci (#3105) Mar 23, 2020
.codesandbox fix(codesandbox): fix DarkTheme, focus-ring, add CI integration (#3128) Mar 27, 2020
.github chore(project): remove actions (#2304) Nov 13, 2019
babel fix(flow): transform cup globals before dist copy (#2888) Feb 20, 2020
docs fix(use-styletron): updates useCss to css (#2381) Nov 25, 2019
documentation-site fix(deps): remove main field (#3132) Mar 28, 2020
e2e fix(storybook): HMR styling issues (#3065) Mar 18, 2020
flow-typed build: remove link checker script from ci (#3105) Mar 23, 2020
flow build: flow fix me markdown imports (again) (#617) Dec 5, 2018
packages fix(eslint-plugin-baseui): object spread crash (#3113) Mar 25, 2020
proposals docs(skeleton): add proposal (#2399) Feb 6, 2020
scripts build: remove link checker script from ci (#3105) Mar 23, 2020
src fix(list): make item overrides optional (#3134) Mar 28, 2020
vrt feat: support initial selected row ids (#2909) Mar 23, 2020
.babelrc.js fix(flow): transform cup globals before dist copy (#2888) Feb 20, 2020
.dockerignore Run e2e tests in docker (#95) Aug 10, 2018
.eslintignore fix(codemods): removes outdated codemods dir (#2880) Feb 19, 2020
.eslintrc.js feat(vscode): open docs for components (#2732) Jan 28, 2020
.flowconfig fix(flow): resolve errors on other flow versions (#2901) Feb 24, 2020
.gitignore feat: add visual regression test suite (#2001) Oct 10, 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
.nvmrc chore(project): update to the lts nodejs version (#2569) Jan 6, 2020
.prettierignore fix(codemods): removes outdated codemods dir (#2880) Feb 19, 2020
.prettierrc feat(v7): version seven breaking changes (#1207) Jun 4, 2019
CODE_OF_CONDUCT.md docs(coc): adopt a code of conduct (#278) Sep 19, 2018
CONTRIBUTING.md chore(docs): add documentation on commit message format (#2828) Feb 10, 2020
Dockerfile feat(vscode): add skeleton (#2664) Jan 21, 2020
LICENSE chore(*): update license Jan 3, 2020
LICENSE-HEAD chore(*): update license Jan 3, 2020
README.md fix(tree-view): update vrt (#2945) Feb 28, 2020
SECURITY.md docs(security): add a way for folks to contact us (#2322) Nov 15, 2019
TESTING.md Update TESTING.md (#856) Feb 7, 2019
build-now.sh chore(project): update to the lts nodejs version (#2569) Jan 6, 2020
commitlint.config.js chore(*): update license Jan 3, 2020
component-sizes.json feat(tree-view): add keyboard shortcuts and other improvements (#2924) Feb 27, 2020
deploy-npm.sh fix(build): correct some publish script errors (#3094) Mar 20, 2020
deploy-versioned-docs.sh fix(build): correct versioned doc site cname config (#3097) Mar 20, 2020
deploy-vscode.sh fix(build): correct some publish script errors (#3094) Mar 20, 2020
docker-compose.yml fix(ci): expose docker-compose env var to e2e server (#2900) Feb 21, 2020
e2e.Dockerfile fix(docs): build only for the master (#2032) Oct 7, 2019
jest-puppeteer.config.js chore(*): update license Jan 3, 2020
jest.config.js chore(*): update license Jan 3, 2020
jest.e2e.config.js fix(flow): transform cup globals before dist copy (#2888) Feb 20, 2020
jest.e2e.setup.js chore(*): update license Jan 3, 2020
jest.vrt.config.js fix(flow): transform cup globals before dist copy (#2888) Feb 20, 2020
now.json docs(deploy): move to zeit (#3051) Mar 16, 2020
package.json fix(deps): remove main field (#3132) Mar 28, 2020
renovate.json chore(project): add renovate Aug 21, 2018
tsconfig.json chore(ts): disable vscode-extension till lerna adoption (#2676) Jan 22, 2020
yarn.lock build: remove link checker script from ci (#3105) Mar 23, 2020

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>
  );
}

Both Base Web and Styletron come with flow types and TypeScript. All our components are typed and examples have Vanilla, Flow and TypeScript versions. For Styletron + TS, you need to add some additional packages:

yarn add @types/styletron-standard @types/styletron-react @types/styletron-engine-atomic

Example

An example of an application using Base Web can be found here. You can also check how it works on CodeSandbox.

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.