## Installation

Install the packages using your preferred package manager:

```bash
pnpm add @px-ui/core @px-ui/forms
```

## Peer Dependencies

PX-UI requires the following peer dependencies to be installed in your project.

### For @px-ui/core

```bash
pnpm add @tanstack/react-query date-fns
```

### For @px-ui/forms

The forms package depends on `@px-ui/core`, so you'll need all the core dependencies plus:

```bash
pnpm add zod react-hook-form @hookform/resolvers
```

### Complete Installation

To install everything at once:

```bash
pnpm add @px-ui/core @px-ui/forms @tanstack/react-query date-fns zod react-hook-form @hookform/resolvers
```

## CSS Setup

Import the PX-UI styles in your main tailwind CSS file (e.g., `tailwind.css` or `app.css`):

```css
/* make sure you add it after the tailwind.css import */
/* @import "tailwind.css"; */
@import "@px-ui/core/fonts.css";
@import "@px-ui/core/styles.css";
```

This will inject:

* **fonts.css**: The Lato font family used throughout the components
* **styles.css**: All component styles and design tokens (colors, spacing, typography)

## Quick Start

Here's a simple example using the Button component:

```tsx
import { Button } from "@px-ui/core";

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
    </div>
  );
}
```

## Next Steps

* Browse the [Button](/docs/components/button) component to see available variants
* Explore all [Components](/docs/components/avatar) in the sidebar
* Check out [Form Fields](/docs/forms/field) for form building