Beta

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. We use git and will be installing via npm.
    npx create-remix@latest my-project && cd my-project
  2. 2

    Install Tailwind CSS v3.4.0+ and its peer dependencies

    Learn more about Tailwind CSS here.
    npm install -D tailwindcss postcss autoprefixernpx tailwindcss init --ts -p
    Create a ./app/tailwind.css file and add the @tailwind directives.
    @tailwind base;@tailwind components;@tailwind utilities;

    Import the tailwind.css file in your ./app/root.tsx file like so:

    import type { LinksFunction } from "@remix-run/node";import stylesheet from "~/tailwind.css?url";
export const links: LinksFunction = () => [  { rel: "stylesheet", href: stylesheet },];
  3. 3

    Install @tailwindcss/forms

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

    npm install -D @tailwindcss/forms
  4. 4

    Update tailwind.config.ts

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

    import type { Config } from "tailwindcss"
// (Optional) Import default theme when using a custom font (Step 7)//import defaultTheme from 'tailwindcss/defaultTheme';
export default {  content: ["./app/**/*.{js,jsx,ts,tsx}"],  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)" },        },      },      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)",      },    },  },  plugins: [require("@tailwindcss/forms")],} satisfies Config
  5. 5

    Install dependencies:

    To install: tailwind-variants, clsx, and tailwind-merge, run:

    npm install tailwind-variants clsx tailwind-merge

    (Optional) If you plan to use all components, you can add all Radix UI 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 date-fns react-day-picker @internationalized/date @react-stately/datepicker @react-aria/datepicker

    All our components use Remix Icon. To install, run:

    npm install @remixicon/react
  6. 6

    Add font and dark mode background:

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

    Download the latest Geist.zip here.

    Create a new fonts folder in your public directory. Add the variable font file from the downloaded folder.

    .├── public│   └── fonts│   │   └── GeistVariableVF.woff2...

    Then in the tailwind.css, add the font face:

    @font-face {  font-family: 'Geist Sans';  src: url('/fonts/GeistVariableVF.woff2') format('woff2');  font-style: normal;  font-weight: 100 900;}

    Lastly, extend your theme with the font in your tailwind.conifg.ts. Make sure that you are also importing the default theme.

    import type { Config } from 'tailwindcss'
// (Optional) Import default theme when using a custom font (Step 7)import defaultTheme from 'tailwindcss/defaultTheme';
export default {  content: ['./app/**/*.{js,jsx,ts,tsx}'],  theme: {    extend: {      fontFamily: {        sans: ['Geist Sans', ...defaultTheme.fontFamily.sans],      },      keyframes: {//...

    To top if off, we recommend adding antialiasing and a default darkmode background to your root.tsx

    <html lang="en" className="antialiased dark:bg-gray-950">
  7. 7

    Add utilities and helpers

    Our components depend on a few utilities. You can read more about them in the Utilities section cx, focusInput, hasErrorInput, focusRing.

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

    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",]
  8. 8

    Notes on your project structure

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

    .├── app│   ├── components│   │   ├── Accordion.tsx│   │   ├── Badge.tsx│   │   └── ...│   ├── entry.client.tsx│   ├── entry.server.tsx│   ├── lib│   │   └── utils.ts│   ├── root.tsx│   ├── routes│   │   └── _index.tsx│   └── tailwind.css├── build├── package-lock.json├── package.json├── postcss.config.js├── public│   ├── fonts│   └── ...├── tailwind.config.ts├── tsconfig.json└── vite.config.ts

Dark mode usage:

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

Warning: 'className' is missing in props validation:

Add this inside your .eslintrc.cjs: extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"]