Hopper

Div

A specialized component to represent an HTML div element.

AI Tip Want to skip the docs? Use the MCP Server

Usage

A div component accepts all the div HTML element attributes and Hopper styled component props.

Best Practices

Div is a low-level primitive that provides styled system props to a standard HTML div element. However, it should not be your first choice for layouts. Hopper provides specialized layout components (Flex, Inline, Stack, Grid) that are more semantic, maintainable, and expressive for common layout patterns.

Div should:

  • Be used sparingly, only when layout components don't fit your needs.
  • Not be used as a wrapper just to add spacing or styling when you can apply those props directly to the child component.
  • Not be used for layouts that can be achieved with Flex, Inline, Stack, or Grid.
  • Be used for semantic grouping or when you need a generic container with styled system props.

Do's and Don'ts

Do
Use Inline, Stack, or Flex for layouts instead of Div
Don't
Use Div with display flex when layout components are more semantic
Do
Apply styling props directly to components that support them
Don't
Wrap components in Div just to add spacing or styling