Getting Started

Vite

Everything you need to set up Tremor with Vite

Installation

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

  1. 1

    Create a new Vite project

    In our terminal, we create a new Vite project for React.

    npm create vite@latest my-project -- --template react && cd my-project
  2. 2

    Install Tailwind CSS v3.4.0+ and its peer dependencies

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

    npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p

    Add the @tailwinddirectives for each of Tailwind’s layers to your ./src/index.css file.

    @tailwind base;@tailwind components;@tailwind utilities;
  3. 3

    Install Headless UI v1.7.18

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

    npm install @headlessui/react
  4. 4

    Install @headlessui/tailwindcss v0.2.0

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

    npm install @headlessui/tailwindcss
  5. 5

    Install @tailwindcss/forms v0.5.7

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

    npm install -D @tailwindcss/forms
  6. 6

    Install Tremor v3.15.0+

    To install, run:

    npm install @tremor/react
  7. 7

    Install Remix Icon v4.2.0

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

    npm install @remixicon/react
  8. 8

    Latest version of Tremor's tailwind.config.js

    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.js.

    /** @type {import('tailwindcss').Config} */import colors from 'tailwindcss/colors';
export default {  content: [    "./index.html",    "./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')],}

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