logo

Installation

Learn how to install and use Pigment UI components.

Default installation#

Package installation#

  • Create your Next.js application with Tailwind CSS.
  • Install Pigment UI package.
npm install pigment-ui

Color variables#

Import color variables in the root layout. See more on colors page.

layout.tsx

// ...
import "pigment-ui/colors";
// ...

Tailwind configuration#

Update your Tailwind configuration file.

tailwind.config.ts

import type { Config } from "tailwindcss";
import { twConfig } from "pigment-ui";

const config: Config = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    // add path to Pigment UI components
    "./node_modules/pigment-ui/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  // add tailwind config of Pigment UI as preset
  presets: [twConfig],
  darkMode: "class",
  theme: {
    extend: {
      // ...
    },
  },
};

export default config;
Edit this page