VStack

The VStack component is a layout component that uses flexbox to vertically layout its children.

It has a display: flex style with flex-direction: column.

How to use

1import { Box, VStack } from '@devup-ui/react'
2
3function App() {
4  return (
5    <VStack>
6      <Box bg="blue" h={25} w={25} />
7      <Box bg="blue" display="flex" h={25} w={25} />
8      <Box bg="blue" h={25} w={25} />
9    </VStack>
10  )
11}
1import { Box, VStack } from '@devup-ui/react'
2
3function App() {
4  return (
5    <VStack>
6      <Box bg="blue" h={25} w={25} />
7      <Box bg="blue" display="flex" h={25} w={25} />
8      <Box bg="blue" h={25} w={25} />
9    </VStack>
10  )
11}

The VStack component defined above will render like this:

1function App() {
2  return (
3    <div className="e f">
4      <div className="a b c"></div>
5      <div className="a b c d"></div>
6      <div className="a b c"></div>
7    </div>
8  )
9}
1function App() {
2  return (
3    <div className="e f">
4      <div className="a b c"></div>
5      <div className="a b c d"></div>
6      <div className="a b c"></div>
7    </div>
8  )
9}

1.a {
2  background: blue;
3}
4.b {
5  height: 100px;
6}
7.c {
8  width: 100px;
9}
10.d {
11  display: flex;
12}
13.e {
14  display: flex;
15}
16.f {
17  flex-direction: column;
18}
1.a {
2  background: blue;
3}
4.b {
5  height: 100px;
6}
7.c {
8  width: 100px;
9}
10.d {
11  display: flex;
12}
13.e {
14  display: flex;
15}
16.f {
17  flex-direction: column;
18}

If you pass a number without a unit to a style property, it will be automatically scaled by 4. This means 1 equals 4px, 2 equals 8px, and so on.

However, the following properties are exceptions and are not multiplied by 4:

• opacity
• flex
• z-index
• line-clamp
• font-weight
• line-height
• scale
• aspect-ratio
• flex-grow
• flex-shrink
• order
• grid-column, grid-column-start, grid-column-end
• grid-row, grid-row-start, grid-row-end
• animation-iteration-count
• tab-size, moz-tab-size, -webkit-line-clamp

Class names and style properties are resolved in the following order:

1. Generate class names for child components.

   • Compute class names and style properties coming from each child (including component defaults, utility classes, and props).

2. Remove duplicate component properties.

   • Deduplicate only when both the key:value pair and the style-order match.

3. If the key:value matches but the style-order differs, the property is not removed — the later/higher-priority style will take precedence.

   • Example: In other words, the display: flex implemented internally by Center and the display: flex provided directly by the user have different style-orders, so they are not removed, and the final style is applied according to priority.

4. Generate the parent component’s className based on the merged result.

   • After child classNames are generated and duplicates (per rules above) removed, compute/merge the parent className and final style output.