Reusable React components to use in Local by Flywheel!
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
src style(LOC-197): adjust RadioBlock padding and resize to match designs Jan 14, 2019
styleguide refactor(LOC-282): migrate components to TypeScript Jan 11, 2019
tasks refactor(LOC-282): migrate components to TypeScript Jan 11, 2019
.gitignore refactor(LOC-282): migrate components to TypeScript Jan 11, 2019
LICENSE refactor(LOC-282): migrate components to TypeScript Jan 11, 2019
package.json chore: bump to 7.0.1 Jan 14, 2019
webpack.common.js refactor(LOC-282): migrate components to TypeScript Jan 11, 2019 Hello World! Dec 7, 2018

Local by Flywheel component library

Welcome to the official component library for Local by Flywheel!

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!

Quick start

  1. Clone and pull down the latest
  2. Install using yarn
  3. Start up Styleguidist yarn start
  4. Check it out at http://localhost:6060

Digging deeper

The local-compoennts library can be broken down into 3 main parts:

  1. components
  2. styles
  3. svg


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 .tsx, index.js, and optional .sass file.

Try it out for yourself!

  1. Make changes to the internals of a component through its .tsx and .sass files (they should live reload)
  2. Play around with the examples found in the files
  3. 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 😉) Scoped local styles are a beautiful thing that allow Local to isolate components, run Add-ons with multiple versions of 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:

:global(.WindowsToolbar .DragRegion)

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.


Coming soon!