Getting Started

Installation

Everything you need to set up Tremor.

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

Framework Guides

Tremor requires at least Tailwind CSS v3.4+. For new projects with Next.js we recommend to use at least v14.0+.

  1. 1

    Create a new Next.js project

    In our terminal, we create a new Next.js project. Stick to all defaults. When prompted: Would you like to use Tailwind CSS with this project?, select Yes. Use the src/ directory and the app router.

    npx create-next-app@14.2.6 --ts my-project && cd my-project
  2. 2

    Install Tremor v3.18.0+

    To install, run:

    npm install @tremor/react
  3. 3

    Update/Install Tailwind CSS v3.4+

    If you’ve completed the first step, Tailwind CSS should be installed in your project, and you can move on to the next step. If you’re working with an existing project, please update Tailwind CSS to the specified version. Learn more about Tailwind CSS here. To install, run:

    npm install tailwindcss@latest
  4. 4

    Install Headless UI v1.7.19

    Learn more about Headless UI here. To install, run:

    npm install @headlessui/react
  5. 5

    Install @headlessui/tailwindcss v0.2.1

    Learn more about @headlessui/tailwindcss here. To install, run:

    npm install @headlessui/tailwindcss
  6. 6

    Install @tailwindcss/forms v0.5.8

    Learn more about Tailwind CSS Forms here. To install, run:

    npm install -D @tailwindcss/forms
  7. 7

    Install Remix Icon v4.3.0

    Learn more about Remix Icon here. To install, run:

    npm install @remixicon/react
  8. 8

    Latest version of Tremor's tailwind.config.ts

    Learn more about Tremor's theming and configuration here.

    In order for the styles to be applied correctly, you will need to ensure that the path to @tremor is included in the content field of your tailwind.config.ts.

    import type { Config } from 'tailwindcss';import colors from 'tailwindcss/colors';
const config: Config = {  content: [    './src/**/*.{js,ts,jsx,tsx}',
    // Path to Tremor module    './node_modules/@tremor/**/*.{js,ts,jsx,tsx}',  ],  theme: {    transparent: 'transparent',    current: 'currentColor',    extend: {      colors: {        // light mode        tremor: {          brand: {            faint: colors.blue[50],            muted: colors.blue[200],            subtle: colors.blue[400],            DEFAULT: colors.blue[500],            emphasis: colors.blue[700],            inverted: colors.white,          },          background: {            muted: colors.gray[50],            subtle: colors.gray[100],            DEFAULT: colors.white,            emphasis: colors.gray[700],          },          border: {            DEFAULT: colors.gray[200],          },          ring: {            DEFAULT: colors.gray[200],          },          content: {            subtle: colors.gray[400],            DEFAULT: colors.gray[500],            emphasis: colors.gray[700],            strong: colors.gray[900],            inverted: colors.white,          },        },        // dark mode        'dark-tremor': {          brand: {            faint: '#0B1229',            muted: colors.blue[950],            subtle: colors.blue[800],            DEFAULT: colors.blue[500],            emphasis: colors.blue[400],            inverted: colors.blue[950],          },          background: {            muted: '#131A2B',            subtle: colors.gray[800],            DEFAULT: colors.gray[900],            emphasis: colors.gray[300],          },          border: {            DEFAULT: colors.gray[800],          },          ring: {            DEFAULT: colors.gray[800],          },          content: {            subtle: colors.gray[600],            DEFAULT: colors.gray[500],            emphasis: colors.gray[200],            strong: colors.gray[50],            inverted: colors.gray[950],          },        },      },      boxShadow: {        // light        'tremor-input': '0 1px 2px 0 rgb(0 0 0 / 0.05)',        'tremor-card':          '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',        'tremor-dropdown':          '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',        // dark        'dark-tremor-input': '0 1px 2px 0 rgb(0 0 0 / 0.05)',        'dark-tremor-card':          '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',        'dark-tremor-dropdown':          '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',      },      borderRadius: {        'tremor-small': '0.375rem',        'tremor-default': '0.5rem',        'tremor-full': '9999px',      },      fontSize: {        'tremor-label': ['0.75rem', { lineHeight: '1rem' }],        'tremor-default': ['0.875rem', { lineHeight: '1.25rem' }],        'tremor-title': ['1.125rem', { lineHeight: '1.75rem' }],        'tremor-metric': ['1.875rem', { lineHeight: '2.25rem' }],      },    },  },  safelist: [    {      pattern:        /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,      variants: ['hover', 'ui-selected'],    },    {      pattern:        /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,      variants: ['hover', 'ui-selected'],    },    {      pattern:        /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,      variants: ['hover', 'ui-selected'],    },    {      pattern:        /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,    },    {      pattern:        /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,    },    {      pattern:        /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,    },  ],  plugins: [require('@headlessui/tailwindcss'), require('@tailwindcss/forms')],};
export default config;


Dark mode usage:

For all examples, we use bg-slate-950 as the overall background color. You can add this to your <html className="dark:bg-slate-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">.

Create your first component

You are now ready to start using Tremor. If you want to create your first component, check out our tutorial.

Further Reading and Resources

Tremor Blocks

Copy and paste production-ready blocks. Check out Tremor Blocks.

Figma UI Kit

Here you'll find all components and styles for building Tremor dashboards in Figma. Check out Tremor's Figma UI Kit

Icons

We love the bold style of Remix Icon . It's a large icon set, licensed under Apache License 2.0.