0
# Type Definitions
1

2
Comprehensive TypeScript types exported by Tremor. **See [common-props.md](./common-props.md) for consolidated type definitions.**
3

4
All types are exported from main package:
5

6
```typescript
7
import {
8
  // Value formatting
9
  type ValueFormatter,
10

11
  // Chart types
12
  type CurveType,
13
  type IntervalType,
14
  type FunnelVariantType,
15
  type EventProps,
16
  type CustomTooltipProps,
17

18
  // Style types
19
  type Color,
20
  type CustomColor,
21
  type Size,
22

23
  // Icon & Button types
24
  type IconVariant,
25
  type ButtonVariant,
26

27
  // Delta types
28
  type DeltaType,
29

30
  // Layout types
31
  type FlexDirection,
32
  type JustifyContent,
33
  type AlignItems,
34

35
  // Utility functions
36
  getIsBaseColor,
37
} from '@tremor/react';
38
```
39

40
## Quick Reference
41

42
### Common Formatters
43

44
```typescript
45
// Currency
46
const usd: ValueFormatter = (v) => `$${v.toLocaleString()}`;
47
const eur: ValueFormatter = (v) => new Intl.NumberFormat('en-DE', { style: 'currency', currency: 'EUR' }).format(v);
48

49
// Percentage
50
const percent: ValueFormatter = (v) => `${v.toFixed(2)}%`;
51

52
// Compact
53
const compact: ValueFormatter = (v) => {
54
  if (v >= 1e6) return `${(v / 1e6).toFixed(1)}M`;
55
  if (v >= 1e3) return `${(v / 1e3).toFixed(1)}K`;
56
  return v.toString();
57
};
58
```
59

60
### Color Selection Helper
61

62
```typescript
63
import type { Color } from '@tremor/react';
64

65
function getStatusColor(status: string): Color {
66
  const map: Record<string, Color> = {
67
    success: 'emerald',
68
    warning: 'amber',
69
    error: 'red',
70
    info: 'blue',
71
    pending: 'gray',
72
  };
73
  return map[status] || 'gray';
74
}
75
```
76

77
### Delta Type Calculator
78

79
```typescript
80
import type { DeltaType } from '@tremor/react';
81

82
function calculateDeltaType(change: number): DeltaType {
83
  if (change === 0) return 'unchanged';
84
  if (change > 0) return change >= 10 ? 'increase' : 'moderateIncrease';
85
  return change <= -10 ? 'decrease' : 'moderateDecrease';
86
}
87
```
88

89
### Type-Safe Component Props
90

91
```typescript
92
import type { Color, Size, ValueFormatter } from '@tremor/react';
93

94
interface DashboardCardProps {
95
  title: string;
96
  data: any[];
97
  color: Color;
98
  size?: Size;
99
  formatter?: ValueFormatter;
100
}
101

102
function DashboardCard({ title, data, color, size = 'md', formatter }: DashboardCardProps) {
103
  return (
104
    <Card>
105
      <Title>{title}</Title>
106
      <BarChart
107
        data={data}
108
        index="name"
109
        categories={['value']}
110
        colors={[color]}
111
        valueFormatter={formatter}
112
      />
113
    </Card>
114
  );
115
}
116
```
117

118
## Utility: getIsBaseColor
119

120
```typescript { .api }
121
function getIsBaseColor(color: Color | string): boolean;
122
```
123

124
Checks if color is from Tremor base palette (returns `true`) or custom (returns `false`).
125

126
**Usage:**
127

128
```typescript
129
import { getIsBaseColor } from '@tremor/react';
130

131
getIsBaseColor('blue'); // true
132
getIsBaseColor('#3B82F6'); // false
133
getIsBaseColor('rgb(34, 197, 94)'); // false
134

135
// Conditional styling
136
function CustomComponent({ color }: { color: string }) {
137
  if (getIsBaseColor(color)) {
138
    return <div className={`bg-${color}-500`}>Theme color</div>;
139
  }
140
  return <div style={{ backgroundColor: color }}>Custom color</div>;
141
}
142
```
143

144
## TypeScript Integration
145

146
Tremor is fully typed with excellent TypeScript support:
147

148
```typescript
149
import { BarChart, type Color } from '@tremor/react';
150

151
// Type inference
152
const colors: Color[] = ['blue', 'emerald', 'violet'];
153

154
// Props are strongly typed
155
<BarChart
156
  data={data}
157
  index="month"
158
  categories={['revenue']}
159
  colors={colors} // Type-checked
160
  valueFormatter={(value: number) => `$${value}`} // Type-checked
161
  onValueChange={(event) => {
162
    // event is typed as EventProps
163
    if (event) {
164
      console.log(event.categoryClicked); // Type-safe
165
    }
166
  }}
167
/>
168
```
169

170
## Complete Type Reference
171

172
See [common-props.md](./common-props.md) for detailed type definitions including:
173

174
- BaseChartProps
175
- EventProps
176
- CustomTooltipProps
177
- Common input props
178
- All enum types
179