A specific screen width where your design adapts to a different layout, ensuring your site looks good on all devices from phones to large monitors. Strategic breakpoint choices prevent awkward in-between states where content becomes cramped or overly stretched. Framer's breakpoint system lets you customize layouts at each size while maintaining a single source of truth for your design.

A JavaScript function that modifies component behavior without changing the component itself, enabling custom interactions and logic. Overrides let you add functionality like form validation, state management, or API calls while keeping components reusable. This separation of concerns keeps your component library clean while allowing page-specific customizations.

A reusable design element that maintains consistency across your project, from simple buttons to complex navigation systems. Components create a single source of truth—update the main component and all instances reflect the change. In Framer, components can have variants, responsive states, and interactive behaviors.

A predefined state or version of a component, such as primary/secondary buttons or default/hover/active states. Variants keep related component options organized together while enabling smooth transitions between states. Framer's variant system supports complex interaction patterns with animated transitions between any variant combination.

The appearance of a page or component when no content is available, such as an empty search results or new user dashboard. Well-designed empty states guide users toward actions that populate the interface. Include helpful messaging and clear calls to action rather than leaving users stranded.

The visual appearance of an interactive element when it receives keyboard focus, which is critical for accessibility. Focus states must remain clearly visible; do not remove them without providing an equally visible replacement. A strong focus style improves usability for keyboard and assistive-technology users.