Tremor

https://www.tremor.so/docs/
Admin
Tremor is a React component library for building modern dashboards and data visualizations with...
Tokens:52,853
Snippets:191
Trust Score:9.3
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install Tailwind CSS and PostCSS

Source: https://www.tremor.so/docs/getting-started/installation/vite

Install Tailwind CSS v3.4.0+ and its peer dependencies, PostCSS and Autoprefixer, along with initializing Tailwind CSS.

```bash
npm install -D tailwindcss@3.4.17 postcss autoprefixernpx tailwindcss init -p
```

--------------------------------

### Install Dialog Dependencies

Source: https://www.tremor.so/docs/ui/dialog

Install the necessary Radix UI dialog package using npm.

```bash
npm install @radix-ui/react-dialog
```

--------------------------------

### Basic BarList Example

Source: https://www.tremor.so/docs/visualizations/barlist

Renders a BarList component with provided data. Ensure the BarList component is imported from '@/components/BarList'.

```javascript
import { BarList } from '@/components/BarList'
const data = [  { name: "/home", value: 843 },  { name: "/imprint", value: 46 },  { name: "/cancellation", value: 3 },  { name: "/blocks", value: 108 },  { name: "/documentation", value: 384 },]
export const BarListExample = () => {
  return <BarList data={data} />
}
```

--------------------------------

### Install Tailwind Variants

Source: https://www.tremor.so/docs/inputs/select-native

Installs the tailwind-variants package, a dependency for styling the component.

```bash
npm install tailwind-variants
```

--------------------------------

### Textarea Component Usage

Source: https://www.tremor.so/docs/inputs/textarea

Basic example of how to import and use the Textarea component with a placeholder.

```javascript
import { Textarea } from '@/components/Textarea';  export const TextareaHero = () => (  <div className="flex justify-center">    <Textarea placeholder="Write something..." />  </div>);
```

--------------------------------

### VS Code IntelliSense Setup

Source: https://www.tremor.so/docs/utilities/cx

Configure VS Code settings to enable autocompletion for the cx utility function.

```json
{
  "tailwindCSS.experimental.classRegex": [
    ["cx\(([^)]*)\)", "["'`]([^"'`]*).*?["'`]"]
  ]
}
```

--------------------------------

### Basic Dialog Example

Source: https://www.tremor.so/docs/ui/dialog

Demonstrates how to open a dialog with a title, description, and action buttons. This snippet requires importing Button, Dialog, and its sub-components from '@/components'.

```jsx
import { Button } from '@/components/Button';
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/Dialog";

export const DialogExample = () => (
  <>
    <div className="flex justify-center">
      <Dialog>
        <DialogTrigger asChild>
          <Button variant="secondary">Open Dialog</Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-lg">
          <DialogHeader>
            <DialogTitle>Account Created Successfully</DialogTitle>
            <DialogDescription className="mt-1 text-sm leading-6">
              Your account has been created successfully. You can now login to
              your account. For more information, please contact us.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter className="mt-6">
            <DialogClose asChild>
              <Button
                className="mt-2 w-full sm:mt-0 sm:w-fit"
                variant="secondary"
              >
                Go back
              </Button>
            </DialogClose>
            <DialogClose asChild>
              <Button className="w-full sm:w-fit">Ok, got it!</Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  </>
);
```

--------------------------------

### Install @tailwindcss/forms Plugin

Source: https://www.tremor.so/docs/getting-started/installation/vite

Install the @tailwindcss/forms plugin to enhance form styling capabilities.

```bash
npm install -D @tailwindcss/forms
```

--------------------------------

### Install Accordion Dependencies

Source: https://www.tremor.so/docs/ui/accordion

Install the necessary npm packages for the Tremor Accordion component. This includes Radix UI's Accordion and RemixIcon for icons.

```bash
npm install @radix-ui/react-accordion @remixicon/react
```

--------------------------------

### Install Optional Tremor Component Dependencies

Source: https://www.tremor.so/docs/getting-started/installation/vite

Install a comprehensive set of optional dependencies if you plan to use a wide range of Tremor components, including various Radix UI packages and date/charting libraries.

```bash
npm install @radix-ui/react-accordion @radix-ui/react-checkbox @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-hover-card @radix-ui/react-label @radix-ui/react-navigation-menu @radix-ui/react-popover @radix-ui/react-radio-group @radix-ui/react-select @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-tooltip @radix-ui/react-toggle-group @radix-ui/react-toggle @internationalized/date date-fns@3.6.0 react-day-picker@8.10.1 recharts @react-aria/datepicker @react-stately/datepicker
```

--------------------------------

### Area Chart with Start/End Only, Custom Y-Axis Width, No Legend, and No Tooltip

Source: https://www.tremor.so/docs/visualizations/area-chart

This example demonstrates configuring the AreaChart to only display the start and end points of the data, set a custom width for the y-axis, and hide both the legend and tooltip. It also includes a custom value formatter for the y-axis labels and an x-axis label.

```javascript
"use client"
import { AreaChart } from "@/components/AreaChart"
const chartdata = [  { hour: "00:00", temperature: 12.8 },  { hour: "01:00", temperature: 12.4 },  { hour: "02:00", temperature: 12.2 },  { hour: "03:00", temperature: 11.9 },  { hour: "04:00", temperature: 11.7 },  { hour: "05:00", temperature: 11.5 },  { hour: "06:00", temperature: 11.3 },  { hour: "07:00", temperature: 11.2 },  { hour: "08:00", temperature: 11.5 },  { hour: "09:00", temperature: 12.0 },  { hour: "10:00", temperature: 13.0 },  { hour: "11:00", temperature: 14.2 },  { hour: "12:00", temperature: 15.5 },  { hour: "13:00", temperature: 16.8 },  { hour: "14:00", temperature: 17.5 },  { hour: "15:00", temperature: 18.1 },  { hour: "16:00", temperature: 18.2 },  { hour: "17:00", temperature: 17.8 },  { hour: "18:00", temperature: 17.2 },  { hour: "19:00", temperature: 16.5 },  { hour: "20:00", temperature: 15.8 },  { hour: "21:00", temperature: 14.9 },  { hour: "22:00", temperature: 14.2 },  { hour: "23:00", temperature: 13.5 },]
export const AreaChartStartEndOnlyExample = () => (
  <AreaChart
    className="h-56"
    data={chartdata}
    index="hour"
    categories={["temperature"]}
    valueFormatter={(number: number) =>
      `${Intl.NumberFormat().format(number).toString()}°C`
    }
    yAxisWidth={40}
    startEndOnly
    connectNulls
    showLegend={false}
    showTooltip={false}
    xAxisLabel="24H Temperature Readout (Zurich)"
  />
)
```

--------------------------------

### Install Tremor Core Dependencies

Source: https://www.tremor.so/docs/getting-started/installation/vite

Install the essential npm packages for Tremor, including tailwind-variants, clsx, tailwind-merge, and @remixicon/react.

```bash
npm install tailwind-variants clsx tailwind-merge @remixicon/react
```

--------------------------------

### Accordion Component Example

Source: https://www.tremor.so/docs/ui/accordion

Demonstrates the basic structure and usage of the Accordion component with multiple items, including a disabled item. Import necessary components from '@/components/Accordion'.

```jsx
import {Accordion,AccordionContent,AccordionItem,AccordionTrigger,} from '@/components/Accordion';
export const AccordionHero = () => (
  <Accordion type="single" className="mx-auto mt-3 max-w-sm" collapsible>
    <AccordionItem value="item-1">
      <AccordionTrigger>In the app</AccordionTrigger>
      <AccordionContent>
        <ol className="flex flex-col gap-2">
          <li>
            <span className="font-semibold text-gray-900 dark:text-gray-50">
              Step 1:            </span>{" "}
            Tap the Inbox icon and then tap Add receipts.
          </li>
          <li>
            <span className="font-semibold text-gray-900 dark:text-gray-50">
              Step 2:            </span>{" "}
            Tap the + symbol to attach a photo or PDF of the receipt for our
            system to match.
          </li>
        </ol>
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-2">
      <AccordionTrigger>Via browser extension</AccordionTrigger>
      <AccordionContent>
        <ol className="flex flex-col gap-2">
          <li>
            <span className="font-semibold text-gray-900 dark:text-gray-50">
              Step 1:            </span>{" "}
            <span className="underline">Download</span> the browser extension
            for Chrome or Safari. (Firefox support is coming soon.)
          </li>
          <li>
            <span className="font-semibold text-gray-900 dark:text-gray-50">
              Step 2:            </span>{" "}
            Click the extension icon at the top of your browser. Under the
            Receipts tab, upload an image or click Screenshot current tab to
            automatically attach the receipt to the expense.
          </li>
        </ol>
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-3" disabled>
      <AccordionTrigger>Via email forwarding</AccordionTrigger>
      <AccordionContent>
        Yes! You can animate the Accordion with CSS or JavaScript.
      </AccordionContent>
    </AccordionItem>
  </Accordion>);

```

--------------------------------

### Install Tremor Slider Dependencies

Source: https://www.tremor.so/docs/inputs/slider

Installs the necessary Radix UI Slider package for the Tremor Slider component. Run this command in your project's terminal.

```bash
npm install @radix-ui/react-slider
```

--------------------------------

### Prettier Plugin Setup

Source: https://www.tremor.so/docs/utilities/cx

Integrate the cx function with prettier-plugin-tailwindcss for automatic sorting of class names.

```javascript
module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
  tailwindFunctions: ['cx']
};
```

--------------------------------

### Install Recharts Dependency

Source: https://www.tremor.so/docs/visualizations/area-chart

Installs the recharts library, which is a required dependency for the Area Chart component.

```bash
npm i recharts
```

--------------------------------

### Area Chart with Axis Labels and Solid Fill

Source: https://www.tremor.so/docs/visualizations/area-chart

This example shows how to configure an Area Chart with custom axis labels and a solid fill. It uses sample data for solar panel energy production.

```javascript
"use client"
import { AreaChart } from "@/components/AreaChart"
const chartdata = [  {    date: "Jan 23",    SolarPanels: 2890,  },  {    date: "Feb 23",    SolarPanels: 2756,  },  {    date: "Mar 23",    SolarPanels: 3322,  },  {    date: "Apr 23",    SolarPanels: 3470,  },  {    date: "May 23",    SolarPanels: 3475,  },  {    date: "Jun 23",    SolarPanels: 3129,  },  {    date: "Jul 23",    SolarPanels: 3490,  },  {    date: "Aug 23",    SolarPanels: 2903,  },  {    date: "Sep 23",    SolarPanels: 2643,  },  {    date: "Oct 23",    SolarPanels: 2837,  },  {    date: "Nov 23",    SolarPanels: 2954,  },  {    date: "Dec 23",    SolarPanels: 3239,  },]
export const AreaChartAxisLabelsExample = () => (
  <AreaChart
    className="h-80"
    data={chartdata}
    index="date"
    categories={["SolarPanels"]}
    valueFormatter={(number: number) =>
      `$${Intl.NumberFormat("us").format(number).toString()}`
    }
    onValueChange={(v) => console.log(v)}
    xAxisLabel="Month"
    yAxisLabel="Spend Category"
    fill="solid"
  />
)
```

--------------------------------

### Example Usage of cx Utility

Source: https://www.tremor.so/docs/utilities/cx

Demonstrates how to use the cx utility within a React component to conditionally apply Tailwind CSS classes based on the isShowArray prop.

```typescript
const Line = (props: LineProps) => {
  const { line, lineProps, getTokenProps, isShowArray = true } = props;

  return (
    <span
      {...lineProps}
      className={cx(
        'table-row',
        !isShowArray ? 'absolute opacity-0' : 'relative',
        lineProps.className
      )}
    >
      <span>
        {line.map((token, key) => (
          <span key={key} {...getTokenProps({ token })} />
        ))}
      </span>
    </span>
  );
};

```

--------------------------------

### Area Chart with Clickable Values (onValueChange)

Source: https://www.tremor.so/docs/visualizations/area-chart

This example demonstrates how to make the Area Chart interactive using the `onValueChange` prop. It logs the selected data point to the console and displays it below the chart.

```javascript
"use client"
import React from "react"
import { AreaChart, type AreaChartEventProps } from "@/components/AreaChart"
const chartdata = [
  {
    date: "Jan 23",
    2022: 45,
    2023: 78,
  },
  {
    date: "Feb 23",
    2022: 52,
    2023: 71,
  },
  {
    date: "Mar 23",
    2022: 48,
    2023: 80,
  },
  {
    date: "Apr 23",
    2022: 61,
    2023: 65,
  },
  {
    date: "May 23",
    2022: 55,
    2023: 58,
  },
  {
    date: "Jun 23",
    2022: 67,
    2023: 62,
  },
  {
    date: "Jul 23",
    2022: 60,
    2023: 54,
  },
  {
    date: "Aug 23",
    2022: 72,
    2023: 49,
  },
  {
    date: "Sep 23",
    2022: 65,
    2023: 52,
  },
  {
    date: "Oct 23",
    2022: 68,
    2023: null,
  },
  {
    date: "Nov 23",
    2022: 74,
    2023: null,
  },
  {
    date: "Dec 23",
    2022: 71,
    2023: null,
  },
]
export const AreaChartOnValueChangeExample = () => {
  const [value, setValue] = React.useState<AreaChartEventProps>(null)
  return (
    <>
      <AreaChart
        className="mt-4 h-72"
        data={chartdata}
        index="date"
        categories={["2022", "2023"]}
        colors={["gray", "blue"]}
        yAxisWidth={30}
        onValueChange={(v) => setValue(v)}
      />
      <pre className="mt-8 rounded-md bg-gray-950 p-3 text-sm text-white dark:bg-gray-800">
        {JSON.stringify(value, null, 2)}
      </pre>
    </>
  )
}

```

--------------------------------

### Bar Chart with Custom Tooltip

Source: https://www.tremor.so/docs/visualizations/bar-chart

Demonstrates how to implement a custom tooltip for the Bar Chart component. This example shows data transformation and custom styling for the tooltip.

```javascript
import { cx } from "@/lib/utils"import { BarChart, TooltipProps } from "@/components/BarChart";
interface Issue {
    status: "completed" | "in progress" | "on hold";
    value: number;
    percentage: number;
}
interface DataEntry {
    date: string;
    issues: Issue[];
}
const data: DataEntry[] = [
    {
        date: "Jun 1, 24",
        issues: [
            {
                status: "completed",
                value: 47,
                percentage: 24.2,
            },
            {
                status: "in progress",
                value: 83,
                percentage: 41.9,
            },
            {
                status: "on hold",
                value: 67,
                percentage: 33.9,
            },
        ],
    },
    {
        date: "Jun 2, 24",
        issues: [
            {
                status: "completed",
                value: 20,
                percentage: 20.6,
            },
            {
                status: "in progress",
                value: 97,
                percentage: 77.3,
            },
            {
                status: "on hold",
                value: 12,
                percentage: 2.1,
            },
        ],
    },
    {
        date: "Jun 3, 24",
        issues: [
            {
                status: "completed",
                value: 30,
                percentage: 29.4,
            },
            {
                status: "in progress",
                value: 45,
                percentage: 43.1,
            },
            {
                status: "on hold",
                value: 66,
                percentage: 27.5,
            },
        ],
    },
    {
        date: "Jun 4, 24",
        issues: [
            {
                status: "completed",
                value: 41,
                percentage: 28.1,
            },
            {
                status: "in progress",
                value: 18,
                percentage: 17.9,
            },
            {
                status: "on hold",
                value: 70,
                percentage: 54.0,
            },
        ],
    },
    {
        date: "Jun 5, 24",
        issues: [
            {
                status: "completed",
                value: 55,
                percentage: 28.8,
            },
            {
                status: "in progress",
                value: 14,
                percentage: 25.0,
            },
            {
                status: "on hold",
                value: 60,
                percentage: 46.2,
            },
        ],
    },
    {
        date: "Jun 6, 24",
        issues: [
            {
                status: "completed",
                value: 35,
                percentage: 28.8,
            },
            {
                status: "in progress",
                value: 14,
                percentage: 19.2,
            },
            {
                status: "on hold",
                value: 80,
                percentage: 51.9,
            },
        ],
    },
    {
        date: "Jun 7, 24",
        issues: [
            {
                status: "completed",
                value: 15,
                percentage: 20.0,
            },
            {
                status: "in progress",
                value: 55,
                percentage: 35.2,
            },
            {
                status: "on hold",
                value: 72,
                percentage: 44.8,
            },
        ],
    },
    {
        date: "Jun 8, 24",
        issues: [
            {
                status: "completed",
                value: 15,
                percentage: 21.7,
            },
            {
                status: "in progress",
                value: 69,
                percentage: 48.2,
            },
            {
                status: "on hold",
                value: 45,
                percentage: 30.1,
            },
        ],
    },
];
// Transform data into a format suitable for BarChart
const formattedArray = data.map((entry) => {
    return {
        date: entry.date,
        ...entry.issues.reduce(
            (acc, issue) => {
                acc[issue.status] = issue.value;
                return acc;
            },
            {} as { [key in Issue["status"]]?: number }
        ),
    };
});

const valueFormatter = (number: number) => {
    return Intl.NumberFormat("us").format(number).toString();
};

const status = {
    "completed": "bg-blue-500 dark:bg-blue-500",
    "in progress": "bg-cyan-500 dark:bg-cyan-500",
    "on hold": "bg-violet-500 dark:bg-violet-500",
};

const Tooltip = ({ payload, active, label }: TooltipProps) => {
    if (!active || !payload || payload.length === 0) return null;

    const data = payload.map((item) => ({
        status: item.category as Issue["status"],
        value: item.value,
        percentage: (
            (item.value /
            (item.payload.completed +
            item.payload["in progress"] +
            item.payload["on hold"]))
            * 100
        ).toFixed(2),
    }));

    return (
        <div className="rounded-tremor-default border border-tremor-border bg-tremor-background p-2 text-tremor-content shadow-tremor-input">
            <div className="flex flex-1 items-center space-x-2">
                <div className={cx("w-1.5 h-1.5 rounded-full", status[data[0].status])}></div>
                <p className="text-tremor-content-emphasis font-medium">{label}</p>
            </div>
            {data.map((item) => (
                <div key={item.status} className="flex flex-1 items-center justify-between space-x-4 py-1">
                    <p className="text-sm">{item.status}</p>
                    <p className="font-medium text-tremor-content-emphasis">{valueFormatter(item.value)}</p>
                </div>
            ))}
        </div>
    );
};

// Example usage within a BarChart component (assuming BarChart is imported and configured)
// <BarChart
//   data={formattedArray}
//   index="date"
//   categories={["completed", "in progress", "on hold"]}
//   colors={["blue", "cyan", "violet"]}
//   valueFormatter={valueFormatter}
//   customTooltip={Tooltip}
// />
```

--------------------------------

### Dialog Component Example

Source: https://www.tremor.so/docs/ui/dialog

This snippet demonstrates how to use the Dialog component, including its trigger, content, header, description, and footer with close buttons. It requires importing Button and various Dialog components from '@/components'.

```typescript
import { Button } from '@/components/Button';
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/Dialog";

export const DialogHero = () => (
  <div className="flex justify-center">
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="secondary">Open Dialog</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>Account Created Successfully</DialogTitle>
          <DialogDescription className="mt-1 text-sm leading-6">
            Your account has been created successfully. You can now login to
            your account. For more information, please contact us.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter className="mt-6">
          <DialogClose asChild>
            <Button
              className="mt-2 w-full sm:mt-0 sm:w-fit"
              variant="secondary"
            >
              Go back
            </Button>
          </DialogClose>
          <DialogClose asChild>
            <Button className="w-full sm:w-fit">Ok, got it!</Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </div>
);
```

--------------------------------

### Bar Chart Component Usage

Source: https://www.tremor.so/docs/visualizations/bar-chart

Example of how to use the BarChart component with sample data and configuration. Requires 'date' as index and 'SolarPanels', 'Inverters' as categories.

```tsx
"use client"
import { BarChart } from "@/components/BarChart"
const chartdata = [  {    date: "Jan 23",    SolarPanels: 2890,
    Inverters: 2338,
  },
  {
    date: "Feb 23",
    SolarPanels: 2756,
    Inverters: 2103,
  },
  {
    date: "Mar 23",
    SolarPanels: 3322,
    Inverters: 2194,
  },
  {
    date: "Apr 23",
    SolarPanels: 3470,
    Inverters: 2108,
  },
  {
    date: "May 23",
    SolarPanels: 3475,
    Inverters: 1812,
  },
  {
    date: "Jun 23",
    SolarPanels: 3129,
    Inverters: 1726,
  },
  {
    date: "Jul 23",
    SolarPanels: 3490,
    Inverters: 1982,
  },
  {
    date: "Aug 23",
    SolarPanels: 2903,
    Inverters: 2012,
  },
  {
    date: "Sep 23",
    SolarPanels: 2643,
    Inverters: 2342,
  },
  {
    date: "Oct 23",
    SolarPanels: 2837,
    Inverters: 2473,
  },
  {
    date: "Nov 23",
    SolarPanels: 2954,
    Inverters: 3848,
  },
  {
    date: "Dec 23",
    SolarPanels: 3239,
    Inverters: 3736,
  },
]
export const BarChartHero = () => (
  <BarChart
    className="h-80"
    data={chartdata}
    index="date"
    categories={["SolarPanels", "Inverters"]}
    valueFormatter={(number: number) =>
      `$${Intl.NumberFormat("us").format(number).toString()}`
    }
    onValueChange={(v) => console.log(v)}
  />
)
```

--------------------------------

### Area Chart with Tooltip Callback

Source: https://www.tremor.so/docs/visualizations/area-chart

This example shows how to use the `tooltipCallback` prop to update component state based on tooltip interactions. It formats the revenue data using a currency formatter and displays the latest month's revenue by default.

```javascript
"use client"
import React from "react"
import { AreaChart, TooltipCallbackProps } from "@/components/AreaChart"
interface DataItem {
  date: string
  revenue: number
}
const data: DataItem[] = [
  {
    date: "Jan 23",
    revenue: 2340,
  },
  {
    date: "Feb 23",
    revenue: 3110,
  },
  {
    date: "Mar 23",
    revenue: 4643,
  },
  {
    date: "Apr 23",
    revenue: 4650,
  },
  {
    date: "May 23",
    revenue: 3980,
  },
  {
    date: "Jun 23",
    revenue: 4702,
  },
  {
    date: "Jul 23",
    revenue: 5990,
  },
  {
    date: "Aug 23",
    revenue: 5700,
  },
  {
    date: "Sep 23",
    revenue: 4250,
  },
  {
    date: "Oct 23",
    revenue: 4182,
  },
  {
    date: "Nov 23",
    revenue: 3812,
  },
  {
    date: "Dec 23",
    revenue: 4900,
  },
]
function AreaChartCallbackExample() {
  const [datas, setDatas] = React.useState<TooltipCallbackProps | null>(null)
  const currencyFormatter = (number: number) =>
    `$${Intl.NumberFormat("us").format(number)}`
  const payload = datas?.payload?.[0]
  const value = payload?.value
  const formattedValue = payload
    ? currencyFormatter(value)
    : currencyFormatter(data[data.length - 1].revenue)
  return (
    <div>
      <p className="text-sm text-gray-700 dark:text-gray-300">
        Revenue by month
      </p>
      <p className="mt-2 text-xl font-semibold text-gray-900 dark:text-gray-50">
        {formattedValue}
      </p>
      <AreaChart
        data={data}
        index="date"
        categories={["revenue"]}
        showLegend={false}
        showYAxis={false}
        startEndOnly={true}
        className="-mb-2 mt-8 h-48"
        tooltipCallback={(props) => {
          if (props.active) {
            setDatas((prev) => {
              if (prev?.label === props.label) return prev
              return props
            })
          } else {
            setDatas(null)
          }
          return null
        }}
      />
    </div>
  )
}

```

--------------------------------

### Basic Area Chart Example

Source: https://www.tremor.so/docs/visualizations/area-chart

A simple area chart displaying data points over time. Requires importing the Chart and AreaChart components.

```jsx
import { Chart, AreaChart, Card, Title } from '@tremor/react'

const data = [
  { date: '2023-01-01', Semi-detached house: 50, Bungalow: 30 },
  { date: '2023-01-02', Semi-detached house: 55, Bungalow: 32 },
  { date: '2023-01-03', Semi-detached house: 52, Bungalow: 35 },
  { date: '2023-01-04', Semi-detached house: 58, Bungalow: 33 },
  { date: '2023-01-05', Semi-detached house: 60, Bungalow: 38 },
  { date: '2023-01-06', Semi-detached house: 59, Bungalow: 40 },
  { date: '2023-01-07', Semi-detached house: 62, Bungalow: 39 },
]

export const AreaChartHero = () => (
  <Card>
    <Title>House prices over time (GBP £)</Title>
    <Chart>
      <AreaChart
        data={data}
        index="date"
        categories={['Semi-detached house', 'Bungalow']}
        colors={['blue', 'cyan']}
      />
    </Chart>
  </Card>
)
```

--------------------------------

### SelectNative with Label

Source: https://www.tremor.so/docs/inputs/select-native

Demonstrates how to use the SelectNative component with a Label for accessibility. This example shows a common pattern for form inputs.

```javascript
import { Label } from "@/components/Label"
import { SelectNative } from "@/components/SelectNative";
export const SelectNativeLabelExample = () => (
  <>
    <div className="mx-auto flex max-w-xs flex-col">
      <Label htmlFor="age1">Select age</Label>
      <SelectNative id="age1" className="mt-2">
        <option value="0-18">18 and under</option>
        <option value="19-39">19 to 39</option>
        <option value="40-64">40 to 64</option>
        <option value="65-infinity">65 and over</option>
      </SelectNative>
    </div>
  </>);

```

--------------------------------

### Bar Chart with Custom Tooltip Implementation

Source: https://www.tremor.so/docs/visualizations/bar-chart

This example shows how to integrate the custom tooltip component with a stacked bar chart. It includes responsive configurations for both large and small screens. Ensure the `customTooltip` prop is set to your defined tooltip component.

```jsx
function BarChartCustomTooltipExample() {
    return (
        <div>
            <BarChart
                className="hidden h-72 sm:block"
                data={formattedArray}
                index="date"
                categories={["completed", "in progress", "on hold"]}
                type="stacked"
                colors={["blue", "cyan", "violet"]}
                valueFormatter={valueFormatter}
                yAxisWidth={35}
                showLegend={false}
                customTooltip={Tooltip}
            />
            <BarChart
                className="h-80 sm:hidden"
                data={formattedArray}
                index="date"
                categories={["completed", "in progress", "on hold"]}
                type="stacked"
                colors={["blue", "cyan", "violet"]}
                valueFormatter={valueFormatter}
                showYAxis={false}
                showLegend={false}
                startEndOnly={true}
                customTooltip={Tooltip}
            />
        </div>
    );
}
```

--------------------------------

### Create New Vite Project

Source: https://www.tremor.so/docs/getting-started/installation/vite

Use this command to initialize a new Vite project with the React TypeScript template.

```bash
npm create vite@latest my-project -- --template react-ts && cd my-project
```

--------------------------------

### Project Structure for Fonts

Source: https://www.tremor.so/docs/getting-started/installation/vite

Illustrates the recommended directory structure for adding custom font files within the assets folder.

```bash
.├── src│   └── assets│   │   └── fonts│   │   │   └── GeistVariableVF.woff2...
```

--------------------------------

### Conditional RenderShape Color Example

Source: https://www.tremor.so/docs/visualizations/bar-chart

Demonstrates conditional rendering of colors for shapes within a chart based on value. This example uses a ternary operator to apply different background colors.

```jsx
<div className={cx("space-y-1 px-4 py-2")}>          {filteredPayload.map(
            (
              { value, name }: { value: number; name: string },
              index: number,
            ) => (
              <ChartTooltipRow
                key={`id-${index}`}
                value={valueFormatter(value)}
                name={name}
                color={cx(value >= 0 ? "bg-emerald-600" : "bg-rose-500")}
              />
            ),
          )}
        </div>      </div>    )  }  return null}
```

--------------------------------

### Disabled Textarea Example

Source: https://www.tremor.so/docs/inputs/textarea

Demonstrates how to disable the Textarea component, preventing user input. This is useful for read-only states or when input is temporarily unavailable.

```javascript
import { Textarea } from '@/components/Textarea';  export const TextareaDisabledExample = () => (  <div className="flex justify-center">    <Textarea placeholder="Disabled" disabled />  </div>)
```

--------------------------------

### Basic Slider Usage

Source: https://www.tremor.so/docs/inputs/slider

Demonstrates the basic usage of the Slider component with a default value. Ensure the component is imported correctly from '@/components/Slider'.

```javascript
"use client"
import { Slider } from "@/components/Slider"
export const SliderHero = () => (
  <Slider
    defaultValue={[55]}
    className="mx-auto my-8 data-[orientation='horizontal']:w-[65%]"
  />
)
```

--------------------------------

### Area Chart with Scrollable Legend

Source: https://www.tremor.so/docs/visualizations/area-chart

An area chart featuring a scrollable legend for managing a large number of categories. This example utilizes `enableLegendSlider` and associated event handlers.

```jsx
import React from 'react'
import { Chart, AreaChart, Card, Title, Tooltip, Legend } from '@tremor/react'

const data = [
  { date: '2023-01-01', Semi_detached_house: 50, Bungalow: 30, Apartment: 20 },
  { date: '2023-01-02', Semi_detached_house: 55, Bungalow: 32, Apartment: 22 },
  { date: '2023-01-03', Semi_detached_house: 52, Bungalow: 35, Apartment: 25 },
  { date: '2023-01-04', Semi_detached_house: 58, Bungalow: 33, Apartment: 23 },
  { date: '2023-01-05', Semi_detached_house: 60, Bungalow: 38, Apartment: 28 },
  { date: '2023-01-06', Semi_detached_house: 59, Bungalow: 40, Apartment: 27 },
  { date: '2023-01-07', Semi_detached_house: 62, Bungalow: 39, Apartment: 30 },
]

const categories = ['Semi-detached house', 'Bungalow', 'Apartment']
const colors = ['blue', 'cyan', 'green']

export const AreaChartScrollableLegend = () => {
  const scrollableRef = React.useRef<HTMLInputElement>(null)
  const scrollButtonsRef = React.useRef<HTMLDivElement>(null)
  const [hasScroll, setHasScroll] = React.useState<{ left: boolean; right: boolean } | null>(null)
  const [isKeyDowned, setIsKeyDowned] = React.useState<string | null>(null)
  const intervalRef = React.useRef<NodeJS.Timeout | null>(null)

  const checkScroll = React.useCallback(() => {
    const scrollable = scrollableRef?.current
    if (!scrollable) return
    const hasLeftScroll = scrollable.scrollLeft > 0
    const hasRightScroll = scrollable.scrollWidth - scrollable.clientWidth > scrollable.scrollLeft
    setHasScroll({ left: hasLeftScroll, right: hasRightScroll })
  }, [setHasScroll])

  const scrollToTest = React.useCallback(
    (direction: 'left' | 'right') => {
      const element = scrollableRef?.current
      const scrollButtons = scrollButtonsRef?.current
      const scrollButtonsWith = scrollButtons?.clientWidth ?? 0
      const width = element?.clientWidth ?? 0

      if (element) {
        element.scrollTo({
          left:
            direction === 'left'
              ? element.scrollLeft - width + scrollButtonsWith
              : element.scrollLeft + width - scrollButtonsWith,
          behavior: 'smooth',
        })
        setTimeout(() => {
          checkScroll()
        }, 400)
      }
    },
    [checkScroll],
  )

  React.useEffect(() => {
    const keyDownHandler = (key: string) => {
      if (key === 'ArrowLeft') {
        scrollToTest('left')
      } else if (key === 'ArrowRight') {
        scrollToTest('right')
      }
    }
    if (isKeyDowned) {
      keyDownHandler(isKeyDowned)
      intervalRef.current = setInterval(() => {
        keyDownHandler(isKeyDowned)
      }, 300)
    } else {
      clearInterval(intervalRef.current as NodeJS.Timeout)
    }
    return () => clearInterval(intervalRef.current as NodeJS.Timeout)
  }, [isKeyDowned, scrollToTest])

  const keyDown = (e: KeyboardEvent) => {
    e.stopPropagation()
    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
      e.preventDefault()
      setIsKeyDowned(e.key)
    }
  }

  const keyUp = (e: KeyboardEvent) => {
    e.stopPropagation()
    setIsKeyDowned(null)
  }

  React.useEffect(() => {
    const scrollable = scrollableRef?.current
    checkScroll()
    scrollable?.addEventListener('keydown', keyDown)
    scrollable?.addEventListener('keyup', keyUp)

    return () => {
      scrollable?.removeEventListener('keydown', keyDown)
      scrollable?.removeEventListener('keyup', keyUp)
    }
  }, [checkScroll])

  return (
    <Card>
      <div className="flex">
        <Title>House prices over time (GBP £)</Title>
        <Legend
          ref={scrollableRef}
          categories={categories}
          colors={colors}
          enableLegendSlider={true}
          className="ml-auto"
        />
      </div>
      <Chart>
        <AreaChart
          data={data}
          index="date"
          categories={categories}
          colors={colors}
        >
          <Tooltip />
        </AreaChart>
      </Chart>
    </Card>
  )
}

```

--------------------------------

### BarList Component Usage

Source: https://www.tremor.so/docs/visualizations/barlist

Demonstrates how to import and use the BarList component with sample data. It includes a toast notification that appears when a bar's value changes.

```javascript
import { BarList } from "@/components/BarList"
import { Toaster } from "@/components/Toaster"
import { useToast } from "@/lib/useToast"

const data = [
  { name: "/home", value: 843 },
  { name: "/imprint", value: 46 },
  { name: "/cancellation", value: 3 },
  { name: "/blocks", value: 108 },
  { name: "/documentation", value: 384 },
]

export const BarListHero = () => {
  const { toast } = useToast()
  return (
    <>
      <Toaster />
      <BarList
        data={data}
        onValueChange={(item) =>
          toast({
            description: JSON.stringify(item, null, 2),
          })
        }
      />
    </>
  )
}
```

--------------------------------

### Area Chart Component Structure

Source: https://www.tremor.so/docs/visualizations/area-chart

The basic structure of the Area Chart component using Recharts. It includes setup for responsiveness, data binding, click handlers, margins, and stack offsets.

```jsx
return (
      <div
        ref={ref}
        className={cx("h-80 w-full", className)}
        tremor-id="tremor-raw"
        {...other}
      >
        <ResponsiveContainer>
          <RechartsAreaChart
            data={data}
            onClick={
              hasOnValueChange && (activeLegend || activeDot)
                ? () => {
                    setActiveDot(undefined)
                    setActiveLegend(undefined)
                    onValueChange?.(null)
                  }
                : undefined
            }
            margin={{
              bottom: xAxisLabel ? 30 : undefined,
              left: yAxisLabel ? 20 : undefined,
              right: yAxisLabel ? 5 : undefined,
              top: 5,
            }}
            stackOffset={type === "percent" ? "expand" : undefined}
          >
            {showGridLines ? (
              <CartesianGrid
                className={cx("stroke-gray-200 stroke-1 dark:stroke-gray-800")}
                horizontal={true}
                vertical={false}
              />
            ) : null}
            <XAxis
              padding={{ left: paddingValue, right: paddingValue }}
              hide={!showXAxis}
              dataKey={index}
              interval={startEndOnly ? "preserveStartEnd" : intervalType}
              tick={{ transform: "translate(0, 6)" }}
              ticks={
                startEndOnly
                  ? [data[0][index], data[data.length - 1][index]]
                  : undefined
              }
              fill=""
              stroke=""
              className={cx(
                // base
                "text-xs",
                // text fill
                "fill-gray-500 dark:fill-gray-500",
              )}
              tickLine={false}
              axisLine={false}
              minTickGap={tickGap}
            >
              {xAxisLabel && (
                <Label
                  position="insideBottom"
                  offset={-20}
                  className="fill-gray-800 text-sm font-medium dark:fill-gray-200"
                >
                  {xAxisLabel}
                </Label>
              )}
            </XAxis>
            <YAxis
              width={yAxisWidth}
              hide={!showYAxis}
              axisLine={false}
              tickLine={false}
              type="number"
              domain={yAxisDomain as AxisDomain}
              tick={{ transform: "translate(-3, 0)" }}
              fill=""
              stroke=""
              className={cx(
                // base
                "text-xs",
                // text fill
                "fill-gray-500 dark:fill-gray-500",
              )}
              tickFormatter={
                type === "percent" ? valueToPercent : valueFormatter
              }
              allowDecimals={allowDecimals}
            >
              {yAxisLabel && (
                <Label
                  position="insideLeft"
                  style={{ textAnchor: "middle" }}
                  angle={-90}
                  offset={-15}
                  className="fill-gray-800 text-sm font-medium dark:fill-gray-200"
                >
                  {yAxisLabel}
                </Label>
              )}
            </YAxis>
            <Tooltip
              wrapperStyle={{ outline: "none" }}
              isAnimationActive={true}
              animationDuration={100}
              cursor={{ stroke: "#d1d5db", strokeWidth: 1 }}
              offset={20}
              position={{ y: 0 }}
              content={({ active, payload, label }) => {
                const cleanPayload: TooltipProps["payload"] = payload
                  ? payload.map((item: any) => ({
                      category: item.dataKey,
                      value: item.value,
                      index: item.payload[index],
                      color: categoryColors.get(
                        item.dataKey,
                      ) as AvailableChartColorsKeys,
                      type: item.type,
                      payload: item.payload,
                    }))
                  : []
                if (
                  tooltipCallback &&
                  (active !== prevActiveRef.current ||
                    label !== prevLabelRef.current)
                ) {
                  tooltipCallback({ active, payload: cleanPayload, label })
                  prevActiveRef.current = active
                  prevLabelRef.current = label
                }
                return showTooltip && active ? (
                  CustomTooltip ? (
                    <CustomTooltip
                      active={active}
                      payload={cleanPayload}
                      label={label}
                    />
                  ) : (
                    <ChartTooltip
                      active={active}
                      payload={cleanPayload}
                      label={label}
                      valueFormatter={valueFormatter}
                    />
                  )
                ) : null
              }}
            />
          </RechartsAreaChart>
        </ResponsiveContainer>
      </div>
    );
```

--------------------------------

### Accordion Animation CSS Variables

Source: https://www.tremor.so/docs/ui/accordion

Define CSS variables for accordion open and close animations in your global CSS file. This setup uses keyframe animations to control the height transition.

```css
@theme {
  --animate-accordion-open: accordionOpen 150ms cubic-bezier(0.87, 0, 0.13, 1);
  --animate-accordion-close: accordionClose 150ms cubic-bezier(0.87, 0, 0.13, 1);

  @keyframes accordionOpen {
    from { height: 0px; }
    to { height: var(--radix-accordion-content-height); }
  }

  @keyframes accordionClose {
    from { height: var(--radix-accordion-content-height); }
    to { height: 0px; }
  }
}
```
Tokens:
Raw