# uber/baseweb

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/uber-baseweb).**

8,989 stars · 872 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/uber/baseweb
- Homepage: https://baseweb.design
- awesome-repositories: https://awesome-repositories.com/repository/uber-baseweb.md

## Topics

`component-library` `design-systems` `react` `react-components`

## Description

Base Web is a React UI component library and design system implementation. It provides a collection of reusable interface elements and a responsive web framework designed to enforce a consistent visual language and layout across digital products.

The project focuses on enterprise design systems and responsive web design, offering tools that automatically adapt user interfaces to fit various screen sizes and devices. It incorporates accessible interface design to ensure components follow standards for users with disabilities.

The library utilizes a theme-based design token system and a composition-based architecture. It manages layouts through adaptive responsive breakpoints and employs a CSS-in-JS styling approach to handle visual configurations.

## Tags

### Web Development

- [React Development](https://awesome-repositories.com/f/web-development/react-development.md) — Provides a comprehensive set of pre-made React components and tools for building consistent user interfaces.

### Software Engineering & Architecture

- [Design System Implementations](https://awesome-repositories.com/f/software-engineering-architecture/design-system-implementations.md) — Provides a standardized visual language and framework for building and scaling an enterprise-grade design system.
- [Hook-Based Logic Encapsulations](https://awesome-repositories.com/f/software-engineering-architecture/hook-based-logic-encapsulations.md) — Encapsulates reusable behavioral state and component logic into custom React hooks for shared functionality.

### User Interface & Experience

- [Accessible Interface Design](https://awesome-repositories.com/f/user-interface-experience/accessible-interface-design.md) — Implements accessible interface design to ensure components follow standards for users with disabilities.
- [Component Composition Patterns](https://awesome-repositories.com/f/user-interface-experience/component-composition-patterns.md) — Utilizes a composition-based architecture to build complex UI patterns by nesting small, atomic building blocks.
- [React Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components.md) — Ships a collection of reusable interface elements specifically designed for integration within the React ecosystem.
- [Design Token Systems](https://awesome-repositories.com/f/user-interface-experience/design-token-systems.md) — Features a theme-based design token system that maps abstract variables to concrete values via a central provider.
- [Responsive Design](https://awesome-repositories.com/f/user-interface-experience/responsive-design.md) — Offers tools and techniques for creating adaptive layouts that work seamlessly across desktops, tablets, and mobile devices.
- [Responsive Web Interfaces](https://awesome-repositories.com/f/user-interface-experience/responsive-web-interfaces.md) — Renders flexible user interface components that automatically adapt their layout to fit various screen sizes and devices. ([source](https://cdn.jsdelivr.net/gh/uber/baseweb@main/README.md))
- [Design System Implementations](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/component-implementation-patterns/design-system-implementations.md) — Centralizes visual tokens and styling patterns to enforce a consistent visual language across multiple digital products.
- [Responsive Breakpoints](https://awesome-repositories.com/f/user-interface-experience/responsive-breakpoints.md) — Implements a centralized breakpoint registry to manage layout shifts across different viewport dimensions.
- [Responsive Layout Frameworks](https://awesome-repositories.com/f/user-interface-experience/responsive-layout-frameworks.md) — Provides a library of layout tools and grid-based primitives for managing application structure and screen-size adaptation.
- [CSS-in-JS Implementations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/css-in-js-implementations.md) — Employs a CSS-in-JS approach to define styles as JavaScript objects injected into the document at runtime.