Tremor React

import { Card, Title, BarChart } from '@tremor/react';

const data = [
  { name: 'Jan', sales: 2890 },
  { name: 'Feb', sales: 2756 },
];

<Card>
  <Title>Sales</Title>
  <BarChart
    data={data}
    index="name"
    categories={['sales']}
    colors={['blue']}
    valueFormatter={(v) => `$${v.toLocaleString()}`}
  />
</Card>

// All components export from main package
import {
  // Charts
  AreaChart, BarChart, LineChart, DonutChart, ScatterChart, FunnelChart,
  SparkLineChart, SparkAreaChart, SparkBarChart,

  // Layout
  Card, Flex, Grid, Col, Divider, Dialog, DialogPanel, Accordion,
  AccordionList, AccordionHeader, AccordionBody,

  // Visualization
  BarList, ProgressBar, ProgressCircle, CategoryBar, DeltaBar, MarkerBar, Tracker,

  // Input
  Button, TextInput, NumberInput, Textarea, Switch,
  Select, SelectItem, MultiSelect, MultiSelectItem,
  SearchSelect, SearchSelectItem, DatePicker, DateRangePicker, DateRangePickerItem,
  TabGroup, TabList, Tab, TabPanels, TabPanel,

  // Text
  Title, Subtitle, Text, Metric, Bold, Italic, Callout, Legend,

  // Icon
  Icon, Badge, BadgeDelta,

  // List
  List, ListItem, Table, TableHead, TableBody, TableFoot, TableRow,
  TableHeaderCell, TableCell, TableFooterCell,

  // Types
  type Color, type Size, type ValueFormatter, type CurveType, type DeltaType,
  type EventProps, type CustomTooltipProps, type ButtonVariant, type IconVariant,

  // Utils
  getIsBaseColor,
} from '@tremor/react';

// CommonJS also supported
const { AreaChart, Card } = require('@tremor/react');

<div className="p-6 space-y-6">
  <Flex justifyContent="between" alignItems="center">
    <Title>Dashboard</Title>
    <Button>Export</Button>
  </Flex>

  <Grid numItems={1} numItemsSm={2} numItemsLg={4} className="gap-6">
    <Card decoration="left" decorationColor="blue">
      <Text>Revenue</Text>
      <Metric>$45,231</Metric>
      <BadgeDelta deltaType="increase">+12%</BadgeDelta>
    </Card>
    {/* More cards... */}
  </Grid>
</div>

const [value, setValue] = useState('');
const [error, setError] = useState('');

<TextInput
  value={value}
  onValueChange={(v) => {
    setValue(v);
    setError(v ? '' : 'Required');
  }}
  error={!!error}
  errorMessage={error}
/>

const [selected, setSelected] = useState<string | null>(null);

<BarChart
  data={data}
  index="date"
  categories={['revenue']}
  onValueChange={(v) => setSelected(v?.categoryClicked || null)}
/>

import { type Color, type Size, type ValueFormatter } from '@tremor/react';

// Type-safe props
const chartColor: Color = 'blue'; // ✓
const customFormatter: ValueFormatter = (v) => `$${v}`; // ✓