Layout

Flex

Creates a flex container which enables flex context for all its direct children.

Two Cards wrapped in a flex container

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Import Flex

Tremor exports one component for Flex.

import { Flex } from "@tremor/react";

Usage example

The example below shows a KPI card in employing Flex to display two metrics components next to each other.

Tickets sold

9,876

Average Selling Price

$ 175.20

import { Flex, Metric, Card, Text } from "@tremor/react";

export default () => (
  <Card className="max-w-xs">
    <Flex>
      <div>
        <Text>Tickets sold</Text>
        <Metric>9,876</Metric>
      </div>
      <div>
        <Text>Average Selling Price</Text>
        <Metric>$ 175.20</Metric>
      </div>
    </Flex>
  </Card>
);

API Reference: Flex

justifyContentoptional
Description: Set how flex items are positioned along the main axis.
Type: string
Default: between
Values: start, end, center, between, around, evenly

alignItemsoptional
Description: Set how flex items are positioned along the cross axis.
Type: string
Default: center
Values: start, end, center, basline, stretch

flexDirectionoptional
Description: Set the direction of flex items.
Type: string
Default: row
Values: row, col, row-reverse, col-reverse

Need help? You can also ask the community on GitHub Discussions or Slack.

Color Palette