Layout

Color Palette

22 pre-defined colors based on Tailwind CSS expertly-crafted color palette.

Default colors

Choosing the right colors can be a never-ending story. We struggled with the same problem which is why we stuck to Tailwind CSS' carefully designed color palette and never wanted to try anything else after using it.

 

As speed is one of our core principles, we have further narrowed the selection of Tailwind's color palette. Users can choose between all major color variants (e.g. blue, indigo, amber), but do not need to take care of any shades of a major color. This means if a component has a second color related to the primary color, the second color will be adjusted accordingly by our default shades when the primary color is changed.

 

Whenever there is a color parameter available in a component, the following color types can be used:

 

Usage example

The following example shows a color parameter of a component, in which the background color is configured automatically by our defaults based on the input of the color parameter.

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

export default () => (
  <Card className="max-w-sm mx-auto">
    <Flex className="whitespace-nowrap">
      <Flex alignItems="baseline" justifyContent="start" className="space-x-1">
        <Text>$ 9.000</Text>
        <Text>(45%)</Text>
      </Flex>
      <Text className="whitespace-nowrap">Goal: 20.000</Text>
    </Flex>
    <ProgressBar percentageValue={45} className="mt-2" color="fuchsia" />
  </Card>
);