Getting Started

A Step-by-step Guide to Using Park UI

Quickstart

Running tight on schedule? No worries! Check out our quickstart examples to get started with Park UI in seconds.

Next.js

Solid Start

Nuxt

Setup Guide

1

Prerequisite

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.

2

Install Ark UI

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

3

Install the Panda Presets

The next package you'll need is @park-ui/panda-preset. It extends the Panda Base Preset with advanced color options and opinionated design tokens.

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

Next, update your Panda config file to include the preset and set your preferred jsxFramework, as shown below:

import { defineConfig } from '@pandacss/dev'
import { createPreset } from '@park-ui/panda-preset'
import amber from '@park-ui/panda-preset/colors/amber'
import sand from '@park-ui/panda-preset/colors/sand'

export default defineConfig({
  preflight: true,
  presets: [createPreset({ accentColor: amber, grayColor: sand, radius: 'sm' })],
  include: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
  jsxFramework: 'react', // or 'solid' or 'vue'
  outdir: 'styled-system',
})

Don't forget to run panda codegen after updating your configuration

4

Path Aliases

To simplify integrating code snippets without changing import statements, set up path aliases by modifying your tsconfig.json:

{
  "compilerOptions": {
    "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: './' })],
})

5

Add your first component

Use the Park UI CLI to add your first component. For example, to add a button, run:

npx @park-ui/cli components add button

If it's your first time running the CLI, you'll be prompted to configure:

- Which JS framework do you use? [React / Solid / Vue]
- Where would you like to store your components? [./src/components/ui]
- Where would you like to store your recipes? [./src/theme/recipes]

After adding the button, your folder structure should resemble this:

➜ /src/
  |-- components/
  |   `-- ui/
  |       |-- styled/
  |       |   |-- utils/
  |       |   |   `-- create-style-context.ts
  |       |   `-- button.tsx
  |       `-- button.tsx
  `-- theme/
      `-- recipes/
          |-- button.tsx
          `-- index.ts

Update the panda.config.ts file to include the recipes:

// other imports
import { recipes, slotRecipes } from '~/theme/recipes'

export default defineConfig({
  // other configuration
  theme: {
    extend: {
      recipes,
      slotRecipes,
    },
  },
})

To add multiple components at once, list them separated by spaces:

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

Or use the --all flag to install all available components:

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

That's it! Happy hacking! ✌️

Make it yours