tremor • blocks

Table & Lists

Modular lists and tables that can be complemented by various components, such as badges and icons, as well as charts and progress bars.

Card + Table + BadgeDelta

Name	Leads	Sales ($)	Quota ($)	Variance	Region	Status
Peter Doe	45	1,000,000	1,200,000	low	Region A	overperforming
Lena Whitehouse	35	900,000	1,000,000	low	Region B	average
Phil Less	52	930,000	1,000,000	medium	Region C	underperforming
John Camper	22	390,000	250,000	low	Region A	overperforming
Max Balmoore	49	860,000	750,000	low	Region B	overperforming
Peter Moore	82	1,460,000	1,500,000	low	Region A	average
Joe Sachs	49	1,230,000	1,800,000	medium	Region B	underperforming

import {
  Card,
  Table,
  TableRow,
  TableCell,
  TableHead,
  TableHeaderCell,
  TableBody,
  BadgeDelta,
  DeltaType,
} from "@tremor/react";

const salesPeople: {
  name: string;
  leads: number;
  sales: string;
  quota: string;
  variance: string;
  region: string;
  delta: string;
  deltaType: DeltaType;
}[] = [
  {
    name: "Peter Doe",
    leads: 45,
    sales: "1,000,000",
    quota: "1,200,000",
    variance: "low",
    region: "Region A",
    delta: "overperforming",
    deltaType: "moderateIncrease",
  },
  {
    name: "Lena Whitehouse",
    leads: 35,
    sales: "900,000",
    quota: "1,000,000",
    variance: "low",
    region: "Region B",
    delta: "average",
    deltaType: "unchanged",
  },
  {
    name: "Phil Less",
    leads: 52,
    sales: "930,000",
    quota: "1,000,000",
    variance: "medium",
    region: "Region C",
    delta: "underperforming",
    deltaType: "moderateDecrease",
  },
  {
    name: "John Camper",
    leads: 22,
    sales: "390,000",
    quota: "250,000",
    variance: "low",
    region: "Region A",
    delta: "overperforming",
    deltaType: "increase",
  },
  {
    name: "Max Balmoore",
    leads: 49,
    sales: "860,000",
    quota: "750,000",
    variance: "low",
    region: "Region B",
    delta: "overperforming",
    deltaType: "increase",
  },
  {
    name: "Peter Moore",
    leads: 82,
    sales: "1,460,000",
    quota: "1,500,000",
    variance: "low",
    region: "Region A",
    delta: "average",
    deltaType: "unchanged",
  },
  {
    name: "Joe Sachs",
    leads: 49,
    sales: "1,230,000",
    quota: "1,800,000",
    variance: "medium",
    region: "Region B",
    delta: "underperforming",
    deltaType: "moderateDecrease",
  },
];

export default function Example() {
  return (
    <Card>
      <Table>
        <TableHead>
          <TableRow>
            <TableHeaderCell> Name </TableHeaderCell>
            <TableHeaderCell className="text-right"> Leads </TableHeaderCell>
            <TableHeaderCell className="text-right">
              {" "}
              Sales ($){" "}
            </TableHeaderCell>
            <TableHeaderCell className="text-right">
              {" "}
              Quota ($){" "}
            </TableHeaderCell>
            <TableHeaderCell className="text-right"> Variance </TableHeaderCell>
            <TableHeaderCell className="text-right"> Region </TableHeaderCell>
            <TableHeaderCell className="text-right"> Status </TableHeaderCell>
          </TableRow>
        </TableHead>

        <TableBody>
          {salesPeople.map((item) => (
            <TableRow key={item.name}>
              <TableCell>{item.name}</TableCell>
              <TableCell className="text-right">{item.leads}</TableCell>
              <TableCell className="text-right">{item.sales}</TableCell>
              <TableCell className="text-right">{item.quota}</TableCell>
              <TableCell className="text-right">{item.variance}</TableCell>
              <TableCell className="text-right">{item.region}</TableCell>
              <TableCell className="text-right">
                <BadgeDelta deltaType={item.deltaType} size="xs">
                  {item.delta}
                </BadgeDelta>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Card>
  );
}

Found a bug? let us know

Card + Table + Badge + Buttons

Purchases

Overview of this month's purchases

Transaction ID	User	Item	Status	Amount
#123456	Lena Mayer	Under Armour Shorts	Ready for dispatch	$ 49.90
#234567	Max Smith	Book - Wealth of Nations	Ready for dispatch	$ 19.90
#345678	Anna Stone	Garmin Forerunner 945	Cancelled	$ 499.90
#4567890	Truls Cumbersome	Running Backpack	Shipped	$ 89.90
#5678901	Peter Pikser	Rolex Submariner Replica	Cancelled	$ 299.90
#6789012	Phlipp Forest	On Clouds Shoes	Ready for dispatch	$ 290.90
#78901234	Mara Pacemaker	Ortovox Backpack 40l	Shipped	$ 150.00
#89012345	Sev Major	Oakley Jawbreaker	Ready for dispatch	$ 190.90

import {
  Card,
  Title,
  Text,
  Flex,
  Table,
  TableRow,
  TableCell,
  TableHead,
  TableHeaderCell,
  TableBody,
  Badge,
  Button,
  Color,
} from "@tremor/react";

const colors: { [key: string]: Color } = {
  "Ready for dispatch": "gray",
  Cancelled: "rose",
  Shipped: "emerald",
};

const transactions = [
  {
    transactionID: "#123456",
    user: "Lena Mayer",
    item: "Under Armour Shorts",
    status: "Ready for dispatch",
    amount: "$ 49.90",
    link: "#",
  },
  {
    transactionID: "#234567",
    user: "Max Smith",
    item: "Book - Wealth of Nations",
    status: "Ready for dispatch",
    amount: "$ 19.90",
    link: "#",
  },
  {
    transactionID: "#345678",
    user: "Anna Stone",
    item: "Garmin Forerunner 945",
    status: "Cancelled",
    amount: "$ 499.90",
    link: "#",
  },
  {
    transactionID: "#4567890",
    user: "Truls Cumbersome",
    item: "Running Backpack",
    status: "Shipped",
    amount: "$ 89.90",
    link: "#",
  },
  {
    transactionID: "#5678901",
    user: "Peter Pikser",
    item: "Rolex Submariner Replica",
    status: "Cancelled",
    amount: "$ 299.90",
    link: "#",
  },
  {
    transactionID: "#6789012",
    user: "Phlipp Forest",
    item: "On Clouds Shoes",
    status: "Ready for dispatch",
    amount: "$ 290.90",
    link: "#",
  },
  {
    transactionID: "#78901234",
    user: "Mara Pacemaker",
    item: "Ortovox Backpack 40l",
    status: "Shipped",
    amount: "$ 150.00",
    link: "#",
  },
  {
    transactionID: "#89012345",
    user: "Sev Major",
    item: "Oakley Jawbreaker",
    status: "Ready for dispatch",
    amount: "$ 190.90",
    link: "#",
  },
];

export default function Example() {
  return (
    <Card>
      <Flex justifyContent="start" className="space-x-2">
        <Title>Purchases</Title>
        <Badge color="gray">8</Badge>
      </Flex>
      <Text className="mt-2">Overview of this month's purchases</Text>

      <Table className="mt-6">
        <TableHead>
          <TableRow>
            <TableHeaderCell>Transaction ID</TableHeaderCell>
            <TableHeaderCell>User</TableHeaderCell>
            <TableHeaderCell>Item</TableHeaderCell>
            <TableHeaderCell>Status</TableHeaderCell>
            <TableHeaderCell className="text-right">Amount</TableHeaderCell>
            <TableHeaderCell>Link</TableHeaderCell>
          </TableRow>
        </TableHead>

        <TableBody>
          {transactions.map((item) => (
            <TableRow key={item.transactionID}>
              <TableCell>{item.transactionID}</TableCell>
              <TableCell>{item.user}</TableCell>
              <TableCell>{item.item}</TableCell>
              <TableCell>
                <Badge color={colors[item.status]} size="xs">
                  {item.status}
                </Badge>
              </TableCell>
              <TableCell className="text-right">{item.amount}</TableCell>
              <TableCell>
                <Button size="xs" variant="secondary" color="gray">
                  See details
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Card>
  );
}

Found a bug? let us know

Card + Table + MultiSelectBox + BadgeDelta

Name	Leads	Sales ($)	Quota ($)	Variance	Region	Status
Peter Doe	45	1,000,000	1,200,000	low	Region A	overperforming
Lena Whitehouse	35	900,000	1,000,000	low	Region B	average
Phil Less	52	930,000	1,000,000	medium	Region C	underperforming
John Camper	22	390,000	250,000	low	Region A	overperforming
Max Balmoore	49	860,000	750,000	low	Region B	overperforming
Peter Moore	82	1,460,000	1,500,000	low	Region A	average
Joe Sachs	49	1,230,000	1,800,000	medium	Region B	underperforming

import {
  Card,
  Table,
  TableRow,
  TableCell,
  TableHead,
  TableHeaderCell,
  TableBody,
  BadgeDelta,
  DeltaType,
  MultiSelectBox,
  MultiSelectBoxItem,
} from "@tremor/react";
import { useState } from "react";

type SalesPerson = {
  name: string;
  leads: number;
  sales: string;
  quota: string;
  variance: string;
  region: string;
  status: string;
  deltaType: DeltaType;
};

const salesPeople: SalesPerson[] = [
  {
    name: "Peter Doe",
    leads: 45,
    sales: "1,000,000",
    quota: "1,200,000",
    variance: "low",
    region: "Region A",
    status: "overperforming",
    deltaType: "moderateIncrease",
  },
  {
    name: "Lena Whitehouse",
    leads: 35,
    sales: "900,000",
    quota: "1,000,000",
    variance: "low",
    region: "Region B",
    status: "average",
    deltaType: "unchanged",
  },
  {
    name: "Phil Less",
    leads: 52,
    sales: "930,000",
    quota: "1,000,000",
    variance: "medium",
    region: "Region C",
    status: "underperforming",
    deltaType: "moderateDecrease",
  },
  {
    name: "John Camper",
    leads: 22,
    sales: "390,000",
    quota: "250,000",
    variance: "low",
    region: "Region A",
    status: "overperforming",
    deltaType: "increase",
  },
  {
    name: "Max Balmoore",
    leads: 49,
    sales: "860,000",
    quota: "750,000",
    variance: "low",
    region: "Region B",
    status: "overperforming",
    deltaType: "increase",
  },
  {
    name: "Peter Moore",
    leads: 82,
    sales: "1,460,000",
    quota: "1,500,000",
    variance: "low",
    region: "Region A",
    status: "average",
    deltaType: "unchanged",
  },
  {
    name: "Joe Sachs",
    leads: 49,
    sales: "1,230,000",
    quota: "1,800,000",
    variance: "medium",
    region: "Region B",
    status: "underperforming",
    deltaType: "moderateDecrease",
  },
];

export default function Example() {
  const [selectedNames, setSelectedNames] = useState<string[]>([]);

  const isSalesPersonSelected = (salesPerson: SalesPerson) =>
    selectedNames.includes(salesPerson.name) || selectedNames.length === 0;

  return (
    <Card>
      <MultiSelectBox
        onValueChange={(value) => setSelectedNames(value)}
        placeholder="Select Salespeople..."
        className="max-w-xs"
      >
        {salesPeople.map((item) => (
          <MultiSelectBoxItem
            key={item.name}
            value={item.name}
            text={item.name}
          />
        ))}
      </MultiSelectBox>
      <Table className="mt-6">
        <TableHead>
          <TableRow>
            <TableHeaderCell>Name</TableHeaderCell>
            <TableHeaderCell className="text-right">Leads</TableHeaderCell>
            <TableHeaderCell className="text-right">Sales ($)</TableHeaderCell>
            <TableHeaderCell className="text-right">Quota ($)</TableHeaderCell>
            <TableHeaderCell className="text-right">Variance</TableHeaderCell>
            <TableHeaderCell className="text-right">Region</TableHeaderCell>
            <TableHeaderCell className="text-right">Status</TableHeaderCell>
          </TableRow>
        </TableHead>

        <TableBody>
          {salesPeople
            .filter((item) => isSalesPersonSelected(item))
            .map((item) => (
              <TableRow key={item.name}>
                <TableCell>{item.name}</TableCell>
                <TableCell className="text-right">{item.leads}</TableCell>
                <TableCell className="text-right">{item.sales}</TableCell>
                <TableCell className="text-right">{item.quota}</TableCell>
                <TableCell className="text-right">{item.variance}</TableCell>
                <TableCell className="text-right">{item.region}</TableCell>
                <TableCell className="text-right">
                  <BadgeDelta deltaType={item.deltaType} size="xs">
                    {item.status}
                  </BadgeDelta>
                </TableCell>
              </TableRow>
            ))}
        </TableBody>
      </Table>
    </Card>
  );
}

Found a bug? let us know

Card + List + Tabs

Most Engaged Audience

Roles

Front-End Developer
3,555 (37.2%)
Product Designer
1,280 (19.8%)
Technical UX-Engineer
1,777 (15.8%)
Product Manager
789 (12%)

Industry

Internet
1,365 (39%)
Healthcare
984 (20.1%)
Automotive
789 (11.4%)
Education
789 (10.1%)

Number of Employees

11 - 50
1,650 (37.1%)
50 - 100
320 (21.2%)
100 - 200
107 (18.1%)
250 - 500
93 (12.1%)

Keywords

Dashboard
37 (12.1%)
React Library
28 (15.1%)
Custom Web Dev
20 (9.8%)
Web Applications
15 (6.2%)

import {
  Card,
  Title,
  Bold,
  Text,
  List,
  ListItem,
  Tab,
  TabList,
  Flex,
  Grid,
  Button,
} from "@tremor/react";

import { ArrowNarrowRightIcon } from "@heroicons/react/solid";

import React, { useState } from "react";

const Categories = {
  Interested: "interested",
  Open: "open",
  Reply: "reply",
};

const roles = [
  {
    name: "Front-End Developer",
    data: {
      [Categories.Interested]: {
        amount: "3,555",
        share: "37.2%",
      },
      [Categories.Open]: {
        amount: "2,176",
        share: "17.6%",
      },
      [Categories.Reply]: {
        amount: "1,555",
        share: "9.1%",
      },
    },
  },
  {
    name: "Product Designer",
    data: {
      [Categories.Interested]: {
        amount: "1,280",
        share: "19.8%",
      },
      [Categories.Open]: {
        amount: "1,499",
        share: "14.7%",
      },
      [Categories.Reply]: {
        amount: "508",
        share: "9.8%",
      },
    },
  },
  {
    name: "Technical UX-Engineer",
    data: {
      [Categories.Interested]: {
        amount: "1,777",
        share: "15.8%",
      },
      [Categories.Open]: {
        amount: "1,523",
        share: "14.2%",
      },
      [Categories.Reply]: {
        amount: "1,432",
        share: "9.8%",
      },
    },
  },
  {
    name: "Product Manager",
    data: {
      [Categories.Interested]: {
        amount: "789",
        share: "12%",
      },
      [Categories.Open]: {
        amount: "589",
        share: "10.2%",
      },
      [Categories.Reply]: {
        amount: "345",
        share: "8.9%",
      },
    },
  },
];

const industries = [
  {
    name: "Internet",
    data: {
      [Categories.Interested]: {
        amount: "1,365",
        share: "39%",
      },
      [Categories.Open]: {
        amount: "1,245",
        share: "31.2%",
      },
      [Categories.Reply]: {
        amount: "965",
        share: "29%",
      },
    },
  },
  {
    name: "Healthcare",
    data: {
      [Categories.Interested]: {
        amount: "984",
        share: "20.1%",
      },
      [Categories.Open]: {
        amount: "765",
        share: "19.2%",
      },
      [Categories.Reply]: {
        amount: "654",
        share: "18.3%",
      },
    },
  },
  {
    name: "Automotive",
    data: {
      [Categories.Interested]: {
        amount: "789",
        share: "11.4%",
      },
      [Categories.Open]: {
        amount: "637",
        share: "10.5%",
      },
      [Categories.Reply]: {
        amount: "537",
        share: "10.4%",
      },
    },
  },
  {
    name: "Education",
    data: {
      [Categories.Interested]: {
        amount: "789",
        share: "10.1%",
      },
      [Categories.Open]: {
        amount: "534",
        share: "9.5%",
      },
      [Categories.Reply]: {
        amount: "432",
        share: "3.4%",
      },
    },
  },
];

const numEmployees = [
  {
    name: "11 - 50",
    data: {
      [Categories.Interested]: {
        amount: "1,650",
        share: "37.1%",
      },
      [Categories.Open]: {
        amount: "1,465",
        share: "33.2%",
      },
      [Categories.Reply]: {
        amount: "750",
        share: "12.4%",
      },
    },
  },
  {
    name: "50 - 100",
    data: {
      [Categories.Interested]: {
        amount: "320",
        share: "21.2%",
      },
      [Categories.Open]: {
        amount: "290",
        share: "19.2%",
      },
      [Categories.Reply]: {
        amount: "270",
        share: "10.2%",
      },
    },
  },
  {
    name: "100 - 200",
    data: {
      [Categories.Interested]: {
        amount: "107",
        share: "18.1%",
      },
      [Categories.Open]: {
        amount: "90",
        share: "10.1%",
      },
      [Categories.Reply]: {
        amount: "83",
        share: "9.7%",
      },
    },
  },
  {
    name: "250 - 500",
    data: {
      [Categories.Interested]: {
        amount: "93",
        share: "12.1%",
      },
      [Categories.Open]: {
        amount: "87",
        share: "9.8%",
      },
      [Categories.Reply]: {
        amount: "79",
        share: "7.2%",
      },
    },
  },
];

const keywords = [
  {
    name: "Dashboard",
    data: {
      [Categories.Interested]: {
        amount: "37",
        share: "12.1%",
      },
      [Categories.Open]: {
        amount: "23",
        share: "9.6%",
      },
      [Categories.Reply]: {
        amount: "21",
        share: "8.1%",
      },
    },
  },
  {
    name: "React Library",
    data: {
      [Categories.Interested]: {
        amount: "28",
        share: "15.1%",
      },
      [Categories.Open]: {
        amount: "12",
        share: "7.1%",
      },
      [Categories.Reply]: {
        amount: "10",
        share: "7.0%",
      },
    },
  },
  {
    name: "Custom Web Dev",
    data: {
      [Categories.Interested]: {
        amount: "20",
        share: "9.8%",
      },
      [Categories.Open]: {
        amount: "18",
        share: "9.4%",
      },
      [Categories.Reply]: {
        amount: "16",
        share: "8.9%",
      },
    },
  },
  {
    name: "Web Applications",
    data: {
      [Categories.Interested]: {
        amount: "15",
        share: "6.2%",
      },
      [Categories.Open]: {
        amount: "9",
        share: "4.3%",
      },
      [Categories.Reply]: {
        amount: "7",
        share: "3.9%",
      },
    },
  },
];

export default function Example() {
  const [selectedCategory, setSelectedCategory] = useState(
    Categories.Interested
  );
  return (
    <Card>
      <Title>Most Engaged Audience</Title>
      <TabList
        defaultValue={Categories.Interested}
        onValueChange={(value) => setSelectedCategory(value)}
        className="mt-8"
      >
        <Tab value={Categories.Interested} text="Interested Rate" />
        <Tab value={Categories.Open} text="Open Rate" />
        <Tab value={Categories.Reply} text="Reply Rate" />
      </TabList>

      <Grid numColsMd={2} className="gap-x-8 gap-y-2">
        <div>
          <Title className="mt-8">Roles</Title>
          <List className="mt-2">
            {roles.map((item) => (
              <ListItem key={item.name}>
                <Text>{item.name}</Text>
                <Text>
                  <Bold>{item.data[selectedCategory].amount}</Bold>{" "}
                  {`(${item.data[selectedCategory].share})`}
                </Text>
              </ListItem>
            ))}
          </List>
        </div>
        <div>
          <Title className="mt-8">Industry</Title>
          <List className="mt-2">
            {industries.map((item) => (
              <ListItem key={item.name}>
                <Text>{item.name}</Text>
                <Text>
                  <Bold>{item.data[selectedCategory].amount}</Bold>{" "}
                  {`(${item.data[selectedCategory].share})`}
                </Text>
              </ListItem>
            ))}
          </List>
        </div>
        <div>
          <Title className="mt-8">Number of Employees</Title>
          <List className="mt-2">
            {numEmployees.map((item) => (
              <ListItem key={item.name}>
                <Text>{item.name}</Text>
                <Text>
                  <Bold>{item.data[selectedCategory].amount}</Bold>{" "}
                  {`(${item.data[selectedCategory].share})`}
                </Text>
              </ListItem>
            ))}
          </List>
        </div>
        <div>
          <Title className="mt-8">Keywords</Title>
          <List className="mt-2">
            {keywords.map((item) => (
              <ListItem key={item.name}>
                <Text>{item.name}</Text>
                <Text>
                  <Bold>{item.data[selectedCategory].amount}</Bold>{" "}
                  {`(${item.data[selectedCategory].share})`}
                </Text>
              </ListItem>
            ))}
          </List>
        </div>
      </Grid>
    </Card>
  );
}

Found a bug? let us know