Installing @westpac/ui

Step-by-step setup for new projects using the GEL design system.

When to Use

Reference this guide when a user wants to set up the GEL design system in a new project. This includes installing the necessary packages, configuring Tailwind CSS, setting up theming with brand tokens, and adding brand fonts.

Steps

1. Install Packages

GEL is split into two packages:

• @westpac/ui — All design system components
• @westpac/style-config — Tailwind CSS themes and design tokens