REI's open-source system, Cedar, built from REI's visual language and experience principles, with web, iOS, and Android tokens and Angular components.
Why we like it
The thing we like most about Cedar is an accessibility promise wired into the build, not just written in the docs: its Axe checks run inside the Playwright end-to-end suite, so nothing merges without passing automated a11y tests. It's a Vue 3 system now, MIT-licensed, that grew out of a 2015 Bootstrap fork into a full set of components, tokens and patterns.
The token setup is sensible too: the raw design tokens ship as one package and the component-level variables and mixins as another, so a team can consume the variables without pulling in the whole Vue library.
Where it fits
Cedar fits Vue 3 product teams, especially in retail and e-commerce, who want a mature, accessibility-audited base.
One practical note: REI's typefaces are licensed and not free to redistribute, so you'd license them or swap in your own type.
Ideas to borrow
- 01.
Accessibility practice
Run your accessibility checks (Axe) inside your end-to-end test suite, so a component can't merge until it passes.
- 02.
Token architecture
Publish raw tokens and component-level variables as separate packages, so teams can take the variables without adopting the whole component library.
