baseweb

(★ 9,002)

A React Component library implementing the Base design language

File Explorer

Download Latest Version (.zip)

Showing a partial file list — download the zip above to see everything.

- - 1.bug.md
  - 2.feature.md
  - 3.uber.employee.md
- - pr-check.yml
  - release.yml
- CODEOWNERS
- PULL_REQUEST_TEMPLATE.md
- pre-commit
- components.tsx
- - just-clone.d.ts
  - just-omit.d.ts
- - align-left-icon.jsx
  - align-right-icon.jsx
  - anchor.jsx
  - blog.jsx
  - bulb.jsx
  - cheat-sheet.jsx
  - code-box.tsx
  - code-icon.jsx
  - code.jsx
  - direction-context.jsx
  - example.jsx
  - exports.jsx
  - floating-marker-container.jsx
  - footer.jsx
  - gallery.jsx
  - github-logo.jsx
  - header-navigation.jsx
  - hooks.jsx
  - json.jsx
  - layout.jsx
  - map-marker-sizing-table.jsx
  - markdown-elements.jsx
  - meta-favicons.jsx
  - meta-seo.jsx
  - overrides.jsx
  - pencil-icon.jsx
  - posts.jsx
  - search.jsx
  - sidebar.jsx
  - skip-to-content.jsx
  - slack-logo.jsx
  - table-guide-notification.jsx
  - table-of-contents.jsx
  - unstable-warning.jsx
  - version-selector.jsx
- - ga.ts
  - polyfills.js
  - slugify.jsx
  - styletron.jsx
- - base-web-white.svg
  - base-web.svg
- - _app.jsx
  - _document.jsx
  - cheat-sheet.mdx
  - index.jsx
- - android-chrome-192x192.png
  - apple-touch-icon.png
  - browserconfig.xml
  - favicon-16x16.png
  - favicon-32x32.png
  - favicon.ico
  - fonts.css
  - mstile-150x150.png
  - safari-pinned-tab.svg
  - site.webmanifest
- .gitignore
- cheat-sheet.jsx
- mdx-components.tsx
- next-env.d.ts
- next.config.js
- posts.jsx
- routes.jsx
- tsconfig.json
- - .eslintrc.js
  - .flowconfig
  - .gitignore
  - .npmignore
  - .npmrc
  - babel.config.js
  - jest.config.js
  - package.json
  - README.md
  - yarn.lock
- - .env
  - .eslintignore
  - .gitignore
  - .npmrc
  - .vscodeignore
  - package.json
  - README.md
  - tsconfig.extension.json
  - tsconfig.json
  - tslint.json
  - vsc-extension-quickstart.md
  - yarn.lock
- - .eslintrc.js
  - index.js
  - jest.config.js
  - package.json
  - README.md
  - yarn.lock
- .babelrc.js
- publish-next.js
- transform-cup-globals.js
- - a11y.tsx
  - index.ts
  - types.ts
- - accordion.tsx
  - constants.ts
  - index.ts
  - locale.ts
  - panel.tsx
  - stateful-panel-container.ts
  - stateful-panel.tsx
  - stateless-accordion.tsx
  - styled-components.ts
  - types.ts
- - app-nav-bar.tsx
  - constants.ts
  - index.ts
  - mobile-menu.tsx
  - styled-components.ts
  - types.ts
  - user-menu.tsx
  - user-profile-tile.tsx
  - utils.ts
- - aspect-ratio-box-body.tsx
  - aspect-ratio-box.tsx
  - index.ts
  - types.ts
- - avatar.tsx
  - index.ts
  - styled-components.ts
  - types.ts
- - badge.tsx
  - constants.ts
  - hint-dot.tsx
  - index.ts
  - notification-circle.tsx
  - styled-components.ts
  - types.ts
  - utils.ts
- - banner.tsx
  - constants.ts
  - index.ts
  - styled-components.ts
  - types.ts
- - block.tsx
  - index.ts
  - styled-components.ts
  - types.ts
- - bottom-navigation.tsx
  - index.ts
  - nav-item.tsx
  - panel.tsx
  - selector.tsx
  - styled-components.ts
  - types.ts
- - breadcrumbs.tsx
  - index.ts
  - locale.ts
  - styled-components.ts
  - types.ts
- - button-internals.tsx
  - button.tsx
  - constants.ts
  - default-props.ts
  - index.ts
  - styled-components.ts
  - types.ts
  - utils.ts
- - button-dock.tsx
  - index.ts
  - styled-components.ts
  - types.ts
- - button-group.tsx
  - constants.ts
  - index.ts
  - locale.ts
  - stateful-button-group.tsx
  - stateful-container.ts
  - styled-components.ts
  - types.ts
- - button-timed.tsx
  - index.ts
  - styled-components.ts
  - types.ts
  - utils.ts
- - card.tsx
  - index.ts
  - styled-components.ts
  - types.ts
- - checkbox.tsx
  - constants.ts
  - index.ts
  - stateful-checkbox-container.ts
  - stateful-checkbox.tsx
  - styled-components.ts
  - types.ts
- - checkbox.tsx
  - constants.ts
  - index.ts
  - stateful-checkbox-container.ts
  - stateful-checkbox.tsx
  - styled-components.ts
  - types.ts
- - combobox.tsx
  - index.ts
  - styled-components.ts
  - types.ts
- - column-anchor.tsx
  - column-boolean.tsx
  - column-categorical.tsx
  - column-custom.ts
  - column-datetime.tsx
  - column-numerical.tsx
  - column-row-index.tsx
  - column-string.tsx
  - column.tsx
  - constants.ts
  - data-table.tsx
  - filter-menu.tsx
  - filter-shell.tsx
  - header-cell.tsx
  - index.ts
  - locale.ts
  - measure-column-widths.tsx
  - stateful-container.ts
  - stateful-data-table.tsx
  - text-search.tsx
  - types.ts
- - calendar-header.tsx
  - calendar.tsx
  - constants.ts
  - datepicker.tsx
  - datepicker_DO_NOT_USE.tsx
  - day.tsx
  - index.ts
  - locale.ts
  - month.tsx
  - stateful-calendar.tsx
  - stateful-container.ts
  - stateful-datepicker.tsx
  - styled-components.ts
  - types.ts
  - week.tsx
- - constants.ts
  - dialog.tsx
  - index.ts
  - styled-components.ts
  - types.ts
- - constants.ts
  - index.tsx
  - styled-components.ts
  - types.ts
- - constants.ts
  - index.ts
  - list.tsx
  - stateful-list-container.ts
  - stateful-list.tsx
  - styled-components.ts
  - types.ts
- - close-icon.tsx
  - constants.ts
  - drawer.tsx
  - index.ts
  - locale.ts
  - styled-components.ts
  - types.ts
- - constants.ts
  - file-uploader.tsx
  - index.ts
  - locale.ts
  - styled-components.ts
  - types.ts
  - utils.ts
- - file-uploader-basic.tsx
  - index.ts
  - locale.ts
  - styled-components.ts
  - types.ts
- - flex-grid-item.tsx
  - flex-grid.tsx
  - index.ts
  - types.ts
- - form-control.tsx
  - index.ts
  - styled-components.ts
  - types.ts
- - constants.ts
  - examples-icons.ts
  - header-navigation.tsx
  - index.ts
  - styled-components.ts
  - types.ts
- - heading-level.tsx
  - heading.tsx
  - index.ts
  - types.ts
- - constants.ts
  - helper-steps.tsx
  - helper.tsx
  - index.ts
  - stateful-helper.tsx
  - styled-components.ts
  - types.ts
- - base-provider.tsx
  - i18n-interpolation.ts
  - overrides.tsx
  - react-helpers.tsx
  - responsive-helpers.ts
  - strings.ts
  - types.ts
- - alert.tsx
  - arrow-down.tsx
  - arrow-left.tsx
  - arrow-right.tsx
  - arrow-up.tsx
  - blank.tsx
  - build-icons.js
  - calendar.tsx
  - check-indeterminate.tsx
  - check.tsx
  - chevron-down-small.tsx
  - chevron-down.tsx
  - chevron-left-small.tsx
  - chevron-left.tsx
  - chevron-right-small.tsx
  - chevron-right.tsx
  - chevron-up-small.tsx
  - chevron-up.tsx
  - circle-check-filled.tsx
  - circle-exclamation-point-filled.tsx
  - delete-alt.tsx
  - delete.tsx
  - filter.tsx
  - grab.tsx
  - hide.tsx
  - icon-exports.ts
  - icon-template.txt
  - icon.tsx
  - index.ts
  - menu.tsx
  - omit-dollar-prefixed-keys.ts
  - overflow.tsx
  - paperclip-filled.tsx
  - plus.tsx
  - README.md
  - search.tsx
  - show.tsx
  - spinner.tsx
  - styled-components.ts
  - trash-can-filled.tsx
  - triangle-down.tsx
  - triangle-left.tsx
  - triangle-right.tsx
  - triangle-up.tsx
  - types.ts
  - upload.tsx
- - base-input.tsx
  - constants.ts
  - index.ts
  - input.tsx
  - masked-input.tsx
  - stateful-container.ts
  - stateful-input.tsx
  - styled-components.ts
  - types.ts
  - utils.ts
- - constants.ts
  - index.ts
  - layer.tsx
  - layers-manager.tsx
  - tether.ts
  - types.ts
  - utils.ts
- - layout_1.png
  - layout_2.png
  - layout_3.png
  - README.md
- - cell.tsx
  - constants.ts
  - grid.tsx
  - index.ts
  - styled-components.ts
  - types.ts
- - index.tsx
  - styled-components.ts
- - constants.ts
  - index.ts
  - list-heading.tsx
  - list-item-label.tsx
  - list-item.tsx
  - menu-adapter.tsx
  - styled-components.ts
  - types.ts
  - utils.ts
- - en_US.ts
  - es_AR.ts
  - index.tsx
  - tr_TR.ts
  - types.ts
- - badge-enhancer.tsx
  - calculate-offsets.ts
  - constants.ts
  - drag-shadow.tsx
  - fixed-marker.tsx
  - floating-marker.tsx
  - floating-route-marker.tsx
  - index.ts
  - label-enhancer.tsx
  - location-puck.tsx
  - needle.tsx
  - pin-head.tsx
  - styled-components.ts
  - types.ts
- - constants.ts
  - index.ts
  - locale.ts
  - maybe-child-menu.tsx
  - menu.tsx
  - nested-menus.tsx
  - option-list.tsx
  - option-profile.tsx
  - stateful-container.tsx
  - stateful-menu.tsx
  - styled-components.tsx
  - types.ts
  - utils.ts
- - constants.ts
  - index.ts
  - message-card.tsx
  - styled-components.ts
  - types.ts
  - utils.ts
- - constants.ts
  - index.ts
  - mobile-header.tsx
  - styled-components.ts
  - types.ts
- - close-icon.tsx
  - constants.ts
  - focus-once.ts
  - index.ts
  - locale.ts
  - modal-button.tsx
  - modal.tsx
  - styled-components.ts
  - types.ts
- - index.ts
  - notification.tsx
- - constants.ts
  - index.ts
  - page-control.tsx
  - styled-components.ts
  - types.ts
- - constants.ts
  - index.ts
  - locale.ts
  - pagination.tsx
  - stateful-container.ts
  - stateful-pagination.tsx
  - styled-components.ts
  - types.ts
  - utils.ts
- - custom-cards.config.ts
  - index.ts
  - payment-card.tsx
  - stateful-payment-card.tsx
  - styled-components.ts
  - types.ts
  - utils.ts
- - base-country-picker.tsx
  - constants.ts
  - country-picker.tsx
  - country-select-dropdown.tsx
  - country-select.tsx
  - default-props.ts
  - flag.tsx
  - index.ts
  - phone-input-lite.tsx
  - phone-input-next.tsx
  - phone-input.tsx
  - README.md
  - stateful-phone-input-container.ts
  - stateful-phone-input-next.tsx
  - stateful-phone-input.tsx
  - styled-components.tsx
  - types.ts
  - utils.ts
- - default-props.ts
  - index.ts
  - pin-code.tsx
  - stateful-pin-code-container.ts
  - stateful-pin-code.tsx
  - styled-components.ts
  - types.ts
- - constants.ts
  - default-props.ts
  - index.ts
  - popover.tsx
  - stateful-container.ts
  - stateful-popover.tsx
  - styled-components.ts
  - types.ts
  - utils.ts
- - constants.ts
  - index.ts
  - progressbar-rounded.tsx
  - progressbar.tsx
  - styled-components.tsx
  - types.ts
- - constants.ts
  - index.ts
  - numbered-step.tsx
  - progress-steps.tsx
  - step.tsx
  - styled-components.ts
  - types.ts
- - constants.ts
  - index.ts
  - radio.tsx
  - radiogroup.tsx
  - stateful-radiogroup-container.ts
  - stateful-radiogroup.tsx
  - styled-components.ts
  - types.ts
- - constants.ts
  - index.ts
  - radio-context.tsx
  - radio.tsx
  - radiogroup.tsx
  - stateful-radiogroup-container.ts
  - stateful-radiogroup.tsx
  - styled-components.ts
  - types.ts
- - emoticon-rating.tsx
  - index.ts
  - star-rating.tsx
  - styled-components.ts
  - svg-icons.ts
  - types.ts
  - utils.ts
- - constants.ts
  - index.ts
  - segment.ts
  - segmented-control.tsx
  - stateful-segmented-control.tsx
  - styled-components.ts
  - types.ts
  - utils.ts
- - autosize-input.tsx
  - constants.ts
  - default-props.ts
  - dropdown.tsx
  - index.ts
  - locale.ts
  - multi-select.tsx
  - multi-value.tsx
  - select-component.tsx
  - select.tsx
  - single-select.tsx
  - stateful-select-container.ts
  - stateful-select.tsx
  - styled-components.ts
  - types.ts
  - value.tsx
- - action-button.tsx
  - index.ts
  - sheet.tsx
  - styled-components.ts
  - types.ts
- - constants.ts
  - index.ts
  - nav-item.tsx
  - nav.tsx
  - README.md
  - side-navigation-next.tsx
  - stateful-container.ts
  - stateful-nav.tsx
  - styled-components.tsx
  - types.ts
- - index.ts
  - skeleton.tsx
  - styled-components.ts
  - types.ts
- - constants.ts
  - index.ts
  - slider.tsx
  - stateful-slider-container.ts
  - stateful-slider.tsx
  - styled-components.ts
  - types.ts
- - constants.ts
  - default-props.ts
  - index.ts
  - sliding-button.tsx
  - styled-components.ts
  - types.ts
- - constants.ts
  - index.ts
  - snackbar-context.tsx
  - snackbar-element.tsx
  - styled-components.ts
  - types.ts
- - constants.ts
  - index.tsx
  - styled-components.ts
  - types.ts
- - index.ts
  - stepper.tsx
  - styled-components.ts
  - types.ts
- - as-primary-export-hoc.tsx
  - index.ts
  - styled.tsx
  - theme-provider.tsx
  - types.ts
  - util.ts
- - constants.ts
  - index.ts
  - stateful-switch-container.ts
  - stateful-switch.tsx
  - styled-components.ts
  - switch.tsx
  - types.ts
- - index.ts
  - styled-components.ts
  - system-banner.tsx
  - types.ts
- - constants.ts
  - filter.tsx
  - index.ts
  - sortable-head-cell.tsx
  - styled-components.tsx
  - table.tsx
  - types.ts
- - index.ts
  - sortable-head-cell.ts
  - styled-components.tsx
- - constants.ts
  - index.ts
  - styled-components.ts
  - table-builder-column.ts
  - table-builder.tsx
  - table.tsx
  - types.ts
- - constants.ts
  - index.ts
  - stateful-tabs.tsx
  - styled-components.ts
  - tab.ts
  - tabs.tsx
  - types.ts
  - utils.ts
- index.ts
- overrides.ts
.gitignore
.lintstagedrc
CODE_OF_CONDUCT.md
LICENSE
package-lock.json
package.json
pnpm-lock.yaml
PUBLISHING.md
README.md

🚀 Installation Guide

1. Get the code

git clone https://github.com/uber/baseweb

Downloads the entire project code from GitHub to your computer.

cd baseweb

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

pnpm add baseui@next styletron-react styletron-engine-monolithic

Type this command into your terminal and run it.

npm install baseui@next styletron-react styletron-engine-monolithic

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

baseweb

File Explorer

🚀 Installation Guide

2. Node.js

Today's picks

Was this content helpful?

Recent Feedback

baseweb

File Explorer

🚀 Installation Guide

2. Node.js

Today's picks

Was this content helpful?

Recent Feedback

Download README