Skip to content

Stack

<ts-stack> vv0.4.0

The ts-stack component.

Open in Storybook for interactive demos.

<ts-stack align="stretch" gap="3">Content</ts-stack>
PropertyAttributeTypeDefaultDescription
alignalign"center" | "end" | "start" | "stretch"'stretch'Cross-axis alignment of items.
gapgapstring'3'Spacing token number controlling the gap between items.
NameDescription
*(default)*Default slot for stacked content.

Use ::part() to style internal elements:

PartDescription
baseThe stack container.
ts-stack::part(base) {
/* your custom styles */
}
<ts-stack align="stretch" gap="3">Content</ts-stack>
import { TsStack } from '@tessera-ui/react';
<TsStack align="stretch" gap="3">Content</TsStack>