Skip to content
A React Component library implementing the Base design language
JavaScript TypeScript Other
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.buildkite build(compose): do not expose port to host machine (#2146) Oct 21, 2019
.github chore(project): remove actions (#2304) Nov 13, 2019
.storybook feat(storybook): add dark background for dark mode (#1829) Sep 3, 2019
babel chore(license): update years (#1284) May 15, 2019
docs chore(github): update refs to the new url (#2062) Oct 10, 2019
documentation-site feat(modal): add unstable prop for the backdrop scroll functionality (#… Nov 21, 2019
e2e test(vrt): fix flakey vrt tests (#2311) Nov 20, 2019
flow-typed test(ci): remove screener from ci pipeline (#2135) Oct 18, 2019
flow build: flow fix me markdown imports (again) (#617) Dec 5, 2018
packages/baseui-codemods v2.0.5 Oct 14, 2019
proposals feat(heading): add component Heading (#1311) May 23, 2019
scripts chore(component-sizes): update to use the new script (#2325) Nov 18, 2019
src feat(modal): add unstable prop for the backdrop scroll functionality (#… Nov 21, 2019
vrt test(vrt): fix flakey vrt tests (#2311) Nov 20, 2019
.babelrc.js fix(build): explicitly targeting browsers (#2278) Nov 8, 2019
.dockerignore Run e2e tests in docker (#95) Aug 10, 2018
.eslintignore feat(docs): api cheat sheet (#1761) Aug 19, 2019
.eslintrc.js chore(deps): update dependency eslint-plugin-flowtype to v4 (#1730) Aug 12, 2019
.flowconfig chore(build): various improvements (#2031) Oct 7, 2019
.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 Move Typescript definitions into our repo (#1538) Jul 12, 2019
.prettierignore feat(types): themed-styled functions (#1390) Jun 26, 2019
.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(github): update refs to the new url (#2062) Oct 10, 2019
Dockerfile chore(node): update to 12.13.0 (#2163) Oct 23, 2019
LICENSE chore(license): update years (#1284) May 15, 2019
LICENSE-HEAD chore(license): update years (#1284) May 15, 2019
README.md feat(v9): black is the new blue (#1836) Sep 10, 2019
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 fix(package): remove engine restriction (#2067) Oct 10, 2019
commitlint.config.js chore(license): update years (#1284) May 15, 2019
component-sizes.json chore(component-sizes): update to use the new script (#2325) Nov 18, 2019
deploy.sh chore(github): update refs to the new url (#2062) Oct 10, 2019
docker-compose.yml test(vrt): fix prs on forked repos (#2147) Oct 21, 2019
e2e.Dockerfile fix(docs): build only for the master (#2032) Oct 7, 2019
jest-puppeteer.config.js test(vrt): add dark theme support (#2130) Oct 18, 2019
jest.config.js feat(yard): add transforms and code generation tests, fix some bugs (#… Sep 24, 2019
jest.e2e.config.js test(e2e): add screenshots (#2060) Oct 10, 2019
jest.e2e.setup.js test(e2e): add screenshots (#2060) Oct 10, 2019
jest.vrt.config.js feat: add visual regression test suite (#2001) Oct 10, 2019
netlify.toml docs(build): deploy buildkite (#2010) Oct 4, 2019
now.json docs(now): move to now (#2006) Oct 3, 2019
package.json Release v9.21.1 (#2355) Nov 20, 2019
renovate.json chore(project): add renovate Aug 21, 2018
tsconfig.json docs(yard): add radio (#1983) Oct 2, 2019
webpack.e2e.config.js fix(avatar): use a single pic in the screener test (#1240) May 7, 2019
yarn.lock chore(component-sizes): update to use the new script (#2325) Nov 18, 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>
  );
}

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.