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 Tacos UI. To install Tacos UI, execute the following command in your project’s root directory:

npm install @tacos-ui/react

The second step is to install @tacos-ui/styled-system. This package is used to have same design between components library and your application.

npm install @tacos-ui/styled-system

The next package you will need is @tacos-ui/panda-preset. This package contains all the recipes and tokens explicitly built for Tacos UI.

npm install @tacos-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', '@tacos-ui/panda-preset'],
  include: ['./node_modules/@tacos-ui/react/src/**/*.tsx', './src/**/*.{ts,tsx,js,jsx}'],
  exclude: [],
  jsxFramework: 'react',
  outdir: 'styled-system',
  importMap: '@tacos-ui/styled-system',
});

Make sure to run panda codegen after you’ve added the presets to your Panda configuration file.

And that’s it!