Getting started

Learn how to install and start using Pigment.

Installation

Install Pigment's base package by running either of the following:

Install Pigment's preset for Tailwind CSS as a dev dependency by running either of the following:

Adding the Tailwind CSS preset

Make sure that you have Tailwind CSS installed, then inside the tailwind.config.cjs file:

1. Add Pigment in the content array, in order to get the classes applied to the components.
2. Require the preset for Tailwind CSS.
3. Include Pigment colors to your theme configuration (optional).

js
const pigment = require("@kobalte/pigment-tailwind-preset");
module.exports = {
  content: [
    "./node_modules/@kobalte/pigment/dist/**/*.{js,cjs}",
    "./src/**/*.{html,js,jsx,ts,tsx,mdx}",
  ],
  presets: [
    pigment.preset({
      includeColors: true,
    }),
  ],
};

js
const pigment = require("@kobalte/pigment-tailwind-preset");
module.exports = {
  content: [
    "./node_modules/@kobalte/pigment/dist/**/*.{js,cjs}",
    "./src/**/*.{html,js,jsx,ts,tsx,mdx}",
  ],
  presets: [
    pigment.preset({
      includeColors: true,
    }),
  ],
};

Using the components

Import the components you need and start building your application.

tsx
import { Button } from "@kobalte/pigment";
export default function App() {
  return <Button>Hello world</Button>;
}

tsx
import { Button } from "@kobalte/pigment";
export default function App() {
  return <Button>Hello world</Button>;
}