Flex

The props declared for Flex, generated from the types @proyecto-viviana/ui ships.

Import

import { Flex } from "@proyecto-viviana/ui";

Props

Props for Flex in @proyecto-viviana/ui
Prop	Type	Default	Description
`direction`	'row' \| 'column' \| 'row-reverse' \| 'column-reverse'	`'row'`	The flex direction.
`gap`	string \| number	`'0'`	The gap between items. Accepts a t-shirt size, a number (spacing scale), or a raw CSS length.
`wrap`	false \| true \| 'wrap' \| 'nowrap' \| 'wrap-reverse'	`false`	Whether items should wrap.
`alignItems`	'start' \| 'end' \| 'center' \| 'stretch' \| 'baseline'	—	The alignment of items.
`justifyContent`	'start' \| 'end' \| 'center' \| 'between' \| 'around' \| 'evenly'	—	The justification of items.
`inline`	false \| true	—	Whether the flex container is inline.
`class`	string	—	Additional CSS class name.
`style`	JSX.CSSProperties	—	Additional inline styles.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	The content.

Declared in packages/viviana-ui/src/layout/Flex.tsx.

Grid props

Props for Grid in @proyecto-viviana/ui
Prop	Type	Default	Description
`columns`	string \| number	—	The number of columns, or a grid-template-columns value.
`rows`	string \| number	—	The number of rows, or a grid-template-rows value.
`gap`	string \| number	—	The gap between items. Accepts a t-shirt size, a number (spacing scale), or a raw CSS length.
`columnGap`	string \| number	—	The column gap.
`rowGap`	string \| number	—	The row gap.
`areas`	string[]	—	Named grid areas (grid-template-areas).
`alignItems`	'start' \| 'end' \| 'center' \| 'stretch'	—	The alignment of items.
`justifyItems`	'start' \| 'end' \| 'center' \| 'stretch'	—	The justification of items.
`inline`	false \| true	—	Whether the grid is inline.
`class`	string	—	Additional CSS class name.
`style`	JSX.CSSProperties	—	Additional inline styles.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	The content.

Declared in packages/viviana-ui/src/layout/Grid.tsx.

Props marked solidaria or solidaria-components come from the headless layer underneath and behave the same in both registers. Components that wrap a DOM element also accept that element's standard attributes, which are left out here on purpose — listing them would bury the props that are actually ours.