Installation

coral-design

Install packages


npm install @krakentech/coral-design @pandacss/dev

Configure Panda CSS

To configure Panda CSS, create a panda.config.ts file in the root of your project and add the following content:


import { defineConfig } from '@pandacss/dev';
import { createCoralPreset, coralHooks, coralLayers } from '@krakentech/coral-design';
 
export default defineConfig({
    presets: [
        createCoralPreset({}),
    ],
    include: [
        // Add your project files to statically analyse here
        './pages/**/*.{js,jsx,ts,tsx}',
 
        // You must include the Coral Design build info file to ensure that the design tokens are available in your project.
        // This file is generated by the Coral Design build process.
        './node_modules/@krakentech/coral-design/dist/panda.buildinfo.json',
    ],
    exclude: [
        // Add project files to ignore here (e.g. test files)
    ],
 
    // The following options need to be added, but do not need to be changed
    preflight: false,
    outExtension: 'js',
    importMap: '@krakentech/coral-design',
    jsxFramework: 'react',
    hash: true,
    syntax: 'object-literal',
    strictPropertyValues: true,
    hooks: coralHooks,
    layers: coralLayers
});

You must also include a postcss.config.(c)js file in the root of your project to ensure that Panda CSS works correctly with PostCSS. Create a postcss.config.(c)js file and add the following content:


module.exports = {
    plugins: {
        '@pandacss/dev/postcss': {},
    },
};

Using Blueprint?

You’ll need to pass in build info from Blueprint to the include array within defineConfig as well.


"./node_modules/@krakentech/blueprint-utils/dist/panda.buildinfo.json",
"./node_modules/@krakentech/blueprint-dashboard/dist/panda.buildinfo.json",

Import styles

At the root of your app, create a file named panda.css and add the following content:


@layer reset, base, tokens, recipes, coral_utilities;

Then, in your main entry file (e.g., _app.tsx or layout.tsx), import the styles:


import '../panda.css';