Education Design System (EDS) is a repository of presentational components used to build React-based products for Chan Zuckerberg Initiative.

First install the package.

# via npm
npm install --save @chanzuckerberg/eds

# or, if using Yarn
yarn add @chanzuckerberg/eds

Import the EDS stylesheet and tokens somewhere in your app, e.g. an init.ts or app.ts file:

import '@chanzuckerberg/eds/index.css';
// optionally import EDS font faces
// import '@chanzuckerberg/eds/fonts.css';

EDS components are designed for the Graphik font, but you may use other fonts by re-defining the --eds-font-family-primary CSS property. We also surface an --eds-font-size-base property to set your base rem font size, eg:

html {
  font-size: var(--eds-font-size-base);
}

The EDS Tailwind theme provides EDS color tokens and screens. Import the tailwind config into the app's tailwind config and supply the content property for use:

const edsConfig.theme = require('@chanzuckerberg/eds/tailwind.config');

module.exports = {
  content: ['./app/**/*.{ts,tsx,jsx,js}'],
  theme: edsConfig.theme,
};

Refer to the tokens tailwind section for usage guide.

Import any of the components from this package

import { Heading } from '@chanzuckerberg/eds';

and then use them in your React components

<Heading variant="neutral-strong" size="h2">
  Coffee!
</Heading>

• Node - if using nodenv, you can install the right version with nodenv install
• Yarn - install through either npm (npm install -g yarn) or homebrew (brew install yarn)

Please refer to the following documentation to learn how to work with this codebase:

• Code guidelines
• Tokens
• Components
• Typography
• Layout
• Icons

• Contribution guidelines - Please refer to these guidelines to learn how to contribute to the library.
• Release guidelines - Please refer to these guidelines for instructions on how to publish a new version of the library.

For questions, feature requests, bugs, and more,feel free to reach out in #help-edu-design-system or office hours if you have additional questions (note: these resources can only be accessed by CZI employees).

This project is under active development. If you would like to contribute, check out the contribution guidelines or open an issue.

This project is governed under the Contributor Covenant code of conduct.

See our Security Readme.