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:
Slate
#64748b
Gray
#6b7280
Zinc
#71717a
Neutral
#737373
Stone
#78716c
Red
#ef4444
Orange
#f97316
Amber
#f59e0b
Yellow
#eab308
Lime
#84cc16
Green
#22c55e
Emerald
#10b981
Teal
#14b8a6
Cyan
#06b6d4
Sky
#0ea5e9
Blue
#3b82f6
Indigo
#6366f1
Violet
#8b5cf6
Purple
#a855f7
Fuchsia
#d946ef
Pink
#ec4899
Rose
#f43f5e
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.
ProgressBar with color fuchsia
$ 9.000
(45%)
Goal: 20.000
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> );