Getting Started

Learn how to install dependencies and structure your project.

In this section, you will learn how to install the necessary dependencies and structure your project to use the components.

Prerequisites

Before you begin, ensure you have the following dependencies installed:

React 19 or higher
Panda CSS - Read the installation guide
React Icons - Read the installation guide. This is optional, but it is used in this documentation.

tsconfig.json

Add baseUrl to the compilerOptions to simplify file imports. If styled-system does not appear in autocomplete, try adding it to the include array.

{
  "compilerOptions": {
    // other options
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    // other includes
    "styled-system"
  ]
}

For Vite projects, add both the baseUrl and paths compilerOptions to tsconfig.json and tsconfig.app.json.

Installation

Run the following command to initialize Nore UI

npx nore-ui-cli@latest init

You can add components to your project by running the following command:

npx nore-ui-cli@latest add [component]