Developer onboarding

Welcome to the Cedar Design System! Use Cedar’s reusable components, tokens and patterns to reduce duplicative work and focus on creating meaningful customer experiences.

If you are new to developing with Cedar, get started by installing Cedar. Once you’ve done that, here's a checklist of everything you need to get up and running.

We build Cedar components using Vue. Get updated on Vue with these resources.

Visit each GitHub repo to learn more about its use. For design tokens, first review how to consume them in our tokens overview before jumping into the repo.

Design tokens

Tokens are a set of variables mapped to the style attributes defining the foundation of REI's visual language, including color, typography and spacing. Tokens are maintained and distributed by Cedar—just fetch the latest version to stay in sync with the visual language of the co-op.

Components

Components are Cedar’s reusable, functional parts. They include more visual components like buttons and more functionally complex components like forms. Components are Vue-based and use Cedar’s tokens to distribute code templates to encapsulate reusable code. Components are maintained and distributed by Cedar—when used in your application, you can stay in sync with the visual language of the co-op.

Component variables

Component variables are a limited set of style mixins for the web. Use them to make DOM elements appear as a Cedar component. Only use component variables when your team is unable to directly consume and use the Vue Cedar components.

Patterns

Patterns are common interfaces, behaviors, flows or component combinations across REI’s ecosystem. They provide guidance to common design problems.

Feeling stuck? Check out some important articles to help troubleshoot.

Learn how you can contribute back to Cedar.

The team is available for questions or one-on-one help. Connect with us on the Slack channel #cedar-user-support, email us at cedar@rei.com, or sign up for office hours (reach out to the team for an invite).