Update to Tremor v2

app/layout.tsx

@@ -1,5 +1,4 @@
 import './globals.css';
-import '@tremor/react/dist/esm/tremor.css';
 
 import Nav from './nav';
 import AnalyticsWrapper from './analytics';

app/page.tsx

@@ -24,7 +24,7 @@ export default async function IndexPage({
         A list of users retrieved from a MySQL database (PlanetScale).
       </Text>
       <Search />
-      <Card marginTop="mt-6">
+      <Card className="mt-6">
         {/* @ts-expect-error Server Component */}
         <UsersTable users={users} />
       </Card>

app/playground/chart.tsx

@@ -6,36 +6,35 @@ const data = [
   {
     Month: 'Jan 21',
     Sales: 2890,
-    Profit: 2400,
+    Profit: 2400
   },
   {
     Month: 'Feb 21',
     Sales: 1890,
-    Profit: 1398,
+    Profit: 1398
   },
   {
     Month: 'Jan 22',
     Sales: 3890,
-    Profit: 2980,
-  },
+    Profit: 2980
+  }
 ];
 
 const valueFormatter = (number: number) =>
   `$ ${Intl.NumberFormat('us').format(number).toString()}`;
 
 export default function Chart() {
   return (
-    <Card marginTop="mt-8">
+    <Card className="mt-8">
       <Title>Performance</Title>
       <Text>Comparison between Sales and Profit</Text>
       <AreaChart
-        marginTop="mt-4"
+        className="mt-4 h-80"
         data={data}
         categories={['Sales', 'Profit']}
-        dataKey="Month"
+        index="Month"
         colors={['indigo', 'fuchsia']}
         valueFormatter={valueFormatter}
-        height="h-80"
       />
     </Card>
   );

app/playground/page.tsx

@@ -1,12 +1,4 @@
-import {
-  Card,
-  Metric,
-  Text,
-  Flex,
-  ColGrid,
-  Title,
-  BarList
-} from '@tremor/react';
+import { Card, Metric, Text, Flex, Grid, Title, BarList } from '@tremor/react';
 import Chart from './chart';
 
 const website = [
@@ -78,54 +70,47 @@ const categories: {
 export default function PlaygroundPage() {
   return (
     <main className="p-4 md:p-10 mx-auto max-w-7xl">
-      <ColGrid numColsSm={2} numColsLg={3} gapX="gap-x-6" gapY="gap-y-6">
+      <Grid className="gap-6" numColsSm={2} numColsLg={3}>
         {categories.map((item) => (
           <Card key={item.title}>
-            <Flex alignItems="items-start">
+            <Flex alignItems="start">
               <Text>{item.title}</Text>
             </Flex>
             <Flex
-              justifyContent="justify-start"
-              alignItems="items-baseline"
-              spaceX="space-x-3"
-              truncate={true}
+              className="space-x-3 truncate"
+              justifyContent="start"
+              alignItems="baseline"
             >
               <Metric>{item.metric}</Metric>
-              <Text truncate={true}>from {item.metricPrev}</Text>
+              <Text className="truncate">from {item.metricPrev}</Text>
             </Flex>
           </Card>
         ))}
-      </ColGrid>
-      <ColGrid
-        numColsSm={2}
-        numColsLg={3}
-        gapX="gap-x-6"
-        gapY="gap-y-6"
-        marginTop="mt-8"
-      >
+      </Grid>
+      <Grid className="mt-8 gap-6" numColsSm={2} numColsLg={3}>
         {data.map((item) => (
           <Card key={item.category}>
             <Title>{item.category}</Title>
             <Flex
-              justifyContent="justify-start"
-              alignItems="items-baseline"
-              spaceX="space-x-2"
+              className="space-x-2"
+              justifyContent="start"
+              alignItems="baseline"
             >
               <Metric>{item.stat}</Metric>
               <Text>Total views</Text>
             </Flex>
-            <Flex marginTop="mt-6">
+            <Flex className="mt-6">
               <Text>Pages</Text>
-              <Text textAlignment="text-right">Views</Text>
+              <Text className="text-right">Views</Text>
             </Flex>
             <BarList
+              className="mt-2"
               data={item.data}
               valueFormatter={dataFormatter}
-              marginTop="mt-2"
             />
           </Card>
         ))}
-      </ColGrid>
+      </Grid>
       <Chart />
     </main>
   );

package.json

@@ -11,7 +11,7 @@
     "@headlessui/react": "^1.7.12",
     "@heroicons/react": "^2.0.16",
     "@planetscale/database": "^1.5.0",
-    "@tremor/react": "^1.8.1",
+    "@tremor/react": "^2.0.1",
     "@types/js-cookie": "^3.0.3",
     "@types/node": "18.14.2",
     "@types/react": "18.0.28",

tailwind.config.js

@@ -1,6 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./app/**/*.{js,ts,jsx,tsx}'],
+  content: [
+    './app/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@tremor/**/*.{js,ts,jsx,tsx}'
+  ],
   theme: {
     extend: {},
   },