Get started

Step 1: Install Tailwind CSS

To style Plume UI components, we use Tailwind CSS. Begin by installing it in your project with guidance from the official Tailwind CSS installation guide.

Step 1.1: Install Mandatory Packages

Run the following command to install mandatory packages:

npm install tailwindcss-animate class-variance-authority clsx tailwind-merge

Step 1.2: Update Your Tailwind Config

Add custom configurations in your tailwind.config.js:

import type { Config } from "tailwindcss"
import animate from "tailwindcss-animate"

export default {
  darkMode: ["class"],
  content: ["src/**/*.{ts,tsx}"],
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: "1rem",
      },
    },
    extend: {
      fontFamily: {
        sans: ['var(--font-geist-sans)'],
        mono: ['var(--font-geist-mono)'],
      },
      fontSize: {
        "9xl": [
          "8rem",
          {
            lineHeight: "9.75rem",
            letterSpacing: "-0.02em",
          },
        ],
        "8xl": [
          "6rem",
          {
            lineHeight: "8rem",
            letterSpacing: "-0.02em",
          },
        ],
        "7xl": [
          "4.5rem",
          {
            lineHeight: "5.625rem",
            letterSpacing: "-0.02em",
          },
        ],
        "6xl": [
          "3.75rem",
          {
            lineHeight: "4.625rem",
            letterSpacing: "-0.02em",
          },
        ],
        "5xl": [
          "3rem",
          {
            lineHeight: "3.75rem",
            letterSpacing: "-0.02em",
          },
        ],
        "4xl": [
          "2.25rem",
          {
            lineHeight: "2.75rem",
            letterSpacing: "-0.02em",
          },
        ],
        "3xl": [
          "1.875rem",
          {
            lineHeight: "2.375rem",
            letterSpacing: "normal",
          },
        ],
        "2xl": [
          "1.5rem",
          {
            lineHeight: "2rem",
            letterSpacing: "normal",
          },
        ],
        xl: [
          "1.25rem",
          {
            lineHeight: "1.875rem",
            letterSpacing: "normal",
          },
        ],
        lg: [
          "1.125rem",
          {
            lineHeight: "1.75rem",
            letterSpacing: "normal",
          },
        ],
        base: [
          "1rem",
          {
            lineHeight: "1.5rem",
            letterSpacing: "normal",
          },
        ],
        sm: [
          "0.875rem",
          {
            lineHeight: "1.25rem",
            letterSpacing: "normal",
          },
        ],
        xs: [
          "0.75rem",
          {
            lineHeight: "1.125rem",
            letterSpacing: "normal",
          },
        ],
      },
      ringWidth: {
        3: "3px",
      },
      colors: {
        neutral: {
          50: "#F6F8FB",
          100: "#EFF1F6",
          200: "#DFE3EB",
          300: "#C9D0DB",
          400: "#979FAD",
          500: "#666E7D",
          600: "#485261",
          700: "#323C4D",
          800: "#1D2736",
          900: "#0E1524",
        },
        primary: {
          50: "#EDF5FF",
          100: "#D8E8FE",
          200: "#BCD9FE",
          300: "#90C4FD",
          400: "#5DA3FA",
          500: "#3980F6",
          600: "#2160EB",
          700: "#1A4CD8",
          800: "#1C3EAF",
          900: "#1D398A",
        },
        success: {
          50: "#E6F8E7",
          100: "#B3EAB9",
          200: "#80DA8E",
          300: "#46C867",
          400: "#00B544",
          500: "#00A025",
          600: "#008A06",
          700: "#007400",
          800: "#005D00",
          900: "#004700",
        },
        error: {
          50: "#FFEEE8",
          100: "#FFCBBB",
          200: "#FFA891",
          300: "#FF866D",
          400: "#FF654D",
          500: "#F54533",
          600: "#DC271F",
          700: "#BE0A11",
          800: "#9D0009",
          900: "#790204",
        },
        warning: {
          50: "#FFEFE6",
          100: "#FFD0B5",
          200: "#FFB289",
          300: "#FF9561",
          400: "#F1793E",
          500: "#DD6020",
          600: "#C54A04",
          700: "#A93800",
          800: "#8B2A00",
          900: "#6B2000",
        },
      },
      boxShadow: ({ theme }) => ({
        xs: `0px 1px 2px ${theme("colors.neutral.900/6%")}`,
        sm: `0px 2px 4px ${theme("colors.neutral.900/6%")}`,
        md: `0px 3px 6px ${theme("colors.neutral.900/7%")}`,
        lg: `0px 4px 8px -2px ${theme("colors.neutral.900/5%")}, 0px 5px 10px ${theme("colors.neutral.900/8%")}`,
        xl: `0px 20px 24px -4px ${theme("colors.neutral.900/10%")}, 0px 8px 8px -4px ${theme("colors.neutral.900/4%")}`,
      }),
      spacing: {
        4.5: "1.125rem",
        5.5: "1.375rem",
        6.5: "1.625rem",
      },
      transitionDuration: {
        DEFAULT: "100ms",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [animate],
} satisfies Config

Step 2: Setting Up Geist Font

Plume UI is designed to work optimally with the Geist font. You may choose another font, but we've tailored our components specifically for Geist for the best appearance.

Step 2.1: Install Geist Font

Use the following command to install Geist Font:

npm install geist

Step 2.2: Integrate Geist Font

Incorporate Geist Font into your project by updating your layout.tsx file with:

import { GeistMono } from "geist/font/mono"
import { GeistSans } from "geist/font/sans"

import "./globals.css" // Ensures Tailwind CSS is accessible

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning className={`${GeistSans.variable} ${GeistMono.variable}`}>
      <body className="text-neutral-900 antialiased">{children}</body>
    </html>
  )
}

Step 2.3: Update Tailwind Config for Fonts

If tailwind.config.js hasn't been updated yet, add these lines to include Geist fonts:

theme: {
  extend: {
    fontFamily: {
      sans: ['var(--font-geist-sans)'],
      mono: ['var(--font-geist-mono)'],
    },
  },
},

Step 3: Add Lucide React Icons

Lucide offers over 1000 SVG icons. Install this versatile icon library via:

npm install lucide-react

Step 4: Create a Helper Function for Styling

To simplify the process of merging classes and adding conditional styling with Tailwind CSS, consider creating a cn function in your lib/utils.ts file. While this step is optional, many Plume UI components uses this utility function across all components.

Add the following code to lib/utils.ts:

import type { CxOptions } from "class-variance-authority";
import { cx } from "class-variance-authority";
import { twMerge } from "tailwind-merge";

function cn(...inputs: CxOptions) {
  return twMerge(cx(inputs));
}

export { cn };

Step 5: Setup Complete!

Your setup is now complete, and you’re ready to use Plume UI components! Begin by exploring the Button component here.