Get started | GEL Design System · GEL Design System

The GEL design system is built using React. Use it to easily build new React applications, as well as add to existing ones.

Pre-requisites

All GEL components have a couple of peer dependencies so please ensure the following are installed:

GEL can be installed using a package manager like npm, yarn or pnpm.

If you are using a workspace update tailwind.config.js to use the withGEL helper exported by @westpac/ui as follows.

If you are using npm in the workspace update tailwind.config.js as follows.

Also you have to create a postcss.config.js on the root of your application as follows.

For applications using brand fonts add the following options config to the withGEL helper.

Ensure tailwind directives are added to your main css file

This library can be found on npm under @westpac/ui.

Please raise any issues on the Github repo.

GEL is using Tailwind for styling. Visit the Tailwind docs to learn more about installation and usage.