Getting Started

Before you start, ensure that your Panda project is set up and ready to go. If not, please refer to the Panda CSS Getting Started Guide and once you've completed that, come back to this guide.

The first step is to install Ark UI. Ark UI is a headless component library that forms the foundation for most components. To install Ark UI, execute the following command in your project's root directory:

npm install @ark-ui/react

The next package you will need is @park-ui/panda-preset. This package contains all the recipes and tokens explicitly built for Ark UI's headless components.

npm install @park-ui/panda-preset -D

After you've installed the presets, you'll need to add it to your Panda configuration file along with your preferred jsxFramework like shown below:

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  preflight: true,
  presets: ['@pandacss/preset-base', '@park-ui/panda-preset'],
  include: ['./src/**/*.{js,jsx,ts,tsx}'],
  exclude: [],
  jsxFramework: 'react', // or 'solid' or 'vue'
  outdir: 'styled-system',
})

Ensure you run panda codegen after adding the presets to your Panda configuration file.

To streamline the integration of code snippets without the need to update import statements, we recommend setting up path aliases.
To implement path aliases, modify your tsconfig.json file as follows:

{
  "compilerOptions": {
    // Your other options...
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  },
  "include": ["src", "styled-system"]
}

If you are using Vite, it is necessary to include the vite-tsconfig-paths plugin in your config file:

import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths({ root: './' })],
})

Although you can manually add components, we recommend using the Park UI CLI for efficiency. To add a single component, run:

npx @park-ui/cli components add button

If a park-ui.json file is not found in your project, the CLI will prompt you to set up the configuration by asking:

- Which JS framework do you use? [React / Solid / Vue]
- Would you like to customize the default import alias? [~/*]
- Where would you like to store your components? [~/components/ui]
- Where would you like to store helper functions? [~/lib]

To add multiple components at once, separate their names with spaces:

npx @park-ui/cli components add avatar button card

To add all available components at once, use the --all flag:

npx @park-ui/cli components add --all

And that's it! Happy hacking! ✌️