Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/uber/baseweb
A React Component library implementing the Base design language
https://github.com/uber/baseweb
component-library design-systems react react-components
Last synced: 7 days ago
JSON representation
A React Component library implementing the Base design language
- Host: GitHub
- URL: https://github.com/uber/baseweb
- Owner: uber
- License: mit
- Created: 2018-03-09T01:32:10.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-09-25T21:48:56.000Z (about 1 month ago)
- Last Synced: 2024-10-22T23:31:57.466Z (13 days ago)
- Topics: component-library, design-systems, react, react-components
- Language: TypeScript
- Homepage: https://baseweb.design
- Size: 290 MB
- Stars: 8,729
- Watchers: 78
- Forks: 829
- Open Issues: 163
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-react-cn - baseweb - Base Web is a foundation for initiating, evolving, and unifying web products. (Uncategorized / Uncategorized)
- stars - uber/baseweb
- awesome-react - baseweb - Base Web is a foundation for initiating, evolving, and unifying web products. (Uncategorized / Uncategorized)
- awesome-react - baseweb - Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base. ![](https://img.shields.io/github/stars/uber/baseweb.svg?style=social&label=Star) (UI Frameworks / style)
- awesome-learning-resources - baseweb - Base Web is a foundation for initiating, evolving, and unifying web products. (Uncategorized / Uncategorized)
- awesome-list - baseweb
- best-of-react - GitHub
- StarryDivineSky - uber/baseweb
- awesome-react - baseweb - A React Component library implementing the Base design language ` 📝 3 days ago` (React [🔝](#readme))
- awesome - uber/baseweb - A React Component library implementing the Base design language (TypeScript)
- jimsghstars - uber/baseweb - A React Component library implementing the Base design language (TypeScript)
- my-awesome - uber/baseweb - library,design-systems,react,react-components pushed_at:2024-09 star:8.7k fork:0.8k A React Component library implementing the Base design language (TypeScript)
README
**Uber is hiring in Amsterdam. Do you want to work on Base Web and other things? Please apply!**
Base Web React Components
- [Documentation](https://baseweb.design)
- [Component catalog](https://baseweb.design/ladle)
- [Stackblitz playground](https://baseweb.design/new)⚠️ **Maintenance status**. We are limiting our engagement with this repository while still mirroring our internal development. For more details, please check [Open Source Engagement and Future](https://baseweb.design/blog/open-source-engagement/). If you are an Uber developer and looking to open an issue, use this [link](https://t.uber.com/ui-platform-bug-2) or [contribute](https://p.uber.com/base-code).
**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:
```bash
# using pnpm
pnpm add baseui@next styletron-react styletron-engine-monolithic# using npm
npm install baseui@next styletron-react styletron-engine-monolithic
``````javascript
import { Client as Styletron } from "styletron-engine-monolithic";
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 (
);
}
```Both Base Web and Styletron come with [TypeScript](https://www.typescriptlang.org/index.html).
## Docs
To read the documentation, please visit [baseweb.design](https://baseweb.design). To preview more component examples, please visit [baseweb.design/ladle](https://baseweb.design/ladle).