Local component library
Welcome to the official component library for Local!
What's included in this component library?
We appreciate curious minds and that's a great question! Take a quick look at our living component documentation here.
In additional to a quickly growing set of React components, we also having SVGs, SASS partials, and more to come!
- Clone and pull down the latest
- Install using
- Start up Styleguidist
- Check it out at
local-components library can be broken down into 3 main parts:
These are the visual elements that make up both Local and its Add-ons.
There are currently 40+ React components in the library.
Each component consists of a
README.md and optional
Try it out for yourself!
- Make changes to the internals of a component through its
.sassfiles (they should live reload)
- Play around with the examples found in the
- Have an idea or bug fix? Submit a pull request.
The component library leverages CSS Modules to manage and scope styles.
These are considered local styles (not to be confused with the Local app
local-components and avoid collisions.
As wonderful as local styles are, there are instances where CSS needs to transcend a component. For that, we make use of global styles. Global styles should be familiar to most as that's all the web had for 20+ years. These styles are intended to be used sparingly as they introduce a lot of challenges when scaling an app with a library of Add-ons and Environments.
The following is an instance where a scoped component may use a combination of local and global styles to achieve a specific result:
This is something we try to avoid and are actively working to whittle down to the bare essentials.
If you'd like to learn more about scoped styles, please check out CSS Modules here.