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.

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()],
};

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()],
};

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>;
}