Installation | Park UI

Quickstart

Short on time? Jump into our quickstart examples and start to explore Park UI in seconds.

Next.js

Setup Guide

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.

Install Dependencies

Park UI is built on Ark UI as its headless foundation and uses Lucide Icons by default, but you can swap it out for any icon library of your choice.

npm install @ark-ui/react lucide-react

Initialize Park UI

Next, initialize Park UI in your project. This will set up the necessary configuration files and directories.

npx @park-ui/cli@next init

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

Info

Park UI uses its own color system. To remove Panda’s default color tokens (50–950 shades), add this plugin to your Panda config:

// panda.config.ts
plugins: [
  {
    name: 'Remove Panda Preset Colors',
    hooks: {
      'preset:resolved': ({ utils, preset, name }) =>
        name === '@pandacss/preset-panda'
          ? utils.omit(preset, ['theme.tokens.colors', 'theme.semanticTokens.colors'])
          : preset,
    },
  },
],

Add components

You can now start adding components to your project.

npx @park-ui/cli@next add button

The command above will add the Button component to your project. You can then import it like this:

That's it! Happy hacking! ✌️