Get started

Before you can add Plume UI components to your project, you need to add a few configuration files and dependencies.

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 tw-animate-css class-variance-authority clsx tailwind-merge
Step 1.2: Update Your Tailwind Style

Add custom configurations in your globals.css:

@import "tailwindcss";
@import "tw-animate-css";

@utility container {
  margin-inline: auto;
  padding-inline: 1rem;
}

@theme {
  /* Font sizes */
  --text-9xl: 8rem;
  --text-9xl--line-height: 9.75rem;
  --text-9xl--letter-spacing: -0.02em;

  --text-8xl: 6rem;
  --text-8xl--line-height: 8rem;
  --text-8xl--letter-spacing: -0.02em;

  --text-7xl: 4.5rem;
  --text-7xl--line-height: 5.625rem;
  --text-7xl--letter-spacing: -0.02em;

  --text-6xl: 3.75rem;
  --text-6xl--line-height: 4.625rem;
  --text-6xl--letter-spacing: -0.02em;

  --text-5xl: 3rem;
  --text-5xl--line-height: 3.75rem;
  --text-5xl--letter-spacing: -0.02em;

  --text-4xl: 2.25rem;
  --text-4xl--line-height: 2.75rem;
  --text-4xl--letter-spacing: -0.02em;

  --text-3xl: 1.875rem;
  --text-3xl--line-height: 2.375rem;
  --text-3xl--letter-spacing: 0;

  --text-2xl: 1.5rem;
  --text-2xl--line-height: 2rem;
  --text-2xl--letter-spacing: 0;

  --text-xl: 1.25rem;
  --text-xl--line-height: 1.875rem;
  --text-xl--letter-spacing: 0;

  --text-lg: 1.125rem;
  --text-lg--line-height: 1.75rem;
  --text-lg--letter-spacing: 0;

  --text-base: 1rem;
  --text-base--line-height: 1.5rem;
  --text-base--letter-spacing: 0;

  --text-sm: 0.875rem;
  --text-sm--line-height: 1.25rem;
  --text-sm--letter-spacing: 0;

  --text-xs: 0.75rem;
  --text-xs--line-height: 1.125rem;
  --text-xs--letter-spacing: 0;

  /* Letter spacing for large text sizes */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;

  /* Color palette */
  --color-neutral-50: #f6f8fb;
  --color-neutral-100: #eff1f6;
  --color-neutral-200: #dfe3eb;
  --color-neutral-300: #c9d0db;
  --color-neutral-400: #979fad;
  --color-neutral-500: #666e7d;
  --color-neutral-600: #485261;
  --color-neutral-700: #323c4d;
  --color-neutral-800: #1d2736;
  --color-neutral-900: #0e1524;

  --color-primary-50: #edf5ff;
  --color-primary-100: #d8e8fe;
  --color-primary-200: #bcd9fe;
  --color-primary-300: #90c4fd;
  --color-primary-400: #5da3fa;
  --color-primary-500: #3980f6;
  --color-primary-600: #2160eb;
  --color-primary-700: #1a4cd8;
  --color-primary-800: #1c3eaf;
  --color-primary-900: #1d398a;

  --color-success-50: #e6f8e7;
  --color-success-100: #b3eab9;
  --color-success-200: #80da8e;
  --color-success-300: #46c867;
  --color-success-400: #00b544;
  --color-success-500: #00a025;
  --color-success-600: #008a06;
  --color-success-700: #007400;
  --color-success-800: #005d00;
  --color-success-900: #004700;

  --color-error-50: #ffeee8;
  --color-error-100: #ffcbbb;
  --color-error-200: #ffa891;
  --color-error-300: #ff866d;
  --color-error-400: #ff654d;
  --color-error-500: #f54533;
  --color-error-600: #dc271f;
  --color-error-700: #be0a11;
  --color-error-800: #9d0009;
  --color-error-900: #790204;

  --color-warning-50: #ffefe6;
  --color-warning-100: #ffd0b5;
  --color-warning-200: #ffb289;
  --color-warning-300: #ff9561;
  --color-warning-400: #f1793e;
  --color-warning-500: #dd6020;
  --color-warning-600: #c54a04;
  --color-warning-700: #a93800;
  --color-warning-800: #8b2a00;
  --color-warning-900: #6b2000;

  /* Box shadows */
  --shadow-xs: 0px 1px 2px color-mix(in srgb, var(--color-red-900) 6%, transparent);
  --shadow-sm: 0px 2px 4px color-mix(in srgb, var(--color-neutral-900) 6%, transparent);
  --shadow-md: 0px 3px 6px color-mix(in srgb, var(--color-neutral-900) 7%, transparent);
  --shadow-lg:
    0px 4px 8px -2px color-mix(in srgb, var(--color-neutral-900) 5%, transparent),
    0px 5px 10px color-mix(in srgb, var(--color-neutral-900) 8%, transparent);
  --shadow-xl:
    0px 20px 24px -4px color-mix(in srgb, var(--color-neutral-900) 10%, transparent),
    0px 8px 8px -4px color-mix(in srgb, var(--color-neutral-900) 4%, transparent);

  /* Default transition duration */
  --default-transition-duration: 100ms;

  /* Animations */
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
}

@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

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: Use Geist Font

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

import { Geist, Geist_Mono } from "next/font/google"
import { cn } from "@/lib/utils"

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

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning className={cn(geistSans.variable, geistMono.variable, "scroll-smooth text-neutral-900 antialiased")}>
      <body>{children}</body>
    </html>
  )
}

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.

PlumeUI - Build beautiful React applications faster