Components
Data Stack
Compose responsive detail and form layouts with rows and stacks of label-value pairs.
DataStackLayout is the outer vertical wrapper. DataStackRow groups related fields into a
horizontal row on desktop and stacks them on smaller screens. DataStack is one label-value unit,
where DataStackTitle is the label and DataStackValue is the content (text, input, custom UI).
Usage
import {
DataStack,
DataStackColumn,
DataStackGrid,
DataStackLayout,
DataStackRow,
DataStackTitle,
DataStackValue,
} from "@tulip-systems/core/components";<DataStackLayout>
<DataStackRow>
<DataStack>
<DataStackTitle>Label</DataStackTitle>
<DataStackValue>Value</DataStackValue>
</DataStack>
</DataStackRow>
</DataStackLayout>Examples
Read-only Details
- Company
- Tulip Systems
- Plan
- Enterprise
- Region
- EU-West
- Created
- 2026-01-12
- Last Updated
- 2026-03-09
- Seats
- 142 active users
Mixed Form Layout
- Task Name
- Assignee
- Due Date
- Description