ui-consumer

To use design system components in React, import elements from the @toolr/ui-design library instead of writing native HTML. This ensures styling consistency and enforces core design conventions across your application.

Apply CSS tokens by leveraging semantic custom properties defined in the design system. This promotes consistent styling across components by using predefined values rather than hardcoding CSS properties.

The correct way to handle onChange events in a React design system Select component is to follow the specific handler signature defined by the ui-design conventions. This ensures proper form state management and component behavior.

React component styling may break if utility classes are not composed correctly. The design system requires using the cn() utility for class composition to properly merge classes and prevent styling conflicts.

You should not use native HTML select elements in Toolr consumer applications. The design system enforces using its Select component to maintain visual consistency and adhere to strict design conventions.

The best way to debug styling issues in a React design system is to verify the correct application of semantic CSS tokens and utility classes. Ensure components are imported correctly and conventions like cn() are properly applied.