Getting Started
A Step-by-step Guide to Using Park UI
import { defineConfig } from '@pandacss/dev'
import { createPreset } from '@park-ui/panda-preset'
export default defineConfig({
preflight: true,
presets: [
'@pandacss/preset-base',
createPreset({
accentColor: '__ACCENT_COLOR__',
grayColor: '__GRAY_COLOR__',
borderRadius: '__BORDER_RADIUS__',
}),
],
include: ['./src/**/*.{js,jsx,ts,tsx}'],
jsxFramework: '__JS_FRAMEWORK__',
outdir: 'styled-system',
})
import { parkwindPlugin } from '@park-ui/tailwind-plugin'
import type { Config } from 'tailwindcss'
const config: Config = {
content: ['./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}'],
theme: {
extend: {},
},
plugins: [parkwindPlugin],
parkUI: {
accentColor: '__ACCENT_COLOR__',
grayColor: '__GRAY_COLOR__',
borderRadius: '__BORDER_RADIUS__',
},
darkMode: ['class'],
}
export default config
A Step-by-step Guide to Using Park UI
Running tight on schedule? No worries! Check out our quickstart examples to get started with Park UI in seconds.
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
npm install @ark-ui/solid
npm install @ark-ui/vue
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',
outdir: 'styled-system',
})
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: 'solid',
outdir: 'styled-system',
})
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: 'vue',
outdir: 'styled-system',
})
Make sure to run panda codegen
after you’ve added 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: './' })],
})
The easiest way to add components to your project is by using the Park UI CLI. Execute the following command to initialize the CLI:
npx @park-ui/cli init
You will be prompted to answer a few questions to configure park-ui.json
:
- Which CSS framework do you use?: [Panda / Tailwind]
- Which JavaScript framework do you use?: [React / Solid / Vue]
- What is your import alias for components?: [~/components/ui]
- What is your import alias for utilities?: [~/lib]
- Would you like to write the configuration to park-ui.json?: [Yes / No]
Now you can start adding components to your project like shown below:
npx @park-ui/cli add button
To add all components at once, use the --all
flag:
npx @park-ui/cli add --all
And that’s it! Happy Hacking ✌️
Previous
IntroductionNext
Figma Kit