Utilities for setting the height of an element.

React propsCSS Properties
h={size}height: {size};


Use h="auto" to let the browser calculate and select the height for the element. You can use it to unset a specific height:

<x.div h={{ xs: 24, md: 'auto' }} />

Screen Height

Use h="100vh" to make an element span the entire height of the viewport.

<x.div h="100vh" w={12} />

Scaled Height

All values specified in the sizes theme section are automatically applied. Note there is a little difference for scales between 0 and 1 due to conflicting with fluid range. You have to add a suffix s to target values from theme, like 0.5 becomes 0.5s and 1 becomes 1s.

<> <template preview> <x.div display="flex" justifyContent="space-around" alignItems="flex-end" mx="auto" > {['1s', 8, 12, 16, 24].map((v) => ( <x.div key={v} spaceY={4} display="flex" flexDirection="column" alignItems="center" > <x.div h={v} w={8} borderRadius="md" bg="light-blue-500" color="white" fontSize="2xl" fontWeight="extrabold" /> <x.p fontSize="sm" color="light-blue-600" textAlign="center"> h={v} </x.p> </x.div> ))} </x.div> </template> <x.div> <x.div h="1s" /> <x.div h={8} /> <x.div h={12} /> <x.div h={16} /> <x.div h={24} /> </x.div> </>

Fixed Height

Any valid value is accepted in height, numbers are converted to px, other units have to be specified.

<> <template preview> <x.div display="flex" justifyContent="space-around" alignItems="flex-end" mx="auto" > {[123, '12px', '4rem', '3ex'].map((v) => ( <x.div key={v} spaceY={4} display="flex" flexDirection="column" alignItems="center" > <x.div w={8} h={v} borderRadius="md" bg="emerald-500" color="white" fontSize="2xl" fontWeight="extrabold" /> <x.p fontSize="sm" color="emerald-600" textAlign="center"> h={v} </x.p> </x.div> ))} </x.div> </template> <x.div> <x.div h={123} /> <x.div h="12px" /> <x.div h="4rem" /> <x.div h="3ex" /> </x.div> </>

Fluid Height

Values from 0 to 1 are converted into percentages. As a fraction or a number, both are an expression. Of course specifying [value]% is also possible.

<> <template preview> <x.div spaceX={6} display="flex" justifyContent="space-around" alignItems="flex-end" mx="auto" > {[ [ ['1/2', 1 / 2], ['1/2', 1 / 2], ], [ ['2/5', 2 / 5], ['3/5', 3 / 5], ], [ ['0.2', 0.2], ['0.8', 0.8], ], [ ['calc(50% - 40px)', 'calc(50% - 40px)'], ['calc(50% + 40px)', 'calc(50% + 40px)'], ], ].map((v, i) => ( <x.div key={i} borderRadius="md" overflow="hidden" color="white" fontFamily="mono" h={48} > <x.div h={v[0][1]} px={2} py={4} bg="rose-400" textAlign="center"> h={v[0][0]} </x.div> <x.div h={v[1][1]} px={2} py={4} bg="rose-500" textAlign="center"> h={v[1][0]} </x.div> </x.div> ))} </x.div> </template> <x.div display="flex" h={48}> <x.div h={1 / 2}>h=1/2</x.div> <x.div h={1 / 2}>h=1/2</x.div> </x.div> <x.div display="flex" h={48}> <x.div h={2 / 5}>h=2/5</x.div> <x.div h={3 / 5}>h=3/5</x.div> </x.div> <x.div display="flex" h={48}> <x.div h={0.2}>h=0.2</x.div> <x.div h={0.8}>h=0.8</x.div> </x.div> <x.div display="flex" h={48}> <x.div h="calc(50% - 40px)">h=calc(50% - 40px)</x.div> <x.div h="calc(50% + 40px)">h=calc(50% + 40px)</x.div> </x.div> </>


To control the margin of an element at a specific breakpoint, use responsive object notation. For example, adding the property h={{ md: 1 }} to an element would apply the w={1} utility at medium screen sizes and above.

<x.div h={{ xs: 1 / 2, md: 1 }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.


Sizes scale

f you'd like to customize your values for width, height, min-width, min-height, max-width, max-height, all at once, use the theme.sizes section of your theme.

// theme.js export const theme = { sizes: { + sm: '8px', + md: '16px', + lg: '24px', + xl: '48px', }, }

Learn more about customizing the default theme in the theme customization documentation.

Edit this page on GitHub