Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base.
On npm, you can find Base Web as baseui
.
Add baseui
and its peer dependencies to your project:
# using pnpm
pnpm add baseui@next styletron-react styletron-engine-monolithic
# using npm
npm install baseui@next styletron-react styletron-engine-monolithic
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 (
<StyletronProvider value={engine}>
<BaseProvider theme={LightTheme}>
<Centered>
<StatefulInput />
</Centered>
</BaseProvider>
</StyletronProvider>
);
}
Both Base Web and Styletron come with TypeScript.
To read the documentation, please visit baseweb.design. To preview more component examples, please visit baseweb.design/ladle.