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.
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 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
Install the Panda Presets
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.
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: './' })],
})
Adding Components to Your Project
We recommend storing your components in the ~/components/ui
directory.
Here's an example how a project structure might look like:
ā /src/components/ui/
|-- styled/
| |-- utils/
| | `-- create-style-context.ts
| `-- button.tsx
`-- button.tsx
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]
- Where would you like to store your components? [./src/components/ui]
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! āļø