Getting Started

Remix

Everything you need to set up Tremor with Remix

Installation

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

  1. 1

    Create a new Remix project

    In our terminal, we create a new Remix project.

    npx create-remix@latest my-project && cd my-project
  2. 2

    Install Tailwind CSS v3.4.0+ and generate a config file.

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

    npm install -D tailwindcssnpx tailwindcss init --ts

    Create a new ./app/tailwind.css file and add the directives.

    @tailwind base;@tailwind components;@tailwind utilities;

    Import the ./app/tailwind.css file in your ./app/root.jsx file.

    import stylesheet from "~/tailwind.css";
export const links: LinksFunction = () => [  { rel: "stylesheet", href: stylesheet },];
  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.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';
export default {  content: [    "./app/**/*.{js,jsx,ts,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")],} satisfies 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