ClassNames Usage and Conventions

1. Import and Component Props Pattern

• Import classNames from 'classnames' alongside other third-party imports
• The className prop must be optional: className?: string
• Always merge the consumer's className last so it can override defaults:

className={classNames('default-classes', className)}

2. Breakpoint Order (Mobile-First)

Order classes from smallest to largest screen size — always:

base (no prefix) → xs: → s: → sm: → md: → m: → lg: → xl: → 2xl: