This is Cedar’s legacy site. Information may be outdated.
Go to Cedar's new documentation site for the latest features and support.

For Developers

representation of a development starting point - the ubiquitous Hello world text...

Welcome to the Cedar Design System. You can use Cedar’s components, tokens, and patterns to free yourself (and your backlog) to continue doing work that inspires you and enhances the user experience for our customers. Visit "About" to learn more about Cedar, design systems, and how you can benefit.

# First steps

If you are just starting out developing with Cedar, you’ll first need to install Cedar. Once you have Cedar installed, here's a checklist of everything you need to get up and running.

# New to Vue?

Cedar components are built using Vue and can only be used in Vue projects. Get updated on Vue with the following resources.

Review the official Vue docs
Follow along with these Vue tutorials & online courses

# Understand Cedar’s Parts

# Tokens

Tokens are an evergreen set of variables mapped to the style attributes that define 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.

Token overview
View all tokens
Set some tokens in a sandbox

# Components

Components are Cedar’s reusable, functional parts such as 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 that 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.

View all components in Github
View button component docs for an example
View a button component example in the sandbox

# Component variables

Component variables are a limited set of style mixins for web that can be used to make DOM elements appear to be a cedar component. Component variables should only be used when your team is unable to directly consume and use the Vue Cedar components. Find out if your team should use component variables and learn more about them or view component variables in Github (opens new window).

# Patterns

Patterns are the principled guidance to common design problems at REI. Patterns may be UI or a variety of other things, like a behavior, flow, or an application motif. For example, the alert pattern gives design and development guidance for scenarios where you alert a user while the form input types pattern offers common form types like street address. Access other patterns under the pattern header in the navigation.

Alert pattern
Form input types pattern

# Troubleshooting

Feeling stuck? Check out some important articles that might help you in your troubleshooting efforts.

Reference past release notes
View the list of deprecated features

# Contribute to Cedar

Coding something that you think others can use? Learn about how you can contribute back to Cedar.

Contribute a token
Build a reusable component
Read the guidelines for contributing to Cedar

# Connect with us

The team is available for questions or one-on-one help. Connect with us on the Slack channel #cedar-user-support (opens new window), join office hours (reach out to the team for an invite), or sign up (opens new window) for 1:1 help.

Up next: Hand-off Process