How to build a customizable dashboard with tremor, recharts and react-grid-layout

Looking to craft a personalized dashboard that perfectly suits your data needs? You're in the right place! In this blog post, I'll guide you through the process of building a customizable dashboard using tremor and react-grid-layout.

To initiate our project, let's scaffold it using Vite with the command:

npm create vite@latest my-project

When prompted to select a framework, opt for 'React'.

Next, you'll be prompted to choose a variant. I opted for 'TypeScript'

Afterward, execute the following commands:

cd my-project
npm install
npm run dev

Congratulations! You now have an initial working project. Pretty straightforward, isn't it?

Animated GIF

For further instructions follow this guide:

Now let's install react-grid-layout by running the following command:

npm install react-grid-layout

And... we're all set! Let's dive right into working on our project!

For each chart component, I'll utilize the Card and Title components to contain the chart itself. Depending on the desired chart type (all sourced from tremor), I'll integrate either a BarChart or a PieChart. Additionally, I'm gonna use the ResponsiveContainer component from the recharts library (which tremor relies on as a dependency) to ensure the chart fits neatly with the respective card.

export enum ChartVisualization {
  BarChart = "bar",
  PieChart = "pie",
  // Add other visualization types as needed

export interface Chart {
  title: string;
  eventSchemaId: string;
  visualization: ChartVisualization;
  property: string;
  x: number;
  y: number;

type ChartProps = ComponentProps<"div"> & {
  chart: Chart,
  data: { name: string; value: number; }[],

Let's craft a chart widget tailored to each specific type of chart we aim to showcase:

function BarDashboardChart({ data }: ChartProps) {
  return (

function PieDashboardChart({ data }: ChartProps) {
  return (

In our chart component, we can map each visualization type to its corresponding component:

const visualizationComponents: Record<ChartVisualization, React.ComponentType<ChartProps>> = {
  [ChartVisualization.BarChart]: BarDashboardChart,
  [ChartVisualization.PieChart]: PieDashboardChart,
  // Map other visualization types to their components

function DashboardChart(props: ChartProps) {
  const SpecificChart = visualizationComponents[props.chart.visualization];
  return (
      <Title className="mb-6">{props.chart.title}</Title>
        <SpecificChart {...props} />

Notice that visualizationComponents corresponds not to the recharts components directly, but rather to our custom components that encapsulate and interact with recharts elements.

Once I have the list of charts, I'll iterate over it and render each chart as described:

{{ chart, data }) => (
    <DashboardChart chart={chart} data={data} />

To add a touch of responsiveness and style to our charts, let's make them customizable using the GridLayout component.

I enclose the entire preceding block, which I attached earlier, with a GridLayout tag:

  className="items-center w-[1200px]"
  layout={ => ({
    x: chart.chart.x,
    y: chart.chart.y,
    w: 1,
    h: 1,
  onLayoutChange={(layout) =>
    mutate( => ({ id: parseInt(l.i), x: l.x, y: l.y })))
  {{ chart, data }) => (
      <DashboardChart chart={chart} data={data} />

And... Voilà! Once you have enough data to display everything, it should look something like this:

Animated GIF

To make things a bit more interesting, how about we throw in an "Add Chart" button so we can dynamically pop in a chart based on the data we have?

I'll be using a new library called Floating UI for the dialog.

In the dialog, I'll allow the user to select the chart title, visualization type (bar/pie chart), the event type from the database, and one of the properties associated with this event.

In a new component that I've named AddChartDialog, I'll incorporate this code:

  {isOpen && (
    <FloatingOverlay className="Dialog-overlay" lockScroll>
      <FloatingFocusManager context={context}>
          className="bg-white p-6 rounded w-[35rem] flex flex-col"
          <Title className="text-2xl">Add Chart</Title>
          <Subtitle>Visualize your events</Subtitle>

We can now integrate Select components (also sourced from tremor) inside your dialog. For instance, we could include a Select component for choosing an event schema:

<div className="mt-4">
  <div className="mb-2 text-sm">Event Type</div>
    onValueChange={(schemaID) =>
        eventSchemas?.find((schema) => === schemaID)
    { => (
      <SelectItem key={} value={}>

Note: I could have implemented a more robust form validation system using the react-hook-form library, for the dialog of the "Add Chart" button.

For the complete context of what I've discussed here, and to get a glimpse of the entire project (including the backend), take a look at the repository of MagicInsight.