LeafyGreen Authoring Conventions

Apply these conventions whenever writing or editing React components in a project that uses @leafygreen-ui/* packages.

Always prefer LeafyGreen components over plain HTML

When a user asks to add any UI element — in plain language, from a Figma design, or anywhere else — always check if a LeafyGreen component exists for it first. Never use a plain HTML element (<button>, <input>, <select>, etc.) when an @leafygreen-ui equivalent is available.

Common mappings: