Using @westpac/ui

Provides guidance on using the GEL (Global Experience Language) design system component library for Westpac Group applications. This package may also be referred to as "GEL-Next", "GEL Next" or "GEL v1.0.0". Always check the version in package.json to confirm you're referencing the correct documentation as some consumers may have @westpac/ui v0.x installed which has different capabilities and patterns. Or have a completely different package also referred to as "GEL" installed.

When to Use

Reference this skill when a user has @westpac/ui installed and is asking a question relating to the @westpac/ui or GEL. It should also be used when components from @westpac/ui are mentioned by name, or when the question is about a UI pattern that may be achievable with @westpac/ui components.

Related Skills (optional)

• installing-westpac-ui — Full setup guide for new projects (installation, CSS, theming, brand fonts, ESLint)
• migrating-to-westpac-ui-v1 — Migration guide from pre-1.0 to v1.0 (breaking changes, token codemod, component API changes)

Imports

Components can be imported from the main package or individually:

// Main import (tree-shakable)