Skip to content
The Accessible Foundation for React Apps and Design Systems.
Branch: master
Clone or download
Latest commit 99c687b Apr 30, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook Upgraded Gatsby, started on Tabs Mar 18, 2019
packages More tooltip notes Apr 30, 2019
shared Fixed building packages on Windows Jan 4, 2019
www More tooltip notes Apr 30, 2019
.eslintrc Let’s do this thing 😳 Jul 31, 2018
.gitignore Storybook junk Aug 27, 2018
.npmrc Remove package-lock.json Aug 28, 2018 add COC Sep 18, 2018
LICENSE Moar website fun Aug 25, 2018 typo Apr 28, 2019
lerna.json Building and publishing might work? Jul 31, 2018
package.json stop publishing everything all the time Apr 30, 2019
yarn.lock update yarn.lock Apr 4, 2019

Welcome to Reach UI Development ♿️

Thanks for getting involved with Reach UI development!

Looking for the documentation?

Getting Started

This project uses

  • Lerna to manage multiple libs
  • Storybook for a great development experience
  • Gatsby for a blazing fast website.
  • Jest for painless testing.

Before doing anything else, run these commands:

git clone
cd reach-ui
yarn install
yarn bootstrap
yarn build

Root Repo Scripts:

yarn bootstrap    # bootstraps lerna so all dependencies get
                  # linked for cross-component development

yarn start        # starts storybook server

yarn test         # runs tests in all packages

yarn build        # builds all packages

yarn release      # publishes changed packages

www directory scripts

The website uses Gatsby v2 with Gatsby MDX powering most of the pages. It is deployed with now

yarn start        # starts the website

yarn build        # builds the production site to "public/"

yarn stage        # deploys the site with

yarn deploy       # alias the latest deploy to production

Running / Writing Examples

First do the steps in "Getting started", then start the Storybook server:

yarn start

Next, put a file in packages/<component-dir>/examples/<name>.example.js and make it look like this:

import React from "react";

// The name of the example, you must export it as `name`
export let name = "Basic";

// The example to render, you must name it `Example`
export let Example = () => <div>Cool cool cool</div>;

Now you can edit the files in packages/* and storybook will automatically reload your changes.

Note: If you change an internal dependency you will need to run yarn build again. For example, if working on MenuButton requires a change to Rect (an internal dependency of MenuButton), you will need to run yarn build for the changes to Rect to show up in your MenuButton example.

Running / Writing Tests

First do the steps in "Getting Started", then:

yarn test

Or if you want to run the tests as you edit files:

yarn test --watch

Often you'll want to just test the component you're working on:

cd packages/<component-path>
yarn test --watch

Development Plans

The components to be built come from the the Aria Practices Design Patterns and Widgets. Here is a table of the components and their status.

- Released
🛠 - Planning to Build
- Might Build?

Status Name
🛠 Accordion
Alert Dialog
🛠 Carousel
🛠 Checkbox
🛠 Combo Box
Dialog (Modal)
🛠 Disclosure
🛠 Listbox
🛠 Menu or Menu bar
Menu Button
🛠 Radio Group
🛠 Slider
🛠 Slider (Multi-Thumb)
🛠 Tree View
Window Splitter
You can’t perform that action at this time.