Getting Started

Next.js

Everything you need to set up Tremor with Next.js.

Installation

Tremor is designed for React and requires React v18.2.0+

  1. 1

    Create a new Next.js project:

    In our terminal, we create a new Next.js project. Stick to Tailwind CSS, use the src/ directory and the app router.
    npx create-next-app@latest my-project --ts --tailwind --eslint --app --src-dir && cd my-project
  2. 2

    Install dependencies:

    To install the core dependencies, run:

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

    (Optional) If you plan to use all components, you can add all dependencies here:

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

    Add font and dark mode background:

    In all our examples, we use Geist Font. This is not required, use any other font you like. To install, run:

    npm install geist

    Then in your app/layout.tsx, add the font and dark mode background like this:

    import type { Metadata } from "next";import { GeistSans } from "geist/font/sans"; // import fontimport "./globals.css";
export const metadata: Metadata = {  title: "Create Next App",  description: "Generated by create next app",};
export default function RootLayout({  children,}: Readonly<{  children: React.ReactNode;}>) {  return (    // add font to className, also add antialiased and dark mode    <html lang="en" className={`${GeistSans.className} antialiased dark:bg-gray-950`}>      <body>{children}</body>    </html>  );}
  4. 4

    Install @tailwindcss/forms

    To install, run:

    npm install -D @tailwindcss/forms
  5. 5

    Update tailwind.config.ts

    In order for the animations to be applied correctly, we extend the tailwind.config.ts. We also add the @tailwindcss/forms. Note that we also added the paths to the template files in the content section.

    import type { Config } from "tailwindcss"
const config: Config = {  content: [    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",    "./src/lib/**/*.{js,ts,jsx,tsx,mdx}",  ],  theme: {    extend: {      keyframes: {        hide: {          from: { opacity: "1" },          to: { opacity: "0" },        },        slideDownAndFade: {          from: { opacity: "0", transform: "translateY(-6px)" },          to: { opacity: "1", transform: "translateY(0)" },        },        slideLeftAndFade: {          from: { opacity: "0", transform: "translateX(6px)" },          to: { opacity: "1", transform: "translateX(0)" },        },        slideUpAndFade: {          from: { opacity: "0", transform: "translateY(6px)" },          to: { opacity: "1", transform: "translateY(0)" },        },        slideRightAndFade: {          from: { opacity: "0", transform: "translateX(-6px)" },          to: { opacity: "1", transform: "translateX(0)" },        },        accordionOpen: {          from: { height: "0px" },          to: { height: "var(--radix-accordion-content-height)" },        },        accordionClose: {          from: {            height: "var(--radix-accordion-content-height)",          },          to: { height: "0px" },        },        dialogOverlayShow: {          from: { opacity: "0" },          to: { opacity: "1" },        },        dialogContentShow: {          from: {            opacity: "0",            transform: "translate(-50%, -45%) scale(0.95)",          },          to: { opacity: "1", transform: "translate(-50%, -50%) scale(1)" },        },        drawerSlideLeftAndFade: {          from: { opacity: "0", transform: "translateX(100%)" },          to: { opacity: "1", transform: "translateX(0)" },        },        drawerSlideRightAndFade: {          from: { opacity: "1", transform: "translateX(0)" },          to: { opacity: "0", transform: "translateX(100%)" },        },      },    },    animation: {      hide: "hide 150ms cubic-bezier(0.16, 1, 0.3, 1)",      slideDownAndFade: "slideDownAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",      slideLeftAndFade: "slideLeftAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",      slideUpAndFade: "slideUpAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",      slideRightAndFade:        "slideRightAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",      // Accordion      accordionOpen: "accordionOpen 150ms cubic-bezier(0.87, 0, 0.13, 1)",      accordionClose: "accordionClose 150ms cubic-bezier(0.87, 0, 0.13, 1)",      // Dialog      dialogOverlayShow:        "dialogOverlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",      dialogContentShow:        "dialogContentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",      // Drawer      drawerSlideLeftAndFade:        "drawerSlideLeftAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",      drawerSlideRightAndFade: "drawerSlideRightAndFade 150ms ease-in",    },  },  plugins: [require("@tailwindcss/forms")],}export default config
  6. 6

    Add utilities and helpers

    Our components depend on a few utilities. You can read more about them in the Utilities section.

    Create a new lib folder in /src. Add a new utils.ts file inside. Paste the following utilities into this file.

    // Tremor Raw cx [v0.0.0]
import clsx, { type ClassValue } from "clsx"import { twMerge } from "tailwind-merge"
export function cx(...args: ClassValue[]) {  return twMerge(clsx(...args))}
// Tremor Raw focusInput [v0.0.1]
export const focusInput = [  // base  "focus:ring-2",  // ring color  "focus:ring-blue-200 focus:dark:ring-blue-700/30",  // border color  "focus:border-blue-500 focus:dark:border-blue-700",]
// Tremor Raw focusRing [v0.0.1]
export const focusRing = [  // base  "outline outline-offset-2 outline-0 focus-visible:outline-2",  // outline color  "outline-blue-500 dark:outline-blue-500",]
// Tremor Raw hasErrorInput [v0.0.1]
export const hasErrorInput = [  // base  "ring-2",  // border color  "border-red-500 dark:border-red-700",  // ring color  "ring-red-200 dark:ring-red-700/30",]

    Next, we add the chart utilities. Add a new chartUtils.ts file and paste the following code into this file.

    // Tremor Raw chartColors [v0.0.0]
export type ColorUtility = "bg" | "stroke" | "fill" | "text"
export const chartColors = {  blue: {    bg: "bg-blue-500",    stroke: "stroke-blue-500",    fill: "fill-blue-500",    text: "text-blue-500",  },  emerald: {    bg: "bg-emerald-500",    stroke: "stroke-emerald-500",    fill: "fill-emerald-500",    text: "text-emerald-500",  },  violet: {    bg: "bg-violet-500",    stroke: "stroke-violet-500",    fill: "fill-violet-500",    text: "text-violet-500",  },  amber: {    bg: "bg-amber-500",    stroke: "stroke-amber-500",    fill: "fill-amber-500",    text: "text-amber-500",  },  gray: {    bg: "bg-gray-500",    stroke: "stroke-gray-500",    fill: "fill-gray-500",    text: "text-gray-500",  },  cyan: {    bg: "bg-cyan-500",    stroke: "stroke-cyan-500",    fill: "fill-cyan-500",    text: "text-cyan-500",  },  pink: {    bg: "bg-pink-500",    stroke: "stroke-pink-500",    fill: "fill-pink-500",    text: "text-pink-500",  },} as const satisfies {  [color: string]: {    [key in ColorUtility]: string  }}
export type AvailableChartColorsKeys = keyof typeof chartColors
export const AvailableChartColors: AvailableChartColorsKeys[] = Object.keys(  chartColors,) as Array<AvailableChartColorsKeys>
export const constructCategoryColors = (  categories: string[],  colors: AvailableChartColorsKeys[],): Map<string, AvailableChartColorsKeys> => {  const categoryColors = new Map<string, AvailableChartColorsKeys>()  categories.forEach((category, index) => {    categoryColors.set(category, colors[index % colors.length])  })  return categoryColors}
export const getColorClassName = (  color: AvailableChartColorsKeys,  type: ColorUtility,): string => {  const fallbackColor = {    bg: "bg-gray-500",    stroke: "stroke-gray-500",    fill: "fill-gray-500",    text: "text-gray-500",  }  return chartColors[color]?.[type] ?? fallbackColor[type]}
// Tremor Raw getYAxisDomain [v0.0.0]
export const getYAxisDomain = (  autoMinValue: boolean,  minValue: number | undefined,  maxValue: number | undefined,) => {  const minDomain = autoMinValue ? "auto" : minValue ?? 0  const maxDomain = maxValue ?? "auto"  return [minDomain, maxDomain]}
// Tremor Raw hasOnlyOneValueForKey [v0.1.0]
export function hasOnlyOneValueForKey(  array: any[],  keyToCheck: string,): boolean {  const val: any[] = []
  for (const obj of array) {    if (Object.prototype.hasOwnProperty.call(obj, keyToCheck)) {      val.push(obj[keyToCheck])      if (val.length > 1) {        return false      }    }  }
  return true}
  7. 7

    Notes on your project structure

    When adding components, we recommend adding them to a components directory inside /src. Here is an example on how we'd structure our app:

    .├── src│   ├── app│   │   ├── favicon.ico│   │   ├── globals.css│   │   ├── layout.tsx│   │   └── page.tsx│   ├── components│   │   ├── Accordion.tsx│   │   ├── Badge.tsx│   │   └── ...│   └── lib│       ├── utils.ts│       └── chartUtils.ts├── package-lock.json├── package.json├── postcss.config.js├── tailwind.config.ts└── tsconfig.json

Dark mode usage:

For all examples, we use bg-gray-950 as the overall background color. You can add this to your <html className="dark:bg-gray-950"> tag.

Font smoothing (antialiasing):

On our website, we apply font smoothing and recommend you do the same. Simply add the antialiased utility to the HTML tag <html className="antialiased">.