Layout

Working with layout components.

Layout components are used to separate layout responsibilities from content and interactivity.

This is the separation of concerns that makes your dashboard maintainable and easy to reason about, and understanding these principles is key to building your interfaces effectively.

Box

import { Box } from "@propeldata/ui-kit";

Box is the most fundamental layout component.

Box is used to:

• Provide spacing to child elements.
• Impose sizing constraints on content.
• Control layout behavior within flex and grid containers.
• Hide content based on screen size using its responsive display prop.

Flex

import { Box } from "@propeldata/ui-kit";

Flex component does everything that Box can do, but comes with an additional set of props to organize items along an axis. It provides convenient access to the CSS flexbox properties.

Grid

The Grid component is used to organize the content in columns and rows. Like Box and Flex, it’s made to provide convenient access to the underlying CSS grid properties without any magic of its own.

import { Grid } from "@propeldata/ui-kit";

Section

import { Section } from "@propeldata/ui-kit";

The Section component adds consistent vertical spacing between major page sections, helping establish visual hierarchy. It offers a few predefined spacing sizes to maintain simplicity and consistency throughout your layout.

Container

import { Container } from "@propeldata/ui-kit";

Container’s sole responsibility is to provide a consistent max-width to the content it wraps. Like Section, it comes just with a couple of pre-defined sizes that work well with common breakpoints and typical content widths for comfortable reading.

Card

import { Card } from "@propeldata/ui-kit";

The Card component is used to display content in a card-like format.

Preview

Code

<Container p="5">
  <Card>
    <Heading as="h3" color="gray">Card heading</Heading>
    <Text>Card content</Text>
  </Card>
</Container>

Tabs

import { Tabs } from "@propeldata/ui-kit";

Organize content sections to be displayed one at a time.

Preview

Code

<Container p="5">
  <Tabs.Root defaultValue="overview">
    <Tabs.List>
      <Tabs.Trigger value="overview">Dashboard</Tabs.Trigger>
      <Tabs.Trigger value="sales">Orders</Tabs.Trigger>
    </Tabs.List>

    <Flex pt="3">
      <Tabs.Content value="overview">
        <Text size="2">View key metrics and KPIs for your business.</Text>
      </Tabs.Content>

      <Tabs.Content value="sales">
        <Text size="2">View incoming orders.</Text>
      </Tabs.Content>
    </Flex>
  </Tabs.Root>
</Container>

Tab Cards

import { Tabs } from "@propeldata/ui-kit";

Organize content sections to be displayed one at a time triggered by clicking on cards.

Preview

Code

<Container p="5">
  <Tabs.Root defaultValue="Revenue">
    <Flex direction="column" width="100%">
      <Tabs.List>
        <Grid
          columns="3"
          gap="4"
          align="center"
          width="100%"
        >
          <Tabs.Card
            style={{ height: "100%", width: "100%", padding: 0, cursor: "pointer" }}
            value="Revenue"
          >
            <Flex
              direction="column"
              align="center"
              justify="center"
              width="100%"
            >
              <Card style={{ width: "100%" }}>
                <Text style={{ margin: 0 }}>Revenue</Text>
                <br />
                <Counter
                  localize
                  prefixValue="$"
                  query={{
                    metric: {
                      sum: {
                        dataPool: {
                          name: "TacoSoft Demo Data",
                        },
                        measure: {
                          columnName: "taco_total_price",
                        },
                      },
                    },
                    timeRange: { relative: RelativeTimeRange.LastNDays, n: 30 },
                  }}
                />
              </Card>
            </Flex>
          </Tabs.Card>
          <Tabs.Card
            style={{ height: "100%", width: "100%", padding: 0, cursor: "pointer" }}
            value="Orders"
          >
            <Flex
              direction="column"
              align="center"
              justify="center"
              width="100%"
            >
              <Card style={{ width: "100%" }}>
                <Text style={{ margin: 0 }}>Orders</Text>
                <br />
                <Counter
                  localize
                  query={{
                    metric: {
                      count: {
                        dataPool: {
                          name: "TacoSoft Demo Data",
                        },
                      },
                    },
                    timeRange: { relative: RelativeTimeRange.LastNDays, n: 30 },
                  }}
                />
              </Card>
            </Flex>
          </Tabs.Card>
          <Tabs.Card
            style={{ height: "100%", width: "100%", padding: 0, cursor: "pointer" }}
            value="Average Order"
          >
            <Flex
              direction="column"
              align="center"
              justify="center"
              width="100%"
            >
              <Card style={{ width: "100%" }} key="metric-1">
                <Text style={{ margin: 0 }}>Metric 1</Text>
                <br />
                <Counter
                  localize
                  prefixValue="$"
                  query={{
                    metric: {
                      custom: {
                        dataPool: {
                          name: "TacoSoft Demo Data",
                        },
                        expression: "SUM(taco_total_price) / COUNT()",
                      },
                    },
                    timeRange: { relative: RelativeTimeRange.LastNDays, n: 30 },
                  }}
                />
              </Card>
            </Flex>
          </Tabs.Card>
        </Grid>
      </Tabs.List>

      <div style={{ borderBottom: '1px solid #e5e7eb', marginTop: '0px' }} />

      <Flex pt="3" width="100%">
        <Tabs.Content value="Revenue" style={{ width: "100%" }}>
          <Container style={{ backgroundColor: "#f5f5f5", padding: "24px", borderRadius: "8px", width: "100%" }}>
            <Text size="2">Revenue content</Text>
          </Container>
        </Tabs.Content>

        <Tabs.Content value="Orders" style={{ width: "100%" }}>
          <Container style={{ backgroundColor: "#f0f9ff", padding: "24px", borderRadius: "8px", width: "100%" }}>
            <Text size="2">Orders content</Text>
          </Container>
        </Tabs.Content>

        <Tabs.Content value="Average Order" style={{ width: "100%" }}>
          <Container style={{ backgroundColor: "#f0fdf4", padding: "24px", borderRadius: "8px", width: "100%" }}>
            <Text size="2">Average Order content</Text>
          </Container>
        </Tabs.Content>
      </Flex>
    </Flex>
  </Tabs.Root>
</Container>

---

Common layout props

Each layout component has a set of it’s own specialized props and also a shared set of common layout props. All layout props support responsive object values.

Padding

Padding props can access the space scale steps or accept any valid CSS padding value.

<Box p="4" />
<Box p="100px">
<Box p={{ sm: '6', lg: '9' }}>

Prop	Type	Default
p	Responsive<number | string>	No default value
px	Responsive<number | string>	No default value
py	Responsive<number | string>	No default value
pt	Responsive<number | string>	No default value
pr	Responsive<number | string>	No default value
pb	Responsive<number | string>	No default value
pl	Responsive<number | string>	No default value

Width

Width props accept any valid CSS width value.

<Box width="100px" />
<Box width={{ md: '100vw', xl: '1400px' }} />

Prop	Type	Default
width	Responsive<string>	No default value
minWidth	Responsive<string>	No default value
maxWidth	Responsive<string>	No default value

Height

Height props accept any valid CSS height value.

<Box height="100px" />
<Box height={{ md: '100vh', xl: '600px' }} />

Prop	Type	Default
height	Responsive<string>	No default value
minHeight	Responsive<string>	No default value
maxHeight	Responsive<string>	No default value

Positioning

Positioning props can change how the element is placed relative to the normal flow of the document. As usual, the corresponding CSS values are accepted for each property, and the space scale steps can be used for the offset values.

<Box position="relative" />
<Box position={{ initial: "relative", lg: "sticky" }} />

<Box inset="4" />
<Box inset={{ initial: "0", xl: "auto" }} />

<Box left="4" />
<Box left={{ initial: "0", xl: "auto" }} />

Prop	Type	Default
position	Responsive<enum>	No default value
inset	Responsive<enum | string>	No default value
top	Responsive<enum | string>	No default value
right	Responsive<enum | string>	No default value
bottom	Responsive<enum | string>	No default value
left	Responsive<enum | string>	No default value

Flex children

Each layout component has props used to control the style when it is a child of a flex container.

<Box flexBasis="100%" />
<Box flexShrink="0">
<Box flexGrow={{ initial: "0", lg: "1" }} />

Prop	Type	Default
flexBasis	Responsive<string>	No default value
flexShrink	Responsive<enum | string>	No default value
flexGrow	Responsive<enum | string>	No default value

Grid children

Each layout component has props used to control the style when it is a child of a grid container.

<Box gridArea="header" />

<Box gridColumn="1 / 3" />
<Box gridColumnStart="2">
<Box gridColumnEnd={{ initial: "-1", md: "3", lg: "auto" }} />

<Box gridRow="1 / 3" />
<Box gridRowStart="2">
<Box gridRowEnd={{ initial: "-1", md: "3", lg: "auto" }} />

Prop	Type	Default
gridArea	Responsive<string>	No default value
gridColumn	Responsive<string>	No default value
gridColumnStart	Responsive<string>	No default value
gridColumnEnd	Responsive<string>	No default value
gridRow	Responsive<string>	No default value
gridRowStart	Responsive<string>	No default value
gridRowEnd	Responsive<string>	No default value

---

Margin props

Margin props are available on most components in order to provide spacing around the elements. They are not exclusive to layout components.

Margin props can access the space scale steps or accept any valid CSS margin value

<Button m="4" />
<Button m="100px">
<Button m={{ sm: '6', lg: '9' }}>

Prop	Type	Default
m	Responsive<enum | string>	No default value
mx	Responsive<enum | string>	No default value
my	Responsive<enum | string>	No default value
mt	Responsive<enum | string>	No default value
mr	Responsive<enum | string>	No default value
mb	Responsive<enum | string>	No default value
ml	Responsive<enum | string>	No default value

The margin props may be unavailable on components that don’t render a HTML node or rely on their Root part for layout.