Base Web
Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base.
Base Web provides a robust suite of components out of the box. These include complex, ready-to-use components such as the Datepicker and low-level composable primitives, such as Layer.
Check out the component gallery.
Base Web does the heavy lifting for youâcomponents are built with accessibility being a first-class citizen. Developers using Base Web have the peace of mind that keyboard navigation is reliable and works well with screen readers.
Styletron is the CSS-in-JS engine powering Base Web.
Styletron was designed for high performance, not only in terms of tiny CSS output but also execution time. Unlike many other CSS-in-JS libraries that produce scoped CSS, Styletron doesnât need to perform expensive hash computations. Furthermore, because it operates on individual declarations rather than entire rules, Styletron is able to reduce cache misses and take advantage of extremely granular memoization to avoid unnecessary work.
Base Web VS Code Extension
In order to use Base Web, you need to do a small setup and wrap the root of your application with StyletronProvider
and BaseProvider
components:
There are detailed guides for Styletron set up for the following frameworks:
Even if you are not interested in creating a custom theme, select a theme as part of Base Webâs boilerplate setup.
The theme object itself is nothing special. It is just an object with specific properties (a specific âshapeâ) that can be passed to our ThemeProvider
or BaseProvider
.
A Custom Theme
The overrides
object will be deep-merged with the initial result of mappingprimitives
to all of the theme properties. overrides
is just a convenient shortcut for deep-merging assignments onto your theme object.
Read more about the Theming.
Base Web on Figma Communities
Base Web is available as an open-source gallery on Figma.
Go to Figma Community. Click on the "Base Gallery", and hit "Duplicate" so you can get your copy of the Base Gallery.
Last updated
Was this helpful?